برای ایجاد منوهای زیرمنودار (منوهای پایین افتادنی) در صفحات وب، راه های مختلفی وجود دارد که هرکدام مزایا و معایب خاص خود را دارند. به طور کلی سه روش برای ایجاد منوهای زیرمنودار وجود دارد:
۱٫ فلش
۲٫ جاوا اسکریپت
۳٫ سی اس اس
ابتدا اجازه بدید هرکدام از این روش ها را بررسی کنیم و ببینیم کدام روش اصولی تر و کاربردی تر می باشد.
۱٫ فلش: لازمه ی استفاده از این روش در مرحله ی اول تسلط کافی بر فلش است و باید کار با فلش را بلد بود تا بتوان منوهای جالب ایجاد نمود. البته نرم افزارهایی مانند “۱۲۳ flash menu” در این زمینه ارائه شده اند که منوهایی از پیش طراحی شده را در اختیار کاربر قرار میدهند و با استفاده از ابزارهایی که در خود گنجانده اند، امکان ویرایش منوها را به کاربر میدهند. یکی از معایبی که منوهای فلش دارند، ایندکس نشدن محتوای آن ها در موتورهای جستجوگر میباشد که البته اخیرا گوگل این مشکل را برطرف کرده و محتوای فایل های فلش اعم از همین منوها را نیز ایندکس می کند و این مورد تا حدودی مشکلات سئو را برطرف میکند.
۲٫ جاوا اسکریپت: بگذارید یک چیزی را همینجا بگویم! اگر میخواهید منوهای سایتتان با جاوا اسکریپت باشد، تاکید می کنم که اگر می توانید، خودتان آن را کدنویسی کنید وگرنه از کدهای آماده بپرهیزید، چرا که اگر با مشکلی رو به رو شوید، هرگز نمیتوانید مشکلتان را برطرف کنید، مگر اینکه از کسی کمک بگیرید!
۳٫ سی اس اس: در این بین، تنها منوهایی که با استفاده از سی اس اس ایجاد میشوند، از نظر سئو و ایندکس شدن کاملا بهینه و اصولی می باشند! چرا که محتوای این منوها در پرونده ی اکس اچ تی ام ال موجود است. و البته ایجاد و کدنویسی آن در مقایسه با فلش و جاوا اسکریپت، به نسبت راحت تر می باشد. اما خب مشکل دیگری که سر راه مان قرار می گیرد، عدم پشتیبانی مرورگری مثل IE (نسخه ی ۶ به پایین) از این روش است! در ادامه توضیحات بیشتری در این زمینه می دهم و البته راه حل این مشکل را هم به زودی و در مقاله ای جداگانه منتشر خواهم کرد!
چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

خب، چیزهایی که لازم داریم، اینها هستند: یک فایل سی اس اس، یک فایل اکس اچ تی ام ال و یک ویرایشگر متن، مثلا نوت پد ویندوز.
برای ساختن فایل سی اس اس، می توانید یک فایل متنی ایجاد کنید و پسوند آن را به css تغییر دهید و ترجیحا نام فایل را style بگذارید. یعنی در نهایت بشود:
style.css
ساختید فایل رو؟! خب، حالا بریم سراغ کدنویسی…
فایل سی اس اسی رو که ساختید، با کمک یک برنامه ی ویرایشگر متن، باز کنید.
ما باید با کمک لیست ها این منو را طراحی کنیم. فقط کافیست کمی با تگ های ul و li، بازی کنیم. پس در ابتدا یک سلکتور با نام nav می نویسیم و پدینگ و مارجین ِش رو صفر میکنیم و به list-styleش هم مقدار none می دیم:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
حالا یک اینتر بزنید و برید خط بعدی… اینبار باید به تگ li ای که در nav قرار می گیرد، دستورات زیر را بدهیم:
#nav li {
float: right;
position: relative;
width: 90px;
height: 20px;
background-color: #f6f6f6;
color: #f75801;
font: bold 70% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
direction: rtl;
border: 1px solid #e1e1e1;
text-align: center;
padding-top: 5px;
}
به خاصیت float مقدار right دادیم، چون می خواهیم منو در قسمت راست صفحه و به صورت شناور قرار بگیره.
دوباره اینتر بزنید و برید خط پایین. این دستوری که می خواهیم بنویسیم، برای این هست که وقتی کرسر موس رفت روی عناوین منو، رنگ زمینه اش تغییر کند:
#nav li:hover {
background-color: #f1ff96;
}
باز هم اینتر بزنید. دستورات زیر هم وضعیت ظاهری لینک ها را تعیین می کنند:
#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
color: #868584;
}
#nav a:hover, #nav a:active {
display: block;
text-decoration: none;
color: #f75801;
}
اینتر لطفا! قسمت مهم اینجاست. باید محتوای منو (یعنی همان زیرمنو) را مخفی نگه داریم تا زمانی که کرسر موس رفت روی عناوین منو:
#nav ul {
display: none;
position: absolute;
padding-top: 7px;
}
خاصیت display که با none مقداردهی شده، درواقع دستور میدهد که قسمت زیر منو، مخفی و غیر قابل نمایش بماند!
اینتر بزنید باز هم! خب، حالا باید کمی ظاهر زیرمنو را سبک دهی کنیم. به زمینه و حاشیه اش رنگی بدهیم و موقعیتش را جمع و جور کنیم:
#nav ul li {
float: none;
border: 1px solid #dded6f;
background-color: #f1ff96;
font-size: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
}
اینتر فراموش نشه! باز هم با دستور زیر، رنگ زمینه ی گزینه های زیر منو ها را در زمان حرکت کرسر موس روی آن ها، تعیین می کنیم:
#nav ul li:hover {
background-color: #f9ffcf;
}
آخرین اینتر را بزنید که می خواهیم یک کار قشنگ بکنیم:) یادتان که هست چند خط بالاتر، دستور مخفی کردن زیرمنوها را دادیم؟! حالا باید دستور بدهیم که هر زمان کرسر موس روی یکی از عناوین منو رفت، بی چون و چرا زیرمنوی آن نمایش یابد! فقط کافیست بگوییم:
#nav li:hover ul {
display: block;
}
زیبا نیست؟! خب، فایل سی اس اس تان تکمیل شد. حالا برویم سراغ فایل اکس اچ تی ام ال! خسته که نشدید خدای ناکرده؟!
فایل اکس اچ تی ام ال را بسازید. برای ساختن آن مانند ساختن فایل سی اس اس عمل کنید و نام فایل را بگذارید menu. یعنی باید بشود:
menu.htm یا menu.html
خب. اول کدهای مربوط به هدر را می نویسیم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>creating menus with CSS | Demo!</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
حالا تگ بدنه رو باز می کنیم و لیست مورد نظر رو ایجاد می کنیم و سلکتور nav رو بهش نسبت می دهیم و بعد از اون، عناوین و زیرمنوها رو اضافه می کنیم:
<body> <ul id="nav"> <li><a href="#">رنگ ها</a> <ul> <li><a href="#">آبی</a></li> <li><a href="#">سبز</a></li> <li><a href="#">نارنجی</a></li> </ul> </li> <li><a href="#">آموزش ها</a> <ul> <li><a href="#">سی اس اس</a></li> <li><a href="#">پی اچ پی</a></li> <li><a href="#">جی کوئری</a></li> </ul> </li> </ul> </body></p>
واضح هست دیگه؟! در اینجا ما یک منو، دو عنوان به نام های “رنگ” و “آموزش ها” و برای هر عنوان، سه زیرمنو داریم. در آخر هم تگ html را ببندید!
پشتیبانی از این روش
همون طور که در ابتدا هم گفتم، این روش در نسخه ها ی ۶ و پایین تر ِ مرورگر IE پشتیبانی نمی شود و کار نمی کند! دلیلش هم روشن است. ما برای این کار از خاصیت hover استفاده کرده ایم که این نسخه ها از مرورگر IE (یعنی نسخه های ۶ به پایین) خاصیت hover را فقط برای لینک ها می شناسند و برایشان جای تعجب دارد که بخواهید با استفاده از خاصیت hover، مثلا متنی را ظاهر و یا مخفی کنید! اما از IE7 به بعد این مشکل رفع شده و این منویی که ایجاد کردیم به درستی کار خواهد کرد. سعی می کنم به زودی مقاله ای را در این رابطه منتشر کنم و در آن به حل این مشکل پردازم. یعنی این منو بتواند در IE6 و حتی پایین تر هم کار کند!
کمک ها
اگر انجام مراحل بالا برایتان مشکل است، می توانید فایل اکس اچ تی ام ال و سی اس اس آماده ی این منو را از اینجا دریافت نمایید.
برای دیدن دموی این منو نیز به این صفحه مراجعه فرمایید.








