آموزش ساخت یک منوی پایین افتادنی چندگانه
|
12-09-2012, 06:53 AM
(آخرین ویرایش در این ارسال: 12-09-2012 08:55 AM، توسط elias.f.)
ارسال: #1
|
||||
|
||||
![]()
تو این آموزش ساخت منوی پایین افتادنی یا آبشاری رو آموزش میدم
این منو چندگانه هم هست ![]() برای ساخت این منوها فقط کافیه که ایجاد لیست ها تو html و مخفی کردن و ظاهر کردن عناصر توسط css رو بدونین ما آخر کار قراره به کجا برسیم؟ فایل زیر رو دانلود کنید و صفحه menu.html رو باز کنید تا نتیجه کار رو ببینید ![]() http://www.ecg-pnum.com/forum/attachment.php?aid=156 مرحله اول ساخت یک صفحه html ساده است که لیست ما رو در برمیگیره خود این لیست هم شامل چندتا زیر لیست میتونه باشه. برای ساده شدن موضوع یک لیست رستوران رو در نظر بگیرید !:دی وقتی تصمیم میگیرید ازین منوها درست کنین، حتما با مفاهیم html آشنایی دارین. به خاطر همین هم زود ازین قسمت رد میشیم و زیاد توضیح نمیدم لیست ما قراره خودش چندتا زیر لیست رو در بر بگیره! برای ساختش هم از لیست های نامرتب(همونایی که شماره و عدد ندارن و کنارشون یه دایره (گردالوی سابق) هست استفاده میکنیم) اما لیست چی؟! ساده ترین لیستی رو که همه دیدن رو درست میکنیم لیست رستوران ![]() اول > منوی اول تگ ul لیست رو تعریف میکنه و هرکدوم از li ها میشن یک گزینه از لیست. حالا کافیه هرکدوم ازین li ها رو دوباره با یه لیست دیگه پرکنیم تا لیست های تو در تو ایجاد کنیم. نکته اول اینکه هر گزینه رو داخل برچسب لینک یا همون <a> قرار میدیم.این از ملزوماته ![]() نکته دوم اینکه شما که کدهاتون رو مینویسید، کد هر قسمت رو که نوشتین در مرورگر تست کنین که بدونین تو هر قسمت به کجا میرسیم ![]() دوم > قرار دادن منوی دوم و سوم حالا منوی دوم و سوم رو در لابلای منوی اول قرار میدیم(زیر لیست دوم و سوم) نکته: به تگ ul اول یک ID اضافه میکنیم که بعدا تو css راحت بتونیم تغییرات رو اعمال کنیم. اسمش هم از اول کلمه navigation انتخاب کردیم(مکان یابی) ساخت بدنه و چهارچوب منوی ما تموم شد. همش همین بود! البته اگه فقط همین کد هارو تو یه صفحه بنویسید و ذخیره کنید به مشکل برمیخورید. ![]() این کدها باید لابلای کدهای صفحه htnl قرار بگیره که فونت فارسی درست نشون داده بشه و بتونین صفحه css رو هم به این صفحه الحاق کنین. پس زودتر یه صفحه css باز کنید و کدهای css زیر رو که میگم داخلش بنویسید. منو آمادست! ما فقط میخوایم بهش رنگ و لعاب بدیم و شکلش رو به دلخواه خودمون تنظیم کنیدم. این منو میتونه هرجای دیگه ای هم استفاده بشه. فقط کافیه کدهای css رو دقیقا کپی – پیست کنید و گزینه های منو رو هم با مواردی که دارین جایگزین کنید. یعنی شما کافیه یه بار یه منو بسازید و یه جا برا خودتون داشته باشید و هرجا خواستید ازش استفاده کنید ![]() |
||||
|
12-09-2012, 06:55 AM
(آخرین ویرایش در این ارسال: 12-09-2012 09:09 AM، توسط elias.f.)
ارسال: #2
|
||||
|
||||
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه(کدهای css)
تو صفحه css کافیه هرکدوم از عناصر صفحه html رو انتخاب کنیم و بهش هر حالتی دوست داشتیم بدیم.
ما آی دی nav رو برای همین اضافه کریدم.اما اگه اضافه نمیکردیم چی میشد؟ ![]() اونموقع بعد ها که این منو رو تو صفحات دیگه به کار میبردید، تمام منوهای اون صفحه به هم میریخت. ![]() برای همین هم ما به لیست اصلی یه آی دی میدیم که فقط تغییراتی که میدیم مختص همین منو باشه. ![]() اولین کاری که میکنیم ، دایره های کنار گزینه هارو برمیداریم... باید تمام لیست هامون رو برای اینکار انتخاب کنیم و بهش بگیم کنار گزینه هاشون دایره نزار! میگیم #nav و #nav ul رو انتخاب کن و .... کد: #nav,#nav ul{ کد: direction:rtl; باید فاصله های بیرونی و درونی ، موقعیت و ارتفاع خطوط رو تنظیم کنیم. شما این موارد رو خط به خط اضافه کنید و نتیجه رو در خروجی ببینید.بعضی از موارد الان هیچ تاثیری ندارن و فقط برای این اضافه میشن که بعدا که زیر لیست هارو مخفی و ظاهر میکنیم، چیزی به هم نریزه کد: #nav,#nav ul{ کد: #nav a:link, #nav a:active, #nav a:visited{ تا اینجای کار هیچ چیز مهمی نبوده.فقط رنگ بندی و .... داشتیم. اما از الان به بعد میخوایم منو رو بسازیم: اولین کار اینه که منو رو افقی کنیم : برای اینکه لیستمون به صورت افقی باشه هم این خط رو اضافه میکنیم: (منو میتونه عمودی هم باشه، اگه عمودی میخواین اینجارو انجام ندید و....) کد: #nav li{ کد: #nav ul { اندازه و جهت چینش لینک ها رو مشخص میکنیم: کد: #nav li ul a{ اما حالا باید بگیم که وقتی موس رو روی عناصر اصلی لیست بردیم، زیر لیست هارو نشون بده و البته زیر فقط زیر لیست یک مرحله رو نشون بده.نه مرحله دیگه ای رو یعنی اینطوری کد: #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ |
||||
|
12-09-2012, 06:56 AM
(آخرین ویرایش در این ارسال: 12-09-2012 09:09 AM، توسط elias.f.)
ارسال: #3
|
||||
|
||||
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه(jquery)
خب
![]() شما الان یک منوی آبشاری چندگانه دارین.ولی میتونین با jquery یک رنگ و لعابی هم بهش ببخشین ![]() فقط کافیه اول فایل jquery رو به صفحتون الحاق کنین و سپس کدهای زیر رو تو یه صفحه js بنویسین و این صفحه رو هم نیز بچسبونین به صفحتون ![]() کد: function mainmenu(){ |
||||
|
12-09-2012, 09:16 AM
ارسال: #4
|
||||
|
||||
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
این آموزش ایرادات زیادی ممکنه داشته باشه.
هرجا که مشکلی بود لطفا بگین تا اصلاح کنم ![]() پ1- قبلا در دوره آموزشی تابستان ، ایجاد منو توسط تیم پشتیبانی قرار داده شده بود. این آموزش فقط جنبه تکمیلی داشت و دیگر اینکه منوی چندگانه مورد بررسی قرار گرفته بود. پ2-لطفا هرجا رو که سوال داشتین یا مبهم بود رو بپرسین تا بیشتر توضیح بدم. پ3- قسمت آخر که فایل jquery بود رو توضیح ندادم. چون مربوط به این آموزش نمیشد و فقط برای این بود که منو رو زیباتر کنه. ولی باز هم اگه درخواست بدین، توضیح میدم. پ4-کدهای css رو هم فعلا زیاد باز نکردم تا اگه ازین آموزش استقبال شد، بعدا توضیحات بیشتری رو اضافه کنم. پ5-شما هم دست به کار بشین و یه مطلب کاربردی رو تو این تالار آموزش بدین. ![]() |
||||
|
12-09-2012, 05:25 PM
(آخرین ویرایش در این ارسال: 12-09-2012 05:26 PM، توسط جوادیان.)
ارسال: #5
|
||||
|
||||
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
سلام. ممنون بخاطر آموزشتون
![]() ![]() چند تا مطلب هم هست که میتونه در زمینه منو های درختی خیلی کمک کنه و باعث بهتر شدن نمایش منو در مرورگرهای مختلف می شود. 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 استفاده کرد. ![]() |
||||
|
12-11-2012, 02:27 AM
ارسال: #6
|
||||
|
||||
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
با سلام
از آموزش عالیتون واقعا سپاسگزارم.واقعا خیلی کمکم کرد.بازم ممنون |
||||
|
12-11-2012, 02:23 PM
ارسال: #7
|
||||
|
||||
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
میشه همین منو رو به صورت داینامیک هم آموزش بدین؟
|
||||
|
12-13-2012, 02:30 AM
ارسال: #8
|
||||
|
||||
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
(12-11-2012 02:23 PM)zafarimoqaddam نوشته شده توسط: میشه همین منو رو به صورت داینامیک هم آموزش بدین؟ ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() یه نفر پیدا شد اون سوالی رو که من میخواستم پرسید ![]() بله ![]() اتفاقا تمام خوبی این آموزش اینه که بتونیم داینامیکش کنیم. آموزشش رو یه چند روز دیگه قرار میدم. فقط انصافا ببینین چقدر فعالیت کمه تو تالار. هر آموزشی نهایتا 5و6 نفر بازدید کننده داره. که یکیش تازه تیم پشتیبانی هست ![]() شما خودتون باشین، انگیزه ای واسه 10 ساعت تایپ کردن دارین؟ ولی حتما میزارم ![]() |
||||
|
12-13-2012, 07:29 AM
ارسال: #9
|
||||
|
||||
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
(12-13-2012 02:30 AM)elias.f نوشته شده توسط: چقدر این غرغر ها مشابه غرغرهای ماست! ![]() ![]() ![]() ![]() ![]() ![]() |
||||
|
12-14-2012, 05:41 AM
ارسال: #10
|
||||
|
||||
RE: آموزش ساخت یک منوی پایین افتادنی چندگانه
|
||||
|
|
موضوعهای مرتبط با این موضوع... | |||||
موضوع: | نویسنده | پاسخ: | بازدید: | آخرین ارسال | |
آموزش گام به گام ساخت سايت در ASP.NET | Saeede azn | 0 | 7,314 |
09-04-2013 07:08 PM آخرین ارسال: Saeede azn |
|
![]() |
طراحی یک وب سایت ساده (آموزش) | تیم پشتیبانی | 6 | 13,138 |
04-20-2012 04:37 AM آخرین ارسال: تیم پشتیبانی |
![]() |
استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: آموزش :. | 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 مهمان