ساخت منو های drop down با استفاده از CSS

[shahriar_1363]

سلام
ببخشید می بینم که این تاپیک دیگه کسی سر نمی زنه ولی شانسم رو امتحان می کنم
من همین منو رو طراحی کردم به جای ul اول عکس گذاشتم
مشکل من این هست که می خوام 3 تا زیر منو داشته باشم ولی وقتی زیر منوی دوم باز می شه زیر منوی 3 هم باز می شه یعنی هر چی تلاش کردم نتونستم زیر منوی سوم خاصیت display:none رو اجرا کنم
اگه ممکن باشه کمکم کنید ممنون می شم

[emad_67]

یه سری از سوالات دوستان رو تو این پست جواب میدم:

1.با تغییر در css منو تو ie6 و ie5 کار نمیکنه؟

سلام آقا عماد من منوي شما رو گذاشتم تو سايتم ولي زير منوها تو ie6 باز نميشن
من بايد چي كار كنم؟

فکر نمی کنم که کار کنه به خاطر وجود کلاس های کاذب hover. من خیلی وقته نه با ie6 و نه 7 دیگه کار نمی کنم، مبنای کارم ie 8 به بالاست.

2.می خوام وقتی موس میره روی منوها، همانطور که رنگ بگراند منو در زمان hover تغییر میکنه رنگ فونتم تغییر کنه؟ menu li:hover#

متن داخل تگ a قرار داره بنابراین باید برای a:hover استایل رو بنویسی:

#menu a:hover

{

    color: blue;

}

3.میخوام برای زیر منوی که زیر منو داره جلوی لینک منو یک آیکن(پیکان) بزارم، به این معنا که این زیر منو نیز زیر منو دارد؟

یک کلاس جدا مثلا به اسم arrow تعریف کنید و اونو به منو هایی که زیر منو دارن نسبت بدید. به این شکل:

.arrow

{

    background: url('arrow.png') no-repeat top right;

}

و هنگام نسبت دادم به زیر منو:

<li><a href="#" class="arrow">C#‎</a>

                        <ul>

                            <li><a href="#">Collections</a></li>

                            <li><a href="#">Arrays</a></li>

                        </ul>

                    </li>

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

01.jpg

من هر کاری می کنم نمی تونم این استایل رو برای منوی asp.net استفاده کنم. لطفا راهنمائی کنید.

منو های asp.net تک table تولید می کنن که این استایل ها با اون سازگار نیست، چون اینجا مبنای کار ul -li بوده.

مشکل من این هست که می خوام 3 تا زیر منو داشته باشم ولی وقتی زیر منوی دوم باز می شه زیر منوی 3 هم باز می شه یعنی هر چی تلاش کردم نتونستم زیر منوی سوم خاصیت display:none رو اجرا کنم

برای حل این مشکل میشه از child combinator استفاده کرد که در ادامه توضیح میدم:
دو گزینشگر زیر رو در نظر بگیرید:

ul li { padding: 5px; }

ul > li { padding: 5px; }

در حالت اول که اصطلاحا بهش descendant selector گفته میشه، تمام li هایی که داخل تگ ul قرار دارن تحت تاثیر قرار میگیرن، حالا در هر عمقی که می خوان باشن. مثل:

<ul>

        <li>test1</li>

        <ol>

            <li>test2</li>

        </ol>

    </ul>

که در واقع تگ li ی داخل ol هم انتخاب میشه.
در مواقعی مثل الان ممکنه نیاز داشته باشیم تا فقط تگ هایی رو تحت تاثیر قرار بدیم که در سطح اول قرار دارن، یعنی تگ li ی test1. تو همچین مواردی باید از combinator selector استفاده بشه. combinator همون علامت < هست که بهش گزینشگر فرزندی هم گفته میشه. در واقع زمانی که از < برای انتخاب که عنصر داخلی استفاده می کنیم، تنها عناصری انتخاب میشن که در سطح اول قرار داشته باشن، نه سطوح داخلی تر. یعنی توی این مثال ما فقط تگ li ی test1 انتخاب میشه.
------------
حالا توی منو ها می تونید تا هر سطحی که لازم دارید زیر منو تعریف کنید. فقط این قسمت از کد های css رو باید تغییر بدید:

#menu ul.submenu li:hover ul

{

    display: block;

}

تغییر بدید به:

#menu ul.submenu li:hover > ul

{

    display: block;

}

در تصویر بالا می بینید که یه زیر منو برای C#‎ هم اضافه کردم.
فایل ضمیمه رو برای این قسمت و همینطور قرار دادن arrow دانلود کنید.

[arashkey]

با تشکر از آقا عماد
این کد برای کسانی که احتیاج به منو فارسی دارنarashkey.rar

فقط مشکلی که دارم اینه که من می خوام منو ها سریع باز نشن بلکه مثلا یک ثانیه تا باز شدن طول بکشن و همچنین بسته شدن هم چند ثانیه طول بکشه
با جاوااسکریپت نباشه بهتره چون بعضی ها جاوااسکریپت رو خاموش می کنن یا توسط IE بعضی از کدهاش بلاک می شه
گفتند با Expression تو Css میشه اینکارو کرد
فقط سر نخ می خوام

[alismith]

سلام

من پیشنهاد می کنم برای ایجاد duration از jquery استفاده کنید ولی چون خودتون می گید با جاوااسکریپت نباشه می تونید از css3 و خاصیت transition-duration استفاده کنید
اما در بیشتر مواقع مخصوصا در IE که خودتون اشاره کردید jQuery مطمئن تر هستش


موفق باشید

[amir2105]

سلام چطور زیر منوهام رو از راست به چپ باز کنم

[css-man]

توی این منو شما یکبار id تعریف کردی برای ul و بهش سبک دادی

بعد اومدی نوشتی #menu, #menu ul این یعنی چی چرا دوبار نام id , نوشتی؟

چند بار به ul سبک دادی
از کجا مشخص میشه چی ماله کدومه
؟

[nineteen]

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

    <link rel="stylesheet" type="text/css" href="style/general.css" />

<title>Content Managment System</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<ul id="menu">

   <li><a href='#'><span>سایت</span></a>

    <ul class="submenu">

     <li><a href='#'><span>کنترل پنل</span></a></li>

     <li><a href='#'><span>تنظیمات کلی</span></a></li>

     <li><a href='#'><span>خروج</span></a></li>

    </ul>

    </li>

   <li><a href='#'><span>کاربران</span></a>

      <ul class="submenu">

         <li><a href='#'><span>مدیریت کاربران</span></a>

          <ul>

           <li><a href='#'><span>ایجاد کاربر جدید</span></a></li>

          </ul>

         </li>

         <li><a href='#'><span>ارسال ایمیل گروهی</span></a></li>

      </ul>

   </li>

   <li><a href='#'><span>منوها</span></a>

   <ul class="submenu">

     <li><a href='#'><span>مدیریت منوها</span></a></li>

     <li><a href='#'><span>منوی کاربری</span></a></li>

     <li><a href='#'><span>منوی اصلی</span></a></li>

    </ul>

   </li>

   <li><a href='#'><span>محتوا</span></a>

   <ul class="submenu">

    <li><a href='#'><span>مدیریت مطالب</span></a></li>

   </ul>

   </li>

   <li><a href='#'><span>راهنما</span></a>

   <ul class="submenu">

     <li><a href='#'><span>راهنمای سیستم مدیریت</span></a></li>

     <li><a href='#'><span>سایت پشتیبانی</span></a></li>

    </ul>

   </li>

</ul>

</body>

</html> 

*{

    margin:0;

    padding:0

}

body {

    font: 12px Arial, Tahoma, Verdana;

    background: #FFF url(../image/bg.gif) repeat-x;

    direction:rtl;

}



#menu, #menu ul {

    width:100%;

    background:#d7d4cf;

    padding:1px 0;

    margin:39px 0;

    list-style:none;

    width:100%;

    height:21px;

    border-top:1px solid #FFFFFF;

    border-bottom:1px solid #FFFFFF;

    font:normal 8pt verdana, arial, helvetica;

}

#menu li

{

    float: right;

    position: relative;

    border: 1px solid #d7d4cf;

    background-repeat: no-repeat;

    background-position: right;

}

#menu ul

{

    position: absolute;

    top: -20px;

    right: -1px;

    width: 150px;

    padding: 0;

    display: none;

}

#menu ul li

{

    float: none;

    margin: 0;

    padding: 0;

    line-height: 15px;

}

#menu a:link, #menu a:visited

{

    display: block;

    font-size: 0.75em;

    text-align: right;

    text-decoration: none;

    background:#d7d4cf;

    color:#000;

    width:148px;

    height:13px;

    padding: 4px 0;

}

#menu li:hover

{

    padding:4px 0;

    display:block;

    text-align:center;

    text-decoration:none;

    background:#d7d4cf;

    color:#000;

    width:146px;

    height:13px;

    border-left:1px solid #878480;

    border-right:1px solid #878480;

}

#menu li:hover ul.submenu

{

    display: block;

}

#menu ul.submenu ul

{



    right: 150px;

    display: none;

}

#menu ul.submenu li:hover > ul

{

    display: block;

}

#menu ul a:link, #menu ul a:visited

{

    padding-right: 25px;

}

[vB.N3T]

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

مثلا این css برای تگ ul هست

#menu ul

{

	position: absolute; 

	top: 25px;

	left: -1px;

	width: 150px;

	padding: 0;

	display: none;

}

این کد

#menu ul li

{

	float: none;

	margin: 0;

	padding: 0;

	line-height: 15px;

}

چرا یه این شکا هست #menu ul li؟؟؟

یا این

#menu a:link, #menu a:visited

چرا دو بخشی هست؟؟ من تو مکانزیم این روش مشکل دارم ممنون میشم توضیح دهید

مثلا اینا چی میگن...قسمت اولش برای چی هست ؟ دومش برای چی؟

#menu li:hover

#menu li:hover ul.submenu

#menu ul.submenu li:hover ul

#menu ul a:link, #menu ul a:visited

[vahide amp]

این کد #menu ul برای قسمت منو ulهست. این کد menu ul li برای li ی که درون ul هست. یا این کد menu a:link, menu a:visited برای عمل لینک a و زمانی که لینک a مشاهده میشه هست.

[vB.N3T]

hover یعنی چی؟؟؟a:visited چیه؟؟
این 2 قسمتی ها چطوری کار میکنن

#menu ul a:link, #menu ul a:visited

[mohammad kafiyan]

untitled.PNG
کلاسهای کاذب هستند که برای نمایش رویدادهای پویا مورد استفاده قرار می گیرند مثل تغییر وضعیت یک کنترل

[vahide amp]

من این منو رو ساختم ولی می خوام زیر منو درست در قسمت پایین منو نمایش داده بشه. آخه زیر منو یکم میاد راست باز میشه