DANG3R
در ۸۷/۰۷/۱۷ گفت:خیلی عالی بود علیرضا … بازم از این خفنا در بده … :D
پاسخ
25mordad
در ۸۷/۰۷/۱۸ گفت:ممنون و عالی
پاسخ
کاوه گیــــــلانی (لابدان)
در ۸۷/۰۷/۱۸ گفت:سلام علیکم
حاجی ، میشه در مورد اجرا رو local هم توضیحاتی بدی ;)
پاسخ
pe pe
در ۸۷/۰۷/۱۸ گفت:ممنون ، خیلی با حاله
یه سوال ؟ می شه برای زیر منوهام ، باز زیر منو گذاشت با این روش ؟ بازم مرسی
پاسخ
محمد حسین خدابخش
در ۸۷/۰۷/۱۸ گفت:salam
ye komak mikhastam
age dar .net ham sar reshteiy darid mikhstam beporsam shoma dar .net code exif reader soragh nadrid
ghablan az komaketon mamnon
پاسخ
hamid
در ۸۷/۰۷/۱۸ گفت:سلام دوست من
ممنون از آموزشت
ولی مشکلی که من همیشه با این روش که توضیح دادی اینه که تو IE7 زیر منو ها به جای اینکه دقیقا زیر منو باز بشن میرن جلوتر ولی تو فایرفاکس درسته.توی لینک دمویی که دادی کاملا این مشکل مشخصه. آیا راهی برای حل این مشکل هست؟
پاسخ
هومن
در ۸۷/۰۷/۱۸ گفت:خیلی عالی بود. ممنون
پاسخ
علیرضا
در ۸۷/۰۷/۱۸ گفت:@ کاوه گیــــــلانی (لابدان)
حتما… ولی اجرای چی روی لوکال؟!
@ pe pe
بله میشه. البته یکم تفاوت داره. من فراموش کردم این مورد رو هم در این مقاله بیارم. ممنون از لطفتون ;)
@ محمد حسین خدابخش
نه متاسفانه… من دات نت رو خیلی زود رها کردم… :)
@ hamid
سلام… درسته، این مشکل وجود داره! راه حل هم داره. در سری مقالاتی که در مورد رفع مشکلات سی اس اس می نویسم، به این مشکل می پردازم و راه حلش رو توضیح می دم ;)
پاسخ
آرمین
در ۸۷/۰۷/۱۸ گفت:سلام دوست محترم و با مرام
با این دستوراتی که دادید میشه بی نهایت زیر منوی درختی نامحدود ایجاد کرد ؟
راستی من شما را با نام خاطرات یک برنامه نویس لینک کرده و از این بابت بسیار خوشحالم
شما هم لطفی کرده قدم رنجه فرموده و سری به سایت ما بزنید و اگه دوست داشتید ما را با نام فیلم و سریال لینک کنید
پاسخ
www.sorenphoto.com
در ۸۷/۰۷/۱۸ گفت:سلام دوست عزیز .
میدونی “سورن” چیه یا کیه ؟؟؟؟
اولین و بهترین وب سایت عکس ایرانیان راه اندازی شد .
بدون نیاز به عضویت .
استفاده کاملا” رایگان .
با یک عالمه عکس های دیدنی با کیفیت بالا .
تمامی عکس ها در سایز واقعی هستند .
سایت به سرعت در حال آپدیت میباشد .
منتظر پیشنهادات و انتقادهای شما دوست عزیز هستیم .
با آرزوی موفقیت …
گروه طرفداران http://www.SorenPhoto.com
پاسخ
آلوچه
در ۸۷/۰۷/۱۸ گفت:متاسفانه بدلیل بی شعور بودن آی ای (IE)، این مرورگر li:hover را متوجه نشده و به همین دلیل این برنامه در این مرورگر اجرا نمیشود. [گریه]
آخه چرا این آی ای اینقدر بی شعوره
همیشه باید یه ضد حالی بزنه دیگه خلاصه… نمیشه
پاسخ
مسلم
در ۸۷/۰۷/۱۸ گفت:ممنون، عالی بود. مثل همیشه دارم IE6 رو نفرین میکنم.
پاسخ
رضا
در ۸۷/۰۷/۱۹ گفت:سلام همشهری جوابت تیکه بود یا نه جدی گفتی؟ به هرحال خوشحالم یه دوست خوب و جدیدی مثل تو پیدا کردم موفق باشی.
همیشه شاد و سبز باشی .
پاسخ
آلوچه
در ۸۷/۰۷/۱۹ گفت:با اجازه نسخه Vertical این منو رو درست کردم که میتونید از لینک زیر دانلود کنید :
http://aloche.ir/uploads/css-menu-vertical.zip
یاحق…
پاسخ
فرزاد
در ۸۷/۰۷/۱۹ گفت:لذت بردیم … ممنون
پاسخ
علیرضا
در ۸۷/۰۷/۱۹ گفت:@ آرمین
سلام… بامرامی از شماست ;)
بله میشه… در جواب به یکی از دوستان هم گفتم، برای اینکه بخوایم یه ساختار درختی درست کنیم، کمی قضیه تغییر میکنه که اون رو هم به زودی آموزش میدم…
بینهایت ممنون از لطفتون… بنده هم انجام وظیفه کردم :)
@ آلوچه
IE6 به پایین این مشکل رو دارن که راه حل داره… مقاله ی بعدی ای که منتشر می کنم، در همین زمینه هست…
ما هم میتونیم به IE ضد حال بزنیم :دی
@ مسلم
نکن این کار رو برادر :دی
این مشکل قابل حل شدن هست…
@ رضا
دست شما درد نکنه… من به همشهریم تیکه بندازم؟! جدی بود داداش من ;)
شما هم همیشه سرزنده باشی…
@ آلوچه
خیلی لطف کردید… اگر اجازه بدید، لینک دانلود این منو رو هم به مطلب اضافه کنم…
پاسخ
آلوچه
در ۸۷/۰۷/۱۹ گفت:به علیرضا : خواهش میکنم. اگه میخواید تو مطلب بذارید لینک رو بذارید.
یاحق
پاسخ
erfan taheri
در ۸۷/۰۷/۱۹ گفت:با سلام؛ از این مطلب شما خیلی تشکر می کنم واقعا خیلی به من کمک کرد. البته من خیلی کم اطلاعاتی داشتم اما توانستم با خواندن این مطلب خیلی چیز های جدید یاد بگیرم.
پاسخ
علیرضا
در ۸۷/۰۷/۱۹ گفت:@ آلوچه
قرار دادم…
@ erfan taheri
خیلی خوشحالم از این بابت… ;)
پاسخ
logat
در ۸۷/۰۷/۲۴ گفت:آموزش جالبی بود.
روی IE8 هم همین مشکل رو داره. زیر منو ها جابجا نشون میده.
موفق باشید
پاسخ
مجید
در ۸۷/۰۹/۱۸ گفت:سلام و خسته نباشی . سایت خیلی جالبی داری مطالب مفیدی هم قرار دادی.
یه سوال گرافیکی . تو این عکسی که بره منو ها گذاشتی دقت کردم متوجه شدم بک گراند منوها بصورت راه راه هست . مدتیه دنبال اینم که چطور چنین بک گراندایی درست کنم.
در صورت امکان راهنمایی کنید.
تشکر.
پاسخ
hosain
در ۸۷/۱۰/۰۳ گفت:benamekhoda
salam man nemidunam chetori file word ya powerpoint be weblagam ezafekonam
hosainmehr.blogfa.com
پاسخ
محمد
در ۸۷/۱۰/۰۸ گفت:اون لینک آلوچه خراب شده انگار!
تصحیح بفرمایید!
پاسخ
محمد
در ۸۷/۱۰/۰۸ گفت:ضمنن توضیح برای کار کردن این کدها در آیای ۶ رو هم بگو!
بدون اون این کدها فایده نداره!
پاسخ
آوات
در ۸۷/۱۰/۱۱ گفت:با عرض خسته نباشید خدمت شما:
من می خواستم همین منوییی که ساختی که هم واسه س اس اس و اچ تی ام ال میشه،بالایی رو می گم،همون زیر منو دار،چند ایتم دیگه مثلا بیو گرافی اخبار و این جور چیز ها رو اضافه کرد
پاسخ
AHHP
در ۸۸/۰۱/۰۴ گفت:مطلب مفیدی بود ولی این بزودی واسه مشکل با اینترنت اکسپلورر کی میرسه تا مطلب کامل شه؟
پاسخ
محسن منوریان
در ۸۸/۰۴/۱۸ گفت:ممنون از مطلبت .
لینک های دانلودت هم یه چکی بکن .
چندین تا مطلبت رو خوندم و لذت بردم . ممنون
پاسخ
davood
در ۸۸/۱۰/۱۴ گفت:آقا لینک دانلود خرابه.
لطفا لینک جدید بذارین.
پاسخ
sajjad
در ۸۹/۰۴/۱۷ گفت:سلام و خسته نباشید خدمت شما
مطلب بسیار عالی بود. اگر برایتان ممکن هست بنویسید که چطور می توان این روش را در IE پیاده سازی کرد. اگر منبع انگلیسی دارید لطف میکنید برای من بفرستید.
ممنون.
پاسخ
AREF
در ۸۹/۰۶/۳۰ گفت:من دارم دیوونه می شم یه ۳ ماه پیش این مطلب رو ذخیره کرده بودم و می خواستم بعد اجراش کنم و الان ۲ ماه اینرتنتم قطع و روز شماری می کردم تا بیام این نکته رو بهتون بگم { چطوری می تونم این منو رو بیارم وسط} جان هر کی دوست داری جواب بده چونکه دارم دیوونه می شم!!!
چرا کامل توضیح نمی دی؟ شما همون اول باید توضیح می دادین که من چطوری این منو رو بیارم وسط
خیلی اعصابم خورده
پاسخ
علیها
در شهریور ۳۰م, ۱۳۸۹تند نرو رفیق، قرار نیست من همهچیز رو توضیح بدم؛ برای قراردادن این منو در وسط، این رو به سیاساست اضافه کن:
* {margin: 0; padding: 0;} #nav {width: 600px; margin: 0 auto;}اندازهی عرض رو به دلخواه می تونی تغییر بدی.
پاسخ
AREF
در ۸۹/۰۶/۳۰ گفت:دستت درد نکنه…
حالا ما یه چیزی گفتیم چرا ترش می کنی؟ انتقاد هم نکنیم؟
پاسخ
manson
در ۸۹/۱۲/۱۳ گفت:آقا الان که همه با جی کوئری حال میکنن چرل از منوهای حرفه ای که کراس بروزر هم هست استفاده نکنیم؟ البته که خب بحث شما سی اس اس هستش.
پاسخ
AREF
در ۸۹/۱۲/۲۶ گفت:من هنوز سر اون مسئله گیر کردم هر کاری می کنم منو نمیاد وسط!
پاسخ
مجتبی درویشی
در ۹۰/۰۱/۰۸ گفت:سلام فوق العاده عالی بود ! توی مقاله بعدی یه کم جی کوئری هم باهاش قاطی کن که دیگه محشر بشه … :)
پاسخ
مهران
در ۹۰/۰۴/۰۱ گفت:عکس ها نمیاد :(
پاسخ
می
در ۹۰/۰۶/۲۱ گفت:nazari nadaram!!!
پاسخ
امید
در ۹۰/۰۷/۲۴ گفت:سلام
از آموزش خیلی خوبتان بسیار متشکرم
گل کاشتی
پاسخ
محسن
در ۹۰/۰۸/۲۰ گفت:سلام.
یه سوال داشتم.
در فایل CSS همون ابتدا چرا المنت ul رو یک بار با آی-دی و یکبار هم به صورت ترکیبی( با آی-دی و خود المنت) انتخاب کردین؟
nav, #nav ul# که هر دو یک المنت رو انتخاب میکنه.
دلیل خاصی داره؟
پاسخ
mohammad
در ۹۰/۱۲/۲۴ گفت:ممنون جالب بود
پاسخ
majid
در ۹۱/۰۱/۰۹ گفت:یه پست در مورد ایجاد منو های زیر منو دار و برطرف کردن ایرادش در مرورگر آی یی ارسال کنید شما خودتان در همین پست گفتید که بعدا یه مقاله در این مورد می نویسم اگه میشه این کار رو انجام بدید دیگه موفق باشید.
پاسخ