مشکل با انیمیش درساب منو

[yaser4365 0]

باسلام و عرض ادب

دوستان من میخوام وقتی زیرمنوهام باز میشه و روشون هاور میکنم نوشته اونا یه حرکت کوچیک از سمت چپ به راست داشته باشه

ممنون میشم راهنماییم کنید

من اینجوری نوشتم کار نمیکنه میشه بگین این کد درسته یا نه

animation:ali linear .3s;
		    -moz-animation:ali linear .3s;
	    }
@keyframes ali{
    from {text-align:left;}
    to{text-align:right;}

}
@-moz-keyframes ali{
    from {text-align:left;}
    to{text-align:right;}
}

[themento 348]

سلام بله کد ها برای اینکار اشتباه هستن.

شما باید قسمت html رو ضمیمه کنید. یا یه آدرس آنلاین بزارید تا دقیق بهتون بگم.

ولی درکل باید اینجوری بشه:

ul li a {
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
ul li a:hover {
padding-left: 5px;
}

[yaser4365 0]

با این دستور padding-left خود تب منو عرضش کم میشه من میخوام نوشته یا text اون یه حرکتی بکنه

[علی زینلی 2114]

با این دستور padding-left خود تب منو عرضش کم میشه من میخوام نوشته یا text اون یه حرکتی بکنه

کد HTML رو بذارید تا راهنمایی بیشتری بکنیم ، چون ممکنه که با a باشه ممکنه با هرچیز دیگه...

[yaser4365 0]

باتشکر اینم کد منو

	    #nav{
		    background-color:#0592FA;
		    height:35px;
   border-bottom-right-radius:10px;
   border-bottom-left-radius:10px;
   border-style: outset;
		 border-color:#fff;
   width:990px;
   font-size:18px;
   font-family:'bhoma';
   margin-top:-5px;	  
	    }

	    #nav ul{
		    list-style: none;
   padding:0;
   margin:0;

	    }

	    #nav li{
		    position: relative;

	    }

	    #nav > ul > li{
		    float: right;
   border-left:2px solid #000;

	    }

	    #nav > ul > li > a{
		    display: inline-block;
		    color: white;
		    padding: 0px 10px;
		    line-height: 35px;


	    }

	    #nav > ul > li a:hover > {
		    background-color:darkred;
		    color: white;
   text-decoration:overline;


	    }

	    /* styles for sub menu */
	    #nav .sub-menu{
		    display: none;
		    position: absolute;


	    }

	    #nav .sub-menu > li > a{
		    display: block;
		    width: 120px;
		    background-color: darkred;
		    color: white;
		    padding:7px 10px;
   font-size:14px;


  }
	    #nav .sub-menu > li:hover > a{
		    background-color:#FC6;
   color:#000;




  }
	    #nav li:hover > .sub-menu{
		    display: block;


	    }

	    /* styles for sub-menu under sub-menu */
	    #nav .sub-menu > li > .sub-menu{
		    right: 140px;
		    top: 0;

[themento 348]

اینا کد های css هستن. یا کد های html رو بزارید یا آدرس آنلاین بدید.

این سلکتور هم بسته نشده:

#nav .sub-menu > li > .sub-menu{
					    right: 140px;
					    top: 0;

[yaser4365 0]

خوب کد منو همینه دیگه

شما با دستورات سی اس اس نمیشه بگین چحوری باید نوشته بشه؟؟

[themento 348]

خب عزیز من کد منو یه ساختار html داره یه css با css تنها مشکلتونو نمیتونیم حل کنیم. اگه وارد نیستید یه آدرس آنلاین بزارید تا دقیق بهتون بگم چی کار کنی.

[yaser4365 0]

سلام مجدد این کد اچ تی ام ال منوی من

 <div id="nav">

<div id="yas"></div>

<ul>

<li><a href="#">خانه</a></li>

<li>

<a href="#">درباره ما</a>

<ul class="sub-menu">

<li><a href="#">گالری</a></li>

<li><a href="index.php?option=com_content&view=article&id=62">ارتباط با ما</a></li>

<li><a href="#">تماس با ما</a>

<ul class="sub-menu">

<li><a href="#">برنامه ها</a></li>

<li>

<a href="#">پایگاه داده</a>

<ul class="sub-menu">

<li><a href="#">جلسات </a></li>

<li><a href="#">مباحث</a></li>

<li><a href="#">دروس</a></li>

</ul>

</li>

<li><a href="#">شبکه بندی</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">سایتهای مرتبط</a></li>

<li><a href="#">معرفی محصولات</a></li>

<li><a href="#">تماس ها</a></li>

</ul>

<div class="clear-fix"></div>

</div>

[علی زینلی 2114]

علیک السلام!

همینطور که دوست عزیزم علی جان گفتن شما باید از کد زیر استفاده کنید

padding-left: مقداری که میخواین بره به سمت چپ

و این تغییر رو باید در اینجا بدین:

			    #nav .sub-menu > li:hover > a{
					    background-color:#FC6;
   color:#000;



  }

که تبدیل میشه به این:

			    #nav{
					    background-color:#0592FA;
					    height:35px;
   border-bottom-right-radius:10px;
   border-bottom-left-radius:10px;
   border-style: outset;
				 border-color:#fff;
   width:990px;
   font-size:18px;
   font-family:'bhoma';
   margin-top:-5px;	  
			    }
			    #nav ul{
					    list-style: none;
   padding:0;
   margin:0;

			    }
			    #nav li{
					    position: relative;

			    }
			    #nav > ul > li{
					    float: right;
   border-left:2px solid #000;

			    }
			    #nav > ul > li > a{
					    display: inline-block;
					    color: white;
					    padding: 0px 10px;
					    line-height: 35px;

			    }
			    #nav > ul > li a:hover > {
					    background-color:darkred;
					    color: white;
   text-decoration:overline;


			    }

			    /* styles for sub menu */
			    #nav .sub-menu{
					    display: none;
					    position: absolute;


			    }
			    #nav .sub-menu > li > a{
					    display: block;
					    width: 120px;
					    background-color: darkred;
					    color: white;
					    padding:7px 10px;
   font-size:14px;


  }
			    #nav .sub-menu > li:hover > a{
					    background-color:#FC6;
   color:#000;
   padding-left: 20px;


  }
			    #nav li:hover > .sub-menu{
					    display: block;


			    }

			    /* styles for sub-menu under sub-menu */
			    #nav .sub-menu > li > .sub-menu{
					    right: 140px;
					    top: 0;

و اگر بخواین حالت انیمیشن بهش بدین و افکت دار بشه از کد زیر استفاده کنید که خیلی جالب ترش هم میکنه

			    #nav{
					    background-color:#0592FA;
					    height:35px;
   border-bottom-right-radius:10px;
   border-bottom-left-radius:10px;
   border-style: outset;
				 border-color:#fff;
   width:990px;
   font-size:18px;
   font-family:'bhoma';
   margin-top:-5px;	  
			    }
			    #nav ul{
					    list-style: none;
   padding:0;
   margin:0;

			    }
			    #nav li{
					    position: relative;

			    }
			    #nav > ul > li{
					    float: right;
   border-left:2px solid #000;

			    }
			    #nav > ul > li > a{
					    display: inline-block;
					    color: white;
					    padding: 0px 10px;
					    line-height: 35px;

			    }
			    #nav > ul > li a:hover > {
					    background-color:darkred;
					    color: white;
   text-decoration:overline;


			    }

			    /* styles for sub menu */
			    #nav .sub-menu{
					    display: none;
					    position: absolute;


			    }
			    #nav .sub-menu > li > a{
					    display: block;
					    width: 120px;
					    background-color: darkred;
					    color: white;
					    padding:7px 10px;
   font-size:14px;
  -webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;

  }
			    #nav .sub-menu > li:hover > a{
					    background-color:#FC6;
   color:#000;
   padding-left: 20px;


  }
			    #nav li:hover > .sub-menu{
					    display: block;


			    }

			    /* styles for sub-menu under sub-menu */
			    #nav .sub-menu > li > .sub-menu{
					    right: 140px;
					    top: 0;

موفّق باشی.

[yaser4365 0]

باسلام و تشکر

ولی این چیزی نیست که من میخواستم . من میخوام متن حرکت کنه نه بلاک منو-- فقط متن و عنوان منو یه ذره حرکت کنه به سمت راست وقتی روش هاور میشه.این دستور دقیقا خود بلاک منو طولش رو بزرگ میکنه

[amirali.bk 656]

سلام

این خط رو پیدا

#nav .sub-menu > li > a

و کد زیر رو بهش اضاف کنید :

-webkit-transition: 0.3s;

و

این کد هم زیره کده بالا وارد کنید :

#nav .sub-menu > li > a:hover {
padding-left: 15px;
}

دمو : http://codepen.io/anon/pen/zxYeKM

[علی زینلی 2114]

آها عذرخواهم دوست عزیز ، کدت چون به صورت غیر استاندارد نوشته شده اینجوری شده... (اومده استایل ها رو داده به تگ a به جای اینکه بده به li)

کد رو برات تغییر دادم و امتحانش کردم ، کار میکنه

							    #nav{
											    background-color:#0592FA;
											    height:35px;
   border-bottom-right-radius:10px;
   border-bottom-left-radius:10px;
   border-style: outset;
								 border-color:#fff;
   width:990px;
   font-size:18px;
   font-family:'bhoma';
   margin-top:-5px;	  
							    }
							    #nav ul{
											    list-style: none;
   padding:0;
   margin:0;

							    }
							    #nav li{
											    position: relative;

							    }
							    #nav > ul > li{
											    float: right;
   border-left:2px solid #000;

							    }
							    #nav > ul > li > a{
											    display: inline-block;
											    color: white;
											    padding: 0px 10px;
											    line-height: 35px;

							    }
							    #nav > ul > li a:hover > {
											    background-color:darkred;
											    color: white;
   text-decoration:overline;


							    }

							    /* styles for sub menu */
							    #nav .sub-menu{
											    display: none;
											    position: absolute;
												 background-color: darkred;
											    width: 140px;
							    }
							    #nav .sub-menu > li:hover{
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
							    #nav .sub-menu > li:hover{
											    background-color:#FC6;
}
							    #nav .sub-menu > li > a{
width: 120px;
display: block;
padding:7px 10px;
color: white;
font-size:14px;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
  }
							    #nav .sub-menu > li:hover > a{
   color:#000;
   padding-left: 20px;


  }
							    #nav li:hover > .sub-menu{
											    display: block;


							    }

							    /* styles for sub-menu under sub-menu */
							    #nav .sub-menu > li > .sub-menu{
											    right: 140px;
											    top: 0;
margin-left:40px;
		  }   

موفّق باشی.

[yaser4365 0]

ممنون ازلطفتون درست شد

فقط الان اگه بخوام ایتم منویی که فعال هست رنگش با بقیه فرق داشته باشه دقیقا چه کدی رو باید براش بنویسم؟؟؟

ممنون میشم راهنماییم کنید بازم تشکر از همه دوستان

[themento 348]

باید به li این کلاس رو بدی:

li.current-menu-item {
background-color: #fff;
}

[yaser4365 0]

سلام متاسفانه با این دستور کار نمیکنه

احتمالا نباید این مدلی باشه????

ul li a:active{

background:red

}

[themento 348]

خیر اکتیو برای زمانیه که روش کلیک میشه.

مگه شما از فهرست ها برای منو استفاده نمیکنی؟

[yaser4365 0]

منظورتون از فهرست ها رو متوجه نشدم

درضمن کدی که شما گفتین کار نمیکنه برای من

[themento 348]

شما منو ها رو از کجا ایجاد میکنید؟

باید از قسمت نمایش > فهرست ها، درست کنید منو ها رو. اونموقع کار میکنه این کد.

[علی زینلی 2114]

کد هایی مثل :active یا :hover کد های مخصوص هاور هستن! :active زمانی به کار میره که روش کلیک میکنین.

کدهایی که .active دارند کد هایی هستن که خود وردپرس ساختشون و شما باید طبق دستور العمل وردپرس عمل کنین که کار کنه.

برای کد بالا که گذاشتین خیلی سخته به کار گرفتنش

یه نمونه کد که کار میکنه و به سبک کد شما ساخته شده:

.navbar-nav > .active > a {
background-color: #31A3DD;