ارسال پاسخ 
 
امتیاز موضوع:
  • 2 رأی - میانگین امیتازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ساخت یک منوی پایین افتادنی چندگانه
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
ارسال پاسخ 


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

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

پرش به انجمن:


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