با عرض سلام و احترام خدمت شما کاربران گرامی سایت بزرگ یک لرن
تو این مطلب براتون آموزش ساخت منوی آبشاری با استفاده از html و css رو قرار دادم تا با نحوه ی ساخت اون آشنا بشید و خودتون برای سایتتون منو بسازید .
.:: لطفا برای مشاهده آموزش ساخت منوی آبشاری به ادامه مطلب بروید ::.
تو این آموزش من اصول طراحی منو رو براتون توضیح میدم و استایل دهیش دیگه به عهده ی خودتونه . البته بعد از آموزش براتون یه منوی آبشاری زیبا قرار دادم .
ابتدا کد html زیر را می نویسیم :
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<ul class="menu">
<li><a href="">صفحه اصلیa>li>
<li><a href="">امکاناتa>
<ul>
<li><a href="">آیتم شماره ۱a>li>
<li><a href="">آیتم شماره ۲a>li>
<li><a href="">آیتم شماره ۳a>li>
ul>
li>
<li><a href="">ارتباط با ماa>li>
<li><a href="">تبلیغاتa>li>
ul>
|
کد بالا یه فهرست توسط تگ ul ایجاد میکنه که آیتم های منو همون تگ های li داخل تگ ul هستند . در ضمن تو یکی از تگ های li و بعد از تگ a یه فهرست دیگه به عنوان زیر منو ایجاد شده .
تو کد بالا من به تگ ul اولی کلاس menu را دادم تا بتونم تو css بهش استایل بدم .
خوب حالا نوبت به استایل دهی منو می رسه . کد زیر رو باید تو تگ صفحتون یا قالبتون استفاده کنید یعنی کد رو بعد از تگ باز و قبل از تگ بسته ی قرار بدید .
حالا ببینیم کد بالا چی میگه :
تو خط ۲ مقدار direction رو برای کلاس menu برابر rtl قرار دادیم تا منو از راست به چپ نوسته بشه ، برای زبان شیرین فارسی
تو خط ۳ توسط سلکتور .menu li به تموم تگ های li داخل کلاس menu مقدار display:inline-block رو دادیم تا آیتم های منو زیر هم نباشن و کنار هم قرار بگیرن .
تو خط ۴ تگ ul ای که به عنوان زیر منو هست رو صدا زدیم و مقدار position:absolute رو بهش دادیم تا زیر تگ والد خودش قرار بگیره تا وقتی ماوس روی لینک امکانات قرار گرفت این زیر منو زیرش باز بشه .
مقدار padding رو هم برای این گذاشتیم تا زیر منو از هیچ طرف فاصله نداشته باشه مخصوصا طرف راست . و مقدار visibility رو هم روی مقدار hidden گذاشتیم تا زیر منو در حالت معمولی پنهان باشه .
تو خط ۵ هم توسط سلکتور .menu li ul li به تگ های li داخل زیر منو خاصیت display:block رو دادیم تا آیتم های زیر منو ، زیر همدیگه قرار بگیرن .
و در آخر تو خط ۶ گفتیم که اگه تگ li ای که داخل کلاس menu هست hover شد (یعنی ماوس روش قرار گرفت) زیر منوش که تگ ul هست توسط مقدار visibility:visible ظاهر بشه .
خوب حالا دیدید منویی که فکر می کردید و فکر میکردم این قدر مشکله ، به همین سادگی ساخته شد .
در آخر به خاطر این که تو این آموزش ما را همراهی کردید تشکر می کنم و این منوی آبشاری رو به شما تقدیم می کنم امیدوارم خوشتون بیاد :
کد html :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<ul class="navbar">
<li><a href="">صفحه نخستa>li>
<li><a href="">امکاناتa>
<ul>
<li><a href="">آیتم شماره ۱a>li>
<li><a href="">آیتم شماره ۲a>li>
<li><a href="">آیتم شماره ۳a>li>
<li><a href="">آیتم شماره ۴a>li>
ul>
li>
<li><a href="">ارتباط با ماa>li>
<li><a href="">تبلیغاتa>li>
ul>
|
کد css :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
|
آدرس سایتهای ساخت منو
CSS Button Generator - Imageless css buttons simplified
ColorZilla - Eyedropper, Color Picker, Gradient Generator and more
The ultimate CSS tools for web designers | CSSmatic
CSS3 Generator
توسط :
hazaran
در : جمعه 16 مرداد 1394 - 23:18