آموزش ساخت یک منوی پایین افتادنی چندگانه

[elias.f]

تو این آموزش ساخت منوی پایین افتادنی یا آبشاری رو آموزش میدم
این منو چندگانه هم هست هر زیرمنویی که باز بشه ، میتونه شامل یک زیرمنوی دیگه هم باشه.

برای ساخت این منوها فقط کافیه که ایجاد لیست ها تو html و مخفی کردن و ظاهر کردن عناصر توسط css رو بدونین

ما آخر کار قراره به کجا برسیم؟
فایل زیر رو دانلود کنید و صفحه menu.html رو باز کنید تا نتیجه کار رو ببینید

http://www.ecg-pnum.com/forum/attachment.php?aid=156

مرحله اول ساخت یک صفحه html ساده است که لیست ما رو در برمیگیره
خود این لیست هم شامل چندتا زیر لیست میتونه باشه. برای ساده شدن موضوع یک لیست رستوران رو در نظر بگیرید !:دی
وقتی تصمیم میگیرید ازین منوها درست کنین، حتما با مفاهیم html آشنایی دارین. به خاطر همین هم زود ازین قسمت رد میشیم و زیاد توضیح نمیدم 
لیست ما قراره خودش چندتا زیر لیست رو در بر بگیره! برای ساختش هم از لیست های نامرتب(همونایی که شماره و عدد ندارن و کنارشون یه دایره (گردالوی سابق) هست استفاده میکنیم) 
اما لیست چی؟! ساده ترین لیستی رو که همه دیدن رو درست میکنیم لیست رستوران

برای ساختن این لیست فقط کافیه زیر لیست اصلی و زیر لیست هارو تشخیص بدیم.تموم

خب.حالا کار تمومه و شروع میکنیم برچسب های html رو قرار میدیم
اول > منوی اول

برای این لیست ها هم که همونطور که گفتم از لیست های نامرتب استفاده میکنیم.
تگ ul لیست رو تعریف میکنه و هرکدوم از li ها میشن یک گزینه از لیست. حالا کافیه هرکدوم ازین li ها رو دوباره با یه لیست دیگه پرکنیم تا لیست های تو در تو ایجاد کنیم.
نکته اول اینکه هر گزینه رو داخل برچسب لینک یا همون <a> قرار میدیم.این از ملزوماته
نکته دوم اینکه شما که کدهاتون رو مینویسید، کد هر قسمت رو که نوشتین در مرورگر تست کنین که بدونین تو هر قسمت به کجا میرسیم
دوم > قرار دادن منوی دوم و سوم
حالا منوی دوم و سوم رو در لابلای منوی اول قرار میدیم(زیر لیست دوم و سوم)

نکته: به تگ ul اول یک ID اضافه میکنیم که بعدا تو css راحت بتونیم تغییرات رو اعمال کنیم.
اسمش هم از اول کلمه navigation انتخاب کردیم(مکان یابی)
ساخت بدنه و چهارچوب منوی ما تموم شد. همش همین بود!
البته اگه فقط همین کد هارو تو یه صفحه بنویسید و ذخیره کنید به مشکل برمیخورید.
این کدها باید لابلای کدهای صفحه htnl قرار بگیره که فونت فارسی درست نشون داده بشه و بتونین صفحه css رو هم به این صفحه الحاق کنین.
پس زودتر یه صفحه css باز کنید و کدهای css زیر رو که میگم داخلش بنویسید. منو آمادست! ما فقط میخوایم بهش رنگ و لعاب بدیم و شکلش رو به دلخواه خودمون تنظیم کنیدم.
این منو میتونه هرجای دیگه ای هم استفاده بشه. فقط کافیه کدهای css رو دقیقا کپی – پیست کنید و
گزینه های منو رو هم با مواردی که دارین جایگزین کنید.
یعنی شما کافیه یه بار یه منو بسازید و یه جا برا خودتون داشته باشید و هرجا خواستید ازش استفاده کنید

[elias.f]

تو صفحه css کافیه هرکدوم از عناصر صفحه html رو انتخاب کنیم و بهش هر حالتی دوست داشتیم بدیم.
ما آی دی nav رو برای همین اضافه کریدم.اما اگه اضافه نمیکردیم چی میشد؟
اونموقع بعد ها که این منو رو تو صفحات دیگه به کار میبردید، تمام منوهای اون صفحه به هم میریخت.
برای همین هم ما به لیست اصلی یه آی دی میدیم که فقط تغییراتی که میدیم مختص همین منو باشه.
اولین کاری که میکنیم ، دایره های کنار گزینه هارو برمیداریم...
باید تمام لیست هامون رو برای اینکار انتخاب کنیم و بهش بگیم کنار گزینه هاشون دایره نزار!
میگیم #nav و #nav ul رو انتخاب کن و ....

کد:

#nav,#nav ul{
list-style-type:none;
}

چون لیستمون فارسیه جهت رو راست به چپ قرار میدیم

کد:

direction:rtl;

باید فاصله های بیرونی و درونی ، موقعیت و ارتفاع خطوط رو تنظیم کنیم.
شما این موارد رو خط به خط اضافه کنید و نتیجه رو در خروجی ببینید.بعضی از موارد الان هیچ تاثیری ندارن و فقط برای این اضافه میشن که بعدا که زیر لیست هارو مخفی و ظاهر میکنیم، چیزی به هم نریزه

کد:

#nav,#nav ul{
    direction:rtl;
    font-family:Tahoma;
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:1.5em;
}

حالا حالت لینک هامون رو مشخص میکنیم

کد:

#nav a:link, #nav a:active, #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#333;
}

#nav a:hover{
    background-color:#fff;
    color:#333;
}

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

کد:

#nav li{
    float:right;
}

خطوط زیر رو اضافه میکنیم تا هم زیر لیست هارو مخفی کنیم و هم وقتی مخفی میشن، اندازه گزینه هامون تغییر نکنه و سایز خودش رو داشته باشه:

کد:

#nav ul {
    position:absolute;
    width:12em;
    display:none;
}

اندازه و جهت چینش لینک ها رو مشخص میکنیم:

کد:

#nav li ul a{
    width:6em;
    float:right;
}
#nav li ul ul {
    right:6em;
    margin:0px 12px 0px 0px;
    }

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

کد:

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

[elias.f]

خب
شما الان یک منوی آبشاری چندگانه دارین.ولی میتونین با jquery یک رنگ و لعابی هم بهش ببخشین
فقط کافیه اول فایل jquery رو به صفحتون الحاق کنین و سپس کدهای زیر رو تو یه صفحه js بنویسین و این صفحه رو هم نیز بچسبونین به صفحتون

کد:

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
        },function(){
        $(this).find('ul:first').css({visibility: "hidden"});
        });
}

$(document).ready(function(){
    mainmenu();
});

[elias.f]

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

پ1- قبلا در دوره آموزشی تابستان ، ایجاد منو توسط تیم پشتیبانی قرار داده شده بود. این آموزش فقط جنبه تکمیلی داشت و دیگر اینکه منوی چندگانه مورد بررسی قرار گرفته بود.

پ2-لطفا هرجا رو که سوال داشتین یا مبهم بود رو بپرسین تا بیشتر توضیح بدم.

پ3- قسمت آخر که فایل jquery بود رو توضیح ندادم. چون مربوط به این آموزش نمیشد و فقط برای این بود که منو رو زیباتر کنه.
ولی باز هم اگه درخواست بدین، توضیح میدم.

پ4-کدهای css رو هم فعلا زیاد باز نکردم تا اگه ازین آموزش استقبال شد، بعدا توضیحات بیشتری رو اضافه کنم.

پ5-شما هم دست به کار بشین و یه مطلب کاربردی رو تو این تالار آموزش بدین.

[جوادیان]

سلام. ممنون بخاطر آموزشتون

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

1- hover در بعضی از نسخه های اینترنت اکسپلورر تنها بر روی تگ a اثر می گذارد و اگر بر روی بقیه تگ ها این سلکتور را قرار دهیم کار نمیکند . ولی میشه گفت اکثر مروگرها از a:hover پشتیبانی میکنند.

2- برای پیدا کردن اولین طبقه از فرزندان در تگ ها در css می توان از selector زیر استفاده کرد

E > F
که در اینجا F فرزند طبقه اول E است. در اینجا خیلی راحت می توان تنها اولین طبقه را با قرار گرفتن موس بر روی عنصر مرئی کرد.

البته بازم بعضی از نسخه های اینترنت اکسپلورر از این selector پشتیبانی نمی کنند . در این مواقع می توان از تابع children جی کوئری استفاده کرده که دقیقا همین کار را انجام می دهد. و میتوان از آن در این مواقع استفاده کرد. به همین طریق می توان از تابع hover در جی کوئری هنگامی که از این selector بر روی تگهایی مثل li پشتیبانی نمی شود استفاده کرد.

3- display:block بودن تگ a باعث میشود در بعضی مرورگر ها تگ a کل سطر را بگیرد و بخاطر این موضوع است که a را یک عنصر block level در نظر گرفته و با توجه به اینکه این عناصر کل سطر را میگیرند در صورتی که طولی برای آنها مشخص نشود کل سطر به تگ a اختصاص می یابد. برای جلوگیری از این موضوع می توان از display:inline-block استفاده کرد.

[nili]

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

[zafarimoqaddam]

میشه همین منو رو به صورت داینامیک هم آموزش بدین؟

[elias.f]

(12-11-2012 02:23 PM)zafarimoqaddam نوشته شده توسط:  میشه همین منو رو به صورت داینامیک هم آموزش بدین؟

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

اتفاقا تمام خوبی این آموزش اینه که بتونیم داینامیکش کنیم.
آموزشش رو یه چند روز دیگه قرار میدم.
فقط انصافا ببینین چقدر فعالیت کمه تو تالار. هر آموزشی نهایتا 5و6 نفر بازدید کننده داره. که یکیش تازه تیم پشتیبانی هست
شما خودتون باشین، انگیزه ای واسه 10 ساعت تایپ کردن دارین؟

ولی حتما میزارم آموزش ایجاد کلاس منوی پایین افتادنی(dropdown menu)

[تیم پشتیبانی]

(12-13-2012 02:30 AM)elias.f نوشته شده توسط:  
یه نفر پیدا شد اون سوالی رو که من میخواستم پرسید
بله

اتفاقا تمام خوبی این آموزش اینه که بتونیم داینامیکش کنیم.
آموزشش رو یه چند روز دیگه قرار میدم.
فقط انصافا ببینین چقدر فعالیت کمه تو تالار. هر آموزشی نهایتا 5و6 نفر بازدید کننده داره. که یکیش تازه تیم پشتیبانی هست
شما خودتون باشین، انگیزه ای واسه 10 ساعت تایپ کردن دارین؟

ولی حتما میزارم آموزش ایجاد کلاس منوی پایین افتادنی(dropdown menu)

چقدر این غرغر ها مشابه غرغرهای ماست!

[elias.f]

(12-13-2012 07:29 AM)تیم پشتیبانی نوشته شده توسط:  چقدر این غرغر ها مشابه غرغرهای ماست!

بلی، دقیقا