برای ایجاد منوهای زیرمنودار (منوهای پایین افتادنی) در صفحات وب، راه های مختلفی وجود دارد که هرکدام مزایا و معایب خاص خود را دارند. به طور کلی سه روش برای ایجاد منوهای زیرمنودار وجود دارد:

1. فلش
2. جاوا اسکریپت
3. سی اس اس

ابتدا اجازه بدید هرکدام از این روش ها را بررسی کنیم و ببینیم کدام روش اصولی تر و کاربردی تر می باشد.

1. فلش: لازمه ی استفاده از این روش در مرحله ی اول تسلط کافی بر فلش است و باید کار با فلش را بلد بود تا بتوان منوهای جالب ایجاد نمود. البته نرم افزارهایی مانند “123 flash menu” در این زمینه ارائه شده اند که منوهایی از پیش طراحی شده را در اختیار کاربر قرار میدهند و با استفاده از ابزارهایی که در خود گنجانده اند، امکان ویرایش منوها را به کاربر میدهند. یکی از معایبی که منوهای فلش دارند، ایندکس نشدن محتوای آن ها در موتورهای جستجوگر میباشد که البته اخیرا گوگل این مشکل را برطرف کرده و محتوای فایل های فلش اعم از همین منوها را نیز ایندکس می کند و این مورد تا حدودی مشکلات سئو را برطرف میکند.

2. جاوا اسکریپت: بگذارید یک چیزی را همینجا بگویم! اگر میخواهید منوهای سایتتان با جاوا اسکریپت باشد، تاکید می کنم که اگر می توانید، خودتان آن را کدنویسی کنید وگرنه از کدهای آماده بپرهیزید، چرا که اگر با مشکلی رو به رو شوید، هرگز نمیتوانید مشکلتان را برطرف کنید، مگر اینکه از کسی کمک بگیرید!

3. سی اس اس: در این بین، تنها منوهایی که با استفاده از سی اس اس ایجاد میشوند، از نظر سئو و ایندکس شدن کاملا بهینه و اصولی می باشند! چرا که محتوای این منوها در پرونده ی اکس اچ تی ام ال موجود است. و البته ایجاد و کدنویسی آن در مقایسه با فلش و جاوا اسکریپت، به نسبت راحت تر می باشد. اما خب مشکل دیگری که سر راه مان قرار می گیرد، عدم پشتیبانی مرورگری مثل IE (نسخه ی 6 به پایین) از این روش است! در ادامه توضیحات بیشتری در این زمینه می دهم و البته راه حل این مشکل را هم به زودی و در مقاله ای جداگانه منتشر خواهم کرد!

چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

منوی طرا�ی شده با سی اس اس

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

پشتیبانی از این روش
همون طور که در ابتدا هم گفتم، این روش در نسخه ها ی 6 و پایین تر ِ مرورگر IE پشتیبانی نمی شود و کار نمی کند! دلیلش هم روشن است. ما برای این کار از خاصیت hover استفاده کرده ایم که این نسخه ها از مرورگر IE (یعنی نسخه های 6 به پایین) خاصیت hover را فقط برای لینک ها می شناسند و برایشان جای تعجب دارد که بخواهید با استفاده از خاصیت hover، مثلا متنی را ظاهر و یا مخفی کنید! اما از IE7 به بعد این مشکل رفع شده و این منویی که ایجاد کردیم به درستی کار خواهد کرد. سعی می کنم به زودی مقاله ای را در این رابطه منتشر کنم و در آن به حل این مشکل پردازم. یعنی این منو بتواند در IE6 و حتی پایین تر هم کار کند!

کمک ها
اگر انجام مراحل بالا برایتان مشکل است، می توانید فایل اکس اچ تی ام ال و سی اس اس آماده ی این منو را از اینجا دریافت نمایید.
برای دیدن دموی این منو نیز به این صفحه مراجعه فرمایید.

دیدگاه‌ها (30)

  • خیلی عالی بود علیرضا … بازم از این خفنا در بده … :D

    پاسخ

  • ممنون و عالی

    پاسخ

  • سلام علیکم
    حاجی ، میشه در مورد اجرا رو local هم توضیحاتی بدی ;)

    پاسخ

  • ممنون ، خیلی با حاله
    یه سوال ؟ می شه برای زیر منوهام ، باز زیر منو گذاشت با این روش ؟ بازم مرسی

    پاسخ

  • 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

    پاسخ

  • سلام دوست من
    ممنون از آموزشت
    ولي مشكلي كه من هميشه با اين روش كه توضيح دادي اينه كه تو IE7 ‌زير منو ها به جاي اينكه دقيقا زير منو باز بشن ميرن جلوتر ولي تو فايرفاكس درسته.توي لينك دمويي كه دادي كاملا اين مشكل مشخصه. آيا راهي براي حل اين مشكل هست؟

    پاسخ

  • خیلی عالی بود. ممنون

    پاسخ

  • @ کاوه گیــــــلانی (لابدان)
    حتما… ولی اجرای چی روی لوکال؟!

    @ pe pe
    بله میشه. البته یکم تفاوت داره. من فراموش کردم این مورد رو هم در این مقاله بیارم. ممنون از لطفتون ;)

    @ محمد حسین خدابخش
    نه متاسفانه… من دات نت رو خیلی زود رها کردم… :)

    @ hamid
    سلام… درسته، این مشکل وجود داره! راه حل هم داره. در سری مقالاتی که در مورد رفع مشکلات سی اس اس می نویسم، به این مشکل می پردازم و راه حلش رو توضیح می دم ;)

    پاسخ

  • سلام دوست محترم و با مرام

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

    راستی من شما را با نام خاطرات یک برنامه نویس لینک کرده و از این بابت بسیار خوشحالم
    شما هم لطفی کرده قدم رنجه فرموده و سری به سایت ما بزنید و اگه دوست داشتید ما را با نام فیلم و سریال لینک کنید

    پاسخ

  • سلام دوست عزیز .
    میدونی “سورن” چیه یا کیه ؟؟؟؟
    اولین و بهترین وب سایت عکس ایرانیان راه اندازی شد .
    بدون نیاز به عضویت .
    استفاده کاملا” رایگان .
    با یک عالمه عکس های دیدنی با کیفیت بالا .
    تمامی عکس ها در سایز واقعی هستند .
    سایت به سرعت در حال آپدیت میباشد .
    منتظر پیشنهادات و انتقادهای شما دوست عزیز هستیم .
    با آرزوی موفقیت …
    گروه طرفداران http://www.SorenPhoto.com

    پاسخ

  • متاسفانه بدلیل بی شعور بودن آی ای (IE)، این مرورگر li:hover را متوجه نشده و به همین دلیل این برنامه در این مرورگر اجرا نمیشود. [گریه]
    آخه چرا این آی ای اینقدر بی شعوره
    همیشه باید یه ضد حالی بزنه دیگه خلاصه… نمیشه

    پاسخ

  • ممنون، عالي بود. مثل هميشه دارم IE6 رو نفرين ميكنم.

    پاسخ

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

    پاسخ

  • با اجازه نسخه Vertical این منو رو درست کردم که میتونید از لینک زیر دانلود کنید :
    http://aloche.ir/uploads/css-menu-vertical.zip
    یاحق…

    پاسخ

  • لذت بردیم … ممنون

    پاسخ

  • @ آرمین
    سلام… بامرامی از شماست ;)
    بله میشه… در جواب به یکی از دوستان هم گفتم، برای اینکه بخوایم یه ساختار درختی درست کنیم، کمی قضیه تغییر میکنه که اون رو هم به زودی آموزش میدم…
    بینهایت ممنون از لطفتون… بنده هم انجام وظیفه کردم :)

    @ آلوچه
    IE6 به پایین این مشکل رو دارن که راه حل داره… مقاله ی بعدی ای که منتشر می کنم، در همین زمینه هست…
    ما هم میتونیم به IE ضد حال بزنیم :دی

    @ مسلم
    نکن این کار رو برادر :دی
    این مشکل قابل حل شدن هست…

    @ رضا
    دست شما درد نکنه… من به همشهریم تیکه بندازم؟! جدی بود داداش من ;)
    شما هم همیشه سرزنده باشی…

    @ آلوچه
    خیلی لطف کردید… اگر اجازه بدید، لینک دانلود این منو رو هم به مطلب اضافه کنم…

    پاسخ

  • به علیرضا : خواهش میکنم. اگه میخواید تو مطلب بذارید لینک رو بذارید.
    یاحق

    پاسخ

  • با سلام؛ از این مطلب شما خیلی تشکر می کنم واقعا خیلی به من کمک کرد. البته من خیلی کم اطلاعاتی داشتم اما توانستم با خواندن این مطلب خیلی چیز های جدید یاد بگیرم.

    پاسخ

  • @ آلوچه
    قرار دادم…

    @ erfan taheri
    خیلی خوشحالم از این بابت… ;)

    پاسخ

  • آموزش جالبی بود.

    روی IE8 هم همین مشکل رو داره. زیر منو ها جابجا نشون میده.

    موفق باشید

    پاسخ

  • سلام و خسته نباشی . سایت خیلی جالبی داری مطالب مفیدی هم قرار دادی.

    یه سوال گرافیکی . تو این عکسی که بره منو ها گذاشتی دقت کردم متوجه شدم بک گراند منوها بصورت راه راه هست . مدتیه دنبال اینم که چطور چنین بک گراندایی درست کنم.

    در صورت امکان راهنمایی کنید.

    تشکر.

    پاسخ

  • benamekhoda
    salam man nemidunam chetori file word ya powerpoint be weblagam ezafekonam
    hosainmehr.blogfa.com

    پاسخ

  • اون لینک آلوچه خراب شده انگار!
    تصحیح بفرمایید!

    پاسخ

  • ضمنن توضیح برای کار کردن این کدها در آی‌ای 6 رو هم بگو!
    بدون اون این کدها فایده نداره!

    پاسخ

  • با عرض خسته نباشيد خدمت شما:
    من مي خواستم همين منوييي كه ساختي كه هم واسه س اس اس و اچ تي ام ال ميشه،بالايي رو مي گم،همون زير منو دار،چند ايتم ديگه مثلا بيو گرافي اخبار و اين جور چيز ها رو اضافه كرد

    پاسخ

  • مطلب مفیدی بود ولی این بزودی واسه مشکل با اینترنت اکسپلورر کی میرسه تا مطلب کامل شه؟

    پاسخ

  • ممنون از مطلبت .
    لینک های دانلودت هم یه چکی بکن .
    چندین تا مطلبت رو خوندم و لذت بردم . ممنون

    پاسخ

  • آقا لینک دانلود خرابه.
    لطفا لینک جدید بذارین.

    پاسخ

  • سلام و خسته نباشید خدمت شما
    مطلب بسیار عالی بود. اگر برایتان ممکن هست بنویسید که چطور می توان این روش را در IE پیاده سازی کرد. اگر منبع انگلیسی دارید لطف میکنید برای من بفرستید.

    ممنون.

    پاسخ

دیدگاه خود را ارسال کنید


می‌توانید از برخی کدهای HTML استفاده نمایید:


<a> <b> <blockquote> <i> <em> <code> <strong>