ساخت زیر منو برای منو های سایت با css

[Blood 23]

با سلام و خسته نباشید یک منو من دارم که میخوام زیر منوی های اون رو ایجاد کنم با استفاده از css که وقتی روی منو کلیک کردم به صورت فیید شده و آهسته زیر منو های من باز شود. آیا باید از جیکوئری هم استفاده کنم ؟ میشه من رو راهنمایی بفرمایید و اگر آماده ی این هست برای من قرا بدین؟ من عکس منو هام رو قرار میدم در پایین و سایت نمونه هم میزارم براتون

سایت نمونه

دقیقا مثل همین میخوام

عکس منو های خودم در پایین

ویرایش شده خرداد 93 توسط M.At

[Parsa 23463]

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

نمونه

http://www.irpcn.com/web/drop-down-menu.html

http://rokesh.ir/wordpress-tutorials-making-drop-down-menu-for-wordpress/

[Blood 23]

آیا خاصیت در css

border-left:1px solid #F3F3F3;

نازکتر هم هست یعنی به جای 1px کم تر هممیشه استفاده کرد مثلا 0.5 یا نازکتر؟

[Parsa 23463]

از واحد em میتوانید استفاده کنید

http://stackoverflow.com/questions/13891177/css-border-less-than-1px

[Blood 23]

مرسی از جوابهای سریع و مفیدت پارسا جان

یک سوال من این منو رو پیدا کردم لینک

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

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

و خیلی سریع هم باز میشه من می خوام با افکتی محو از بالا به پایین بیاد یعنی مثل سایت منوهاش منظورم هست. لطفا مشاهده کنید و بگید که چه جوری این کار رو انجام باید داد؟

این هم کدهایی که من استفاده کردم

<nav>
	   <?php
	    if ( has_nav_menu( 'primary' ) ) {		
		 wp_nav_menu( array( 'theme_location' => 'primary' ) );
	    }
	    else {
		 wp_page_menu();
	    }
	   ?></nav>

nav {
margin:0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {

list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
  content: ""; clear: both; display: block;
}
nav ul li {
  float: right;
  height:70px;
  line-height:70px;
  background: transparent url(images/Menu-Image.png);
  background-color:#89D2FD;
	 -webkit-transition: background 0.2s linear;
		   -moz-transition: background 0.2s linear;
		    -ms-transition: background 0.2s linear;
			 -o-transition: background 0.2s linear;
			    transition: background 0.2s linear;
}
  nav ul li:hover {
   background:#248FCA;
   border-left:0.1em solid #B8E4FE;
	  width:188px;
  }
   nav ul li:hover a {
    color: #fff;
   }

  nav ul li a {
   display: block;
   text-decoration: none;
   font-size: 15px;
		 text-align:center;
		 color: #fff;
   width:189px;

  }


nav ul ul {
  border-radius: 0px;
  position: absolute; top: 100%;
  border-top: 1px solid #BFE7FE;
}
  nav ul ul li {
   float: none;
   background:#248FCA;
   width:188px;
   height:150px;
   line-height:33px;
	  position: relative;
  }
   nav ul ul li a {
    color: #fff;
   }
    nav ul ul li a:hover {
	 background: #78CCFD;
    }

nav ul ul ul {
  position: absolute; left: 100%; top:0;
}

[محــــــمدرضا 344]

با خاصیت زیر می تونید مدت زمان نمایش و یا تغییر رنگ عناصر در صفحه را تعیین کنید در مورد سوال بعدی شما که می خواهید از بالا به پایین باز شود به طور حتم باید از JQuery استفاده شود

transition: all 200ms ease 0s;

ویرایش شده تیر 93 توسط XeonIran

[Blood 23]

با خاصیت زیر می تونید مدت زمان نمایش و یا تغییر رنگ عناصر در صفحه را تعیین کنید در مورد سوال بعدی شما که می خواهید از بالا به پایین باز شود به طور حتم باید از JQuery استفاده شود

transition: all 200ms ease 0s;

ممنون از خاصیت z-index: 999 استفاده کردم درست شد

اما جی کوئری؟؟؟؟ به چه صورت مشابه ندارد جایی باشه استفاده کنم ؟

[Blood 23]

و برای اینکه وقتی روی یک منو کیک میکنم و داخل اون صفحه میره میخوام رنگ اون منو مثلا آبی بشه ؟ اون چه جوریه؟

[Blood 23]

لطفا جواب بدین

ویرایش شده تیر 93 توسط M.At