نظرسنجی
علاقه مند به کار در کدام شرکت هستید؟








 
خروجی RSS

ساخت منو های Drop Down با CSS


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

در ساخت این منو ها از لیست های نا مرتب(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 استفاده می کنیم و سایر مقادیر آن را برابر صفر قرار می دهیم.
منو های ما تا این لحظه به صورت زیر است:

menu02

 تا اینجا تقریبا فرم کلی منو شکل گرفته است. برای اضافه کردن زیر منو ها یا در واقع قسمت پایین افتادنی منو از یک بر چسب 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 قرار دهیم تا از این حالت جلوگیری شود.
در نهایت با نسبت دادن سبک های بالا طرح ما به شکل زیر در خواهد آمد:

menu03

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

#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 می شناسد، این جلوه در این مرورگر کار نخواهد کرد. البته در انتها از یک فایل ضمیمه برای اصلاح این مورد در اینترنت اکسپلورر استفاده خواهیم کرد.
با افزودن کد های این مرحله کار سبک دهی به منو پایان میابد و طرح ما به شکل زیر خواهد بود:

menu04

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

به این منظور خاصیت 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 ضمیمه شده به صورت درونی از جاوا اسکریپت برای شناسایی کلاس های کاذب استفاده می کند بنابراین در صورت غیر فعال بودن جاوا اسکریپت بر روی اینترنت اکسپلورر باز هم مشکل عدم نمایش زیر منو ها به وجود می آید.

تعداد آراء: 32 رای
یادداشت ها
Retina
1388/05/07 - 16:08:00
آقا دمت گرم! خیلی جالب بود!
هادی
1388/05/12 - 01:47:00
مرررررررررررررررررررررررررررررررررررسی :19
مهرداد
1388/06/02 - 01:56:00
با سلام و تشکر بابت این آموزش خوب‌تون نسخه‌ی 3 فایل htc هم در سایت طراحش موجوده. فقط دوتا لینک برای دانلودش هست. یکی packed و دیگری source. میشه راهنمایی بفرمایید کدوم رو باید به برچسب body اضافه کنم؟ (اینکه شما برای دانلود گذاشته‌اید نسخه‌ی 2 هست) این هم لینکش: http://www.xs4all.nl/~peterned/csshover.html ممنون
عماد:
سلام فکر می کنم نسخه packed فشرده شده ی اون source هست. چون من فرقی توی کارایی هیچ کدوم ندیدم. موفق باشید:08
75
1388/06/31 - 01:08:00
بابا دست درست :32 [B]خيلي با حالي[/B]
atiye
1388/08/13 - 21:30:00
salam ikhastam bedonam age man bekham ke in menu bejaye inke bala namayesh dade she samte raste safhe web namayesh dade she chi kar bayad kard ? mamnoon misham age shoma lotf konid va mano rahnamee konid mer30 bye . :25
عماد:
سلام، برای اینکار شما باید خاصیت float رو از li ها حذف کنی تا به صورت عمودی در بیان، بعد هم خصوصیات menu ul# رو باید تغییر بدید و زیر منو رو در جای مناسب موقعیت دهی کنید.
atiye
1388/08/16 - 20:18:00
SALAM EMAD JAN MAMNOON AZ RAHNAMAEETOON :26
SAEED
1388/08/16 - 20:50:00
سلام ببین عماد سوالی که برای عطیه پیش امده بود برای منم پیش امده ، من FLOAT را از LI ها را حذف کردم اما وقتی که روی منوی FONT END میرم زیر منو را باز می کند اما وقتی که می خواهم روی یکی از گزینه های آن بروم زیر منو پنهان میشه ، چی کار باید بکنم تا مشکل رفع شود ؟ :02
عماد:
سلام سرکار خانم/آقا، چه اصراری دارید با 2 نام مختلف کامت بزارید؟ و جالب تر اینکه با یکی تشکر می کنید و با یکی دیگه سوال قبل رو ادامه میدید :06 اما جواب سوال: شما زیر منو رو جوری موقعیت دهی کن تا مقداری از لبه های اون روی منوی اصلی اون بیفته، تا زمانی که موس می خواد روی زیر منو بره فضای خالی بینش ایجاد نشه. موفق باشید :08
سيد زين الدين نج
1388/08/17 - 08:10:00
آقا خيلي دمت گرمه موفق باشي لطفا آموزشاي بيشتري بزار
عماد:
انشالله کم کم :08
atiye
1388/08/21 - 07:43:00
salam emad fekr mikoni age bekham soali beporsam khejalatam mishe ke ba ye esme dige vasat pm bezaram age in karo karde basham vase khodam moteasefam:02 , begzarim ama soali ke mikham alan azat beporsam chera to ie beham mirize oo kar nemikone ?? vase rafe moshkel chi kar bayad kard ?? mamnoon age lotf koni oo rahnamaee koni bye
عماد:
سلام، والا اطلاعاتی که از شما ثبت شده با اطلاعات نام کاربری SAEED یکسان هست. به قول خودتون بگذریم، زیاد مهم نیست. در مورد سوالتون شما کدتون رو آپلود کنید تا ببینم مشکل چیه.
atiye
1388/08/21 - 07:48:00
rasti ta yadam narafte begam ke on filei ro ke to nokte payani gofte bodi ro ham zamime kardam , hala bayad chi kar konam, rasti gofte bodin ke momkene java script roye IE gheyre faal bashe , ino che jori mishe faal kard , mamnoon bye
عماد:
نیازی نیست کاری بکنید، وقتی فایل ضمیمه بشه اتوماتیک کلاسهای کاذب شناخته میشن. در مورد فعال کردن جاوا اسکریپت هم اینجا رو ببینید: http://www.activatejavascript.org/index.php?browser=ie
bahman
1388/08/23 - 15:42:00
mikham in menu ofoghi baz beshe chi kar bayad bokonam
عماد:
6 تا کامنت قبل از کامنت خودت رو بخون.
atiye
1388/08/23 - 20:43:00
SALAM KOJA BAYAD ONO UPLOAD KONAM TA BEBINID ? :02
عماد:
سلام، توی rapidshare.com خواهشا فارسی بنویسید یا حداقل اون caps lock رو خاموش بفرمایید :06 :08
ghasem
1388/09/01 - 04:29:00
اگه ممکنه سورس کامل برنامه را به آدرس الکترونیکی من ارسال کنید. با تشکر .موفق باشید.
yaser
1388/11/29 - 13:28:00
سلام من که با این کد ها نتونستم جواب بگیرم یعنی منو ساخته میشه اما با حرکت موس زیر منوها باز نمیشوند خواهش می کنم سورس کد را بگذارید مثل کاری که برای سیستم رتبه هی ستاره ای کردید ضمنا من میخوام منو عمودی داشته باشم که زیر منوهاش راست به چپ باز شوند . میشه راهنمایی کنید یا کدش را بدید؟ من برای شنبه صبح باید روی سایت اداره مون این کار رو انجام بدم. ممنون میشم کمک کنید توی این فرصت کم
عماد:
سلام، احتمالا یه جایی اشتباه کردی که زیر منو ها باز نمیشه. کد ها هم گذاشته شده(در قسمت نکته): http://www.irpcn.com/downloads/sample/menu.rar در مورد عمودی شدن هم کامنت 5 ام همین صفحه رو بخون :25
پریا
1388/12/05 - 13:37:00
سلام مرسی از آموزشتون ، من می خوام از منو و زیر منو در asp.net استفاده کنم آیا می تونم همین css رو داخل asp.net استفاده کنم خواهش می کنم کمکم کنید چون کارم خیلی گیره ، از چه دستوراتی برای ساخت منو و زیر منو استفاده کنم در asp.net چون می خوام پروژه مو با asp.net و html بنویسم :01 :01
عماد:
سلام، بله می تونید توی Asp.net هم استفاده کنید، البته خود asp.net هم یه کنترل منو داره، اما به هر حال برای استفاده از این منو بعد از کپی کد html اون توی صفحه، باید تگ های a بین li ها رو بسته به کاری که می خواید بکنید با کنترل مورد نظر جابجا کنید.
ناشناس
1388/12/09 - 16:34:00
با خیلی باهالی دمت قیژ :06
بهمن
1388/12/23 - 16:07:00
من هنوز با ie مشکل دارم حتی اون فایل htc هم جواب نداد راه دیگه ای نداره :02
عماد:
یعنی فایل htc رو ضمیمه کردی زیر منو ها باز نمیشه؟ احتمالا یه جایی اشتباه می کنی، فایل ضمیمه رو از انتهای مقاله دانلود کن و تست کن ببین مشکلی هست یا نه.
بهمن
1388/12/25 - 12:15:00
این کارو کردم عزیز بازم امتحان می کنم ولی راه دیگه ای هم هست بجز نوشتن جاوا؟
عماد:
سلام، نه متاسفانه راه دیگه ای برای ie وجود نداره، cache مرورگر رو هم پاک کن یه بار شاید از اون باشه.
سید مرتضی موسوی
1389/02/23 - 19:23:00
با سلام خدمت مدیریت/مسئول محترم سایت بسپار فعالیت خود را به منظور ارائه خدماتی نوین در خصوص تبیغات در اینترنت آغاز نموده است. امید است با راه اندازی این سایت، خدمتی موثر به شما فعالان عرصه اقتصاد محترم هموطن ارائه شود. درج تبلیغات در این سایت به مناسبت تقارن با آغاز سال جدید 1389 ، به مدت 2 ماه رایگان است برای ورود به درگاه تبلیغات تجاری ایرانیان، وارد لینک زیر شوید. http://www.bespar.ir سید مرتضی موسوی ========= www.bespar.ir ------------------ مرجع نیازمندیهای ایران
yalda
1389/03/04 - 06:50:00
agar bekhahim hamin code bala ro ba estefade az tage div jaye ul , li va hover benevisim che joooori mishe ? khaheshan code ro benevisid ? mamnooonam
عماد:
خوب برای این کار باید تغییراتی توی کد داده بشه که اینجا نمیشه همشو بنویسم. شما خودت سعی کن بنویسی و مشکلت رو بیا بپرس :08
یادداشت خود را ثبت کنید



کد امنیتی:    =
loader
در حال ارسال - چند لحظه صبر کنید...