این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با منوها یا Navigation Bar در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با منوها یا Navigation Bar در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
منوها یکی از مهمترین و اساسی ترین بخش از یک وبسایت می باشند، چرا که ما به راحتی با استفاده از لینک هایی که درون آنها قرار دارند میتوانیم به بخش های مختلف یک وبسایت دسترسی پیدا نماییم.
بطور کلی ۲ نمونه منو میتونیم داشته باشیم :
- منوی افقی ( محبوبترین نوع منو ) ( در اکثر سایت ها استفاده مشه )
- منوی عمودی ( معمولا در پنل های کاربری و ادمین استفاده میشه )
فرقی نمیکنه افقی باشه یا عمودی در هرصورت منوها معمولا و بیشتر از تگ ul ایجاد میشن، حالا تگ ul یا ol بازم فرقی نمیکنه ، حتی میشه از ol یا ul هم استفاده نکرد و از div استفاده کرد. ولی خب کلی بدونید معمولا از ul استفاده میشه.
Free-Learn
نحوه ایجاد منوی افقی در CSS
مرحله اول : با استفاده از تگ UL اسکلت منو رو طراحی و ایجاد نماییم.
ایجاد اسکلت منو با استفاده از تگ UL در HTML
|
1 2 3 4 5 6 7 8 9 |
<body> <ul> <li><a href="#">خانه</a></li> <li><a href="#">آموزش HTML</a></li> <li><a href="#">آموزش CSS</a></li> </ul> </body> |
اگر در مثال بالا توجه کرده باشید یه گلوله های مشکی توپُر کنار آیتم های منو قرار دارند، خب اینارو باید حذف کنیم.
مرحله دوم : استفاده از دستورات CSS جهت استایل دهی و زیباسازی منو
- استفاده از list-style-type برای حذف گلوله های توپُر مشکی
- استفاده از padding برای حذف فاصله پیش فرض منو
- استفاده از margin برای حذف فضای خالی اطراف منو
- استفاده از overflow برای جلوگیری از سَر ریزشدن منو
|
1 2 3 4 5 6 |
ul.MyMenu{ padding:0; margin:0; list-style-type:none; overflow: hidden; } |
حالا میخوایم کاری کنیم که آیتم های منو در سمت راست شناور شن، یعنی آیتم ها پشت سرهم قرار بگیرند، و چون ما زبانمون فارسی هست، پس یعنی جهت متن مون از راست به چپ می باشد، پس باید گزینه های منو در سمت راست صفحه قرار بگیرند.
|
1 2 3 |
ul.MyMenu li{ float:right; } |
حالا میخوایم تگ های a یا همون لینک های داخل آیتم هارو انتخاب کنیم و براشون استایل تعریف کنیم.
- استفاده از text-decoration برای حذف خط زیر لینک ها
- استفاده از شبه کلاس hover برای وقتی ماوس میره روی آیتم ها
|
1 2 3 4 5 6 7 8 9 10 |
ul.MyMenu li a{ display:block; text-decoration:none; padding:8px; color:#fff; } ul.MyMenu li a:hover{ background-color:#d51c00; } |
Free-Learn
نحوه ایجاد منوی عمودی در CSS
برای ایجاد یک منوی عمودی در CSS ، دقیقا همون کارایی که برای ایجاد منوی افقی انجام دادیم برای منوی عمودی نیز باید انجام بدیم ، تنها تفاوت یک منوی افقی با یک منوی عمودی در ویژگی width و float می باشد.
یعنی فقط کافیه در قسمت دستورات CSS تگ UL بیایم و از ویژگی width و با یک مقدار دلخواه استفاده نماییم ، سپس در قسمت دستورات CSS تگ a دیگه لازم نیست از ویژگی float استفاده کنیم.
|
1 2 3 |
ul.MyMenu{ width:190px; } |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : قرار دادن یک آیتم در سمت چپ ( بر خلاف جهت آیتم های منو )
|
1 2 3 |
ul.MyMenu li.left{ float:left; } |
|
1 |
<li class="left">...</li> |
مثال شماره ۲ : فیکس یا ثابت کردن منو در سمت بالا صفحه
|
1 2 3 4 5 |
ul.MyMenu{ position: fixed; top: 0; width: 100%; } |
مثال شماره ۳ : فیکس یا ثابت کردن منو در سمت پایین صفحه
|
1 2 3 4 5 |
ul.MyMenu{ position: fixed; bottom: 0; width: 100%; } |
مثال شماره ۴ : ایجاد منوی چسبنده ( یعنی وقتی اسکرول میکنیم بسمت پایین منو به سقف مرورگر میچسبه )
|
1 2 3 4 |
ul.MyMenu{ position: sticky; top: 0; } |
مثال شماره ۵ : منوی افقی بهمراه زیرمنو
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul class="MyMenu"> <li><a href="#">خانه</a></li> <li><a href="#">آموزش</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">دسته بندی</a> <div class="dropdown-content"> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JavaScript</a> </div> </li> </ul> |
مثال شماره ۶ : منوی عمودی بهمراه زیرمنو
|
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 |
<body> <div id="cssmenu"> <ul> <li><a href="#"><span>خانه</span></a></li> <li class="active"><a href="#"><span>آموزش »</span></a> <ul> <li><a href="#"><span>HTML »</span></a> <ul> <li><a href="#"><span>تگ های HTML</span></a></li> <li><a href="#"><span>صفات HTML</span></a></li> </ul> </li> <li><a href="#"><span>CSS »</span></a> <ul> <li><a href="#"><span>انتخابگرهای CSS</span></a></li> <li><a href="#"><span>ویژگی های CSS</span></a></li> </ul> </li> </ul> </li> <li><a href="#"><span>درباره من</span></a></li> <li><a href="#"><span>تماس با من</span></a></li> </ul> </div> </body> |
خب دوستان خسته نباشید به پایان این جلسه ( آموزش کار با منوها یا Navigation Bar در CSS ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.
