ارسال پاسخ 
 
امتیاز موضوع:
  • 2 رأی - میانگین امیتازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ساخت یک منوی پایین افتادنی چندگانه
12-09-2012, 06:53 AM (آخرین ویرایش در این ارسال: 12-09-2012 08:55 AM، توسط elias.f.)
ارسال: #1
Star آموزش ساخت یک منوی پایین افتادنی چندگانه
0
0
تو این آموزش ساخت منوی پایین افتادنی یا آبشاری رو آموزش میدم
این منو چندگانه هم هستموفق هر زیرمنویی که باز بشه ، میتونه شامل یک زیرمنوی دیگه هم باشه.

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

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

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

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


[تصویر:  attachment.php?aid=157]
برای ساختن این لیست فقط کافیه زیر لیست اصلی و زیر لیست هارو تشخیص بدیم.تمومهنگ کردن

[تصویر:  attachment.php?aid=158]
خب.حالا کار تمومه و شروع میکنیم برچسب های html رو قرار میدیم
اول > منوی اول
[تصویر:  attachment.php?aid=159]
برای این لیست ها هم که همونطور که گفتم از لیست های نامرتب استفاده میکنیم.
تگ ul لیست رو تعریف میکنه و هرکدوم از li ها میشن یک گزینه از لیست. حالا کافیه هرکدوم ازین li ها رو دوباره با یه لیست دیگه پرکنیم تا لیست های تو در تو ایجاد کنیم.
نکته اول اینکه هر گزینه رو داخل برچسب لینک یا همون <a> قرار میدیم.این از ملزوماته اوا
نکته دوم اینکه شما که کدهاتون رو مینویسید، کد هر قسمت رو که نوشتین در مرورگر تست کنین که بدونین تو هر قسمت به کجا میرسیمبرنامه نویس
دوم > قرار دادن منوی دوم و سوم
حالا منوی دوم و سوم رو در لابلای منوی اول قرار میدیم(زیر لیست دوم و سوم)

[تصویر:  attachment.php?aid=160]

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


فایل‌(های) پیوست شده بندانگشتی (ها)
               

.rar  menu.rar (اندازه: 16.58 KB / تعداد دفعات دریافت: 42)
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط جوادیان ، چهره نما ، zafarimoqaddam ، nili ، Mshow ، تیم پشتیبانی ، r.ataie ، a_n ، Eb7f
12-09-2012, 06:55 AM (آخرین ویرایش در این ارسال: 12-09-2012 09:09 AM، توسط elias.f.)
ارسال: #2
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه(کدهای css)
0
0
تو صفحه 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;
    }
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط جوادیان ، چهره نما ، zafarimoqaddam ، nili ، Mshow ، تیم پشتیبانی ، mim_golden ، r.ataie ، a_n ، Eb7f
12-09-2012, 06:56 AM (آخرین ویرایش در این ارسال: 12-09-2012 09:09 AM، توسط elias.f.)
ارسال: #3
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه(jquery)
0
0
خبBlush
شما الان یک منوی آبشاری چندگانه دارین.ولی میتونین با jquery یک رنگ و لعابی هم بهش ببخشینموفق
فقط کافیه اول فایل jquery رو به صفحتون الحاق کنین و سپس کدهای زیر رو تو یه صفحه js بنویسین و این صفحه رو هم نیز بچسبونین به صفحتونBig Grin
کد:
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();
});
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط جوادیان ، چهره نما ، mirmoloukan ، nili ، Mshow ، تیم پشتیبانی ، r.ataie ، a_n ، Eb7f
12-09-2012, 09:16 AM
ارسال: #4
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
0
0
این آموزش ایرادات زیادی ممکنه داشته باشه.
هرجا که مشکلی بود لطفا بگین تا اصلاح کنمBlush

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

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

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

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

پ5-شما هم دست به کار بشین و یه مطلب کاربردی رو تو این تالار آموزش بدین.عصبانی
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط جوادیان ، varchar ، چهره نما ، zafarimoqaddam ، nili ، Mshow ، تیم پشتیبانی ، jahani ، r.ataie ، a_n
12-09-2012, 05:25 PM (آخرین ویرایش در این ارسال: 12-09-2012 05:26 PM، توسط جوادیان.)
ارسال: #5
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
0
0
سلام. ممنون بخاطر آموزشتونتشکرتشکر

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

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 استفاده کرد.

تشکر
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط چهره نما ، elias.f ، zafarimoqaddam ، nili ، Mshow ، تیم پشتیبانی ، r.ataie ، a_n
12-11-2012, 02:27 AM
ارسال: #6
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
0
0
با سلام
از آموزش عالیتون واقعا سپاسگزارم.واقعا خیلی کمکم کرد.بازم ممنون
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط elias.f ، تیم پشتیبانی ، r.ataie
12-11-2012, 02:23 PM
ارسال: #7
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
0
0
میشه همین منو رو به صورت داینامیک هم آموزش بدین؟
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط تیم پشتیبانی ، elias.f ، r.ataie
12-13-2012, 02:30 AM
ارسال: #8
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
0
0
(12-11-2012 02:23 PM)zafarimoqaddam نوشته شده توسط:  میشه همین منو رو به صورت داینامیک هم آموزش بدین؟
خجستهخجستهخجستهخجستهخجستهخجستهخجستهخجستهخجستهخجسته
یه نفر پیدا شد اون سوالی رو که من میخواستم پرسیدخوشحال
بله Blush

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

ولی حتما میزارمموفق آموزش ایجاد کلاس منوی پایین افتادنی(dropdown menu)
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط nili ، تیم پشتیبانی ، zafarimoqaddam ، jahani ، r.ataie ، a_n ، rad5254
12-13-2012, 07:29 AM
ارسال: #9
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
0
0
(12-13-2012 02:30 AM)elias.f نوشته شده توسط:  خجستهخجستهخجستهخجستهخجستهخجستهخجستهخجستهخجستهخجسته
یه نفر پیدا شد اون سوالی رو که من میخواستم پرسیدخوشحال
بله Blush

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

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

چقدر این غرغر ها مشابه غرغرهای ماست! Big GrinBig GrinBig GrinBig GrinBig GrinBig Grin
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط nili ، zafarimoqaddam ، jahani ، r.ataie ، elias.f ، a_n
12-14-2012, 05:41 AM
ارسال: #10
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
0
0
(12-13-2012 07:29 AM)تیم پشتیبانی نوشته شده توسط:  چقدر این غرغر ها مشابه غرغرهای ماست! Big GrinBig GrinBig GrinBig GrinBig GrinBig Grin
Big Grin بلی، دقیقاBig Grin
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط تیم پشتیبانی ، a_n
ارسال پاسخ 


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  آموزش گام به گام ساخت سايت در ASP.NET Saeede azn 0 7,308 09-04-2013 07:08 PM
آخرین ارسال: Saeede azn
Star طراحی یک وب سایت ساده (آموزش) تیم پشتیبانی 6 13,108 04-20-2012 04:37 AM
آخرین ارسال: تیم پشتیبانی
Lightbulb استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: آموزش :. Cna FP 4 8,441 04-10-2012 03:57 AM
آخرین ارسال: Cna FP
  طراحی قالب یک سایت در فتوشاپ به زبان ساده(آموزش) Cna FP 5 12,395 04-01-2012 03:21 AM
آخرین ارسال: admin

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان