ارسال پاسخ 
 
امتیاز موضوع:
  • 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
ارسال پاسخ 


پیام‌های داخل این موضوع
آموزش ساخت یک منوی پایین افتادنی چندگانه - elias.f - 12-09-2012 06:53 AM

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

پرش به انجمن:


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