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

[emad_67]

سلام دوستان
مدتی پیش یه مقاله در مورد ساخت منو های drop down نوشتم که مسئولین مجله لطف کردن و اونو در مجله درج نمودند. این مقاله رو تصمیم گرفتم در این بخش برای سایر کاربران هم قرار بدم:

منو ها یکی از مواردی هستند که امروزه در بسیاری از سایت ها مورد استفاده قرار می گیرند و علاوه بر زیبایی، انسجام خاصی نیر به بخش های مختلف یک سایت می دهند. در این آموزش قصد دارم نحوه ساخت منو های drop down یا پایین افتادنی را تنها با استفاده از CSS و بدون جاوا اسکریپت آموزش دهم.

در ساخت این منو ها از لیست های نا مرتب(Unordered List) یعنی برچسب های ul-li استفاده خواهیم کرد به طوری که هر عنصر li یکی از گزینه های منوی ما خواهد بود.
برای شروع کار ابتدا نوار منو و گزینه های آن را طراحی می کنیم و سپس زیر منو ها را به آن اضافه خواهیم کرد. کد html زیررا در نظر بگیرید:

<ul id="menu">

    <li><a href="#">Main Page</a></li>

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

    <li><a href="#">Front end</a>

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

</ul>

در کد بالا بر چسب ul، نوار منو، و هر یک از li ها منو های ما را تشکلیل می دهند.
برچسب های بالا را با استفاده از کد CSS زیر سبک دهی می کنیم:

#menu

{

    list-style: none;

    border: 1px solid #000;

    background-color: #ecffec;

    padding: 0 0 26px 0;

    margin: 0;

}

#menu li

{

    float: left;

    margin-right: 3px;

    border: 1px solid #ecffec;

}

برای تبدیل لیست به یک منوی افقی لازم است خاصیت float: left را به بر چسب های li نسبت دهیم تا هر گزینه به صورت شناور در سمت چپ در بیاید. با شناور کردن بر چسب های li، ارتفاع بر چسب ul صفر می شود، برای حل این مشکل از padding در گزینشگر #menu که به ul نسبت داده شده است استفاده می کنیم و مقدار آن را متناسب با ارتفاع مورد نظر تنظیم می کنیم. در این مثال مقدار 26 پیکسل برای padding-bottom در نظر گرفته شده است. به علت اینکه مرورگرهای مختلف برای خاصیت margin و padding برچسب ul مقدار پیش فرضی را در نظر می گیرند که این مقادیر با هم متفاوت اند و باعث بهم ریختگی در طرح می شود، به همین دلیل از padding به جای padding-bottom استفاده می کنیم و سایر مقادیر آن را برابر صفر قرار می دهیم.
منو های ما تا این لحظه به صورت زیر است:

تا اینجا تقریبا فرم کلی منو شکل گرفته است. برای اضافه کردن زیر منو ها یا در واقع قسمت پایین افتادنی منو از یک بر چسب ul در درون بر چسب li مورد نظر استفاده خواهیم کرد. مثلا فرض کنید می خواهیم به منوی Front end زیر منو های مورد نظر را اضافه کنیم، برای این کار یک برچسب ul درون برچسب li ی مربوط به Front end اضافه می کنیم و زیر منو های مورد نظر را داخل آن قرار می دهیم:

 ...

<li><a href="#">Front end</a>

    <ul class="submenu">

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

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

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

        <li><a href="#">Recyle Bin</a></li>

    </ul>

</li>

...

و برای سبک دهی به آن از CSS زیر استفاده می کنیم:

#menu, #menu ul

{

    list-style: none;

    border: 1px solid #000;

    background-color: #ecffec;

    padding: 0 0 26px 0;

    margin: 0;

}

#menu li

{

    ...

    position: relative;

    ...

}

#menu ul

{

    position: absolute; 

    top: 25px;

    left: -1px;

    width: 150px;

    padding: 0;

}

#menu ul li

{

    float: none;

    margin: 0;

    padding: 0;

    line-height: 15px;

}

توجه داشته باشید که برای عدم تکرار خصوصیات مشترک بین منوی اصلی و زیر منو( ul درونی) از همان سبک های های منوی اصلی استفاده شده و خصوصیات جدید به صورت جداگانه به بر چسب ul درونی نسبت داده شده است. خاصیت position: absolute باعث می شود که زیر منوی ما از جریان کلی صفحه خارج شود و موقعیت و اندازه آن بر روی سایر عناصر تاثیری نداشته باشد. به دلیل اینکه نیاز داریم بر چسب ul را نسبت به بر چسب والد آن یعنی برچسب li موقعیت دهی کنیم، مقدار position: relative را نیز به بر چسب های li نسبت می دهیم. در صورت عدم استفاده از این خاصیت بر چسب ul نسبت به چهارچوب صفحه موقعیت دهی خواهد نیست نه بر چسب li.
خاصیت های اختصاص یافته به برچسب li در گزینشگرli #menu به li های بر چسب ul درونی نیز اختصاص میابند که باعث می شود زیر منو ها نیز از float: left استفاده کنند و به صورت افقی و شناور دربیایند، بنابراین لازم است خاصیت float را در برچسب مربوطه برابر none قرار دهیم تا از این حالت جلوگیری شود.
در نهایت با نسبت دادن سبک های بالا طرح ما به شکل زیر در خواهد آمد:

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

#menu a:link, #menu a:visited

{

    display: block;

    font-family: Tahoma;

    font-size: 0.75em;

    font-weight: bold;

    text-align: left;

    text-decoration: none;

    color: #000;

    padding: 5px;

}

#menu li:hover

{

    background-color: #ffd98a;

    border: 1px solid #000;

}

خاصیت display: block را به لینک ها نسبت می دهیم تا لینک ها به صورت یک بلوک نمایش یابند و تمام ناحیه منو را دربرگیرد.
توجه داشته باشید که برای تغییر سبک در کلاس hover، این کلاس بر خلاف اکثر مواقع که به برچسب a نسبت داده می شد، به برچسب li نسبت داده شده است. لازم به ذکر است به دلیل اینکه مرورگر اینترنت اکسپلورر کلاس کاذب hover را تنها برای بر چسب a می شناسد، این جلوه در این مرورگر کار نخواهد کرد. البته در انتها از یک فایل ضمیمه برای اصلاح این مورد در اینترنت اکسپلورر استفاده خواهیم کرد.
با افزودن کد های این مرحله کار سبک دهی به منو پایان میابد و طرح ما به شکل زیر خواهد بود:

حال باید کاری کنیم که تنها در زمان قرار گرفتن موس بر روی منو، زیر منوی آن ظاهر شود.

به این منظور خاصیت display: none را به برچسب ul درونی(#menu ul) نسبت می دهیم تا در شرایط عادی نمایش داده نشود. اما برای نمایش آن باید به نوعی ظاهر شدن زیر منو را به کلاس hover وابسته کنیم:

#menu li:hover ul

{

    display: block;

}

در کد بالا تنها زمانی display:block به برچسب ul اختصاص میابدکه کلاس hover فعال باشد، یعنی زمانی که موس بر روی li ها قرار گیرد.
با اتمام این قسمت، کار ساخت منو های ما نیز پایان می یابد. شما می توانید با اضافه کردن برچسب های ul و موقعیت دهی آن ها زیر منو هایی را نیز به زیر منو های ساخته شده اضافه نمایید.
نکته:
در بالا گفته شد که مرورگر اینترنت اکسپلورر کلاس کاذب hover را تنها برای برچسب a می شناسد که باعث عدم کارکرد صحیح منو ها در این مرورگر می شود. برای حل این مشکل و شناساندن کلاس های کاذب دیگر از جمله hover، focus، active و ... فایلی با پسوند htc به همراه کد های منو در ضمیمه قرار داده شده است. بعد از دانلود فایل مذکور این کد را به برچسب body صفحه خود اضافه کنید:

body

{

    behavior: url("csshover.htc");

}

ناگفته نماند که behavior یک خصیصه غیر استاندارد است که تنها در مرورگر اینترنت اکسپلورر شناخته می شود. همچنین فایل htc ضمیمه شده به صورت درونی از جاوا اسکریپت برای شناسایی کلاس های کاذب استفاده می کند بنابراین در صورت غیر فعال بودن جاوا اسکریپت بر روی اینترنت اکسپلورر باز هم مشکل عدم نمایش زیر منو ها به وجود می آید.
موفق باشید
-----------------
ویرایش: برای اضافه کردن زیر منو تا هر سطح دلخواه و همینطور اضافه کردن یک فلِش برای منوهایی که زیر منو دارن به این پست رجوع کنید:
https://barnamenevis.org/showthread.p...=1#post1212515