آموزش کار با منوها یا Navigation Bar در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با منوها یا Navigation Bar در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
اصلا منو چیه؟ منو بطور کلی به چیزی گفته میشه که لیستی از برنامه ها یا لینک ها و.. را بتونه بصورت مرتب شده و دسته بندی شده به نمایش بگذارد.
منوها یکی از مهمترین و اساسی ترین بخش از یک وبسایت می باشند، چرا که ما به راحتی با استفاده از منوها و لینک هایی که درون آنها قرار دارد میتوانیم قسمت های مختلف یک وبسایت را مشاهده نماییم.
منوی سایت ها نیز دقیقا برای همینکار ایجاد می شوند، یعنی برای اینکه بتونن مطالب یک سایت رو بصورت دسته بندی شده و مرتب ایجاد کنند تا کاربران راحتتر بتونن مطالب مورد نظرشون رو در اون سایت پیدا کنند.
Free-Learn
حال ما برای طراحی و ایجاد منوی یک سایت ، باید ۲ کار اصلی رو انجام بدیم :
- اول طراحی اسکلت منو ( با استفاده از زبان HTML )
- دوم استایل دادن به منو جهت زیبایی و نمایش هرچه بهتر ( با استفاده از زبان CSS )
پس در ادامه میریم تا یاد بگیریم که چگونه میتوانیم یک منوی زیبا برای سایتمون طراحی کنیم، لطفا در ادامه و تا پایان این جلسه با من همراه باشید.
Free-Learn
انواع منو در یک صفحه وب
ما بطور کلی ۲ نمونه منو میتونیم داشته باشیم : ۱ » منوی افقی و ۲ » منوی عمودی ، که با توجه به نیاز میتونیم مشخص کنیم که منو افقی باشد و یا منوی مان عمودی.
منوی افقی : منوی ایست که آیتم های آن بصورت افقی (در عرض) قرار میگیرند و زیرآیتم های آن معمولا بصورت عمودی قرار میگیرند.
نمونه منوی افقی :
منوی عمودی : منوی ایست که آیتم های آن بصورت عمودی در زیر هم قرار میگیرند و معمولا زیرآیتم های آن هم میتواند بصورت افقی و هم بصورت عمودی قرار میگیرند.
نمونه منوی عمودی :
Free-Learn
نحوه ایجاد منوی افقی در CSS
خب اول میخوایم یاد بگیریم که چگونه میتوانیم یک منوی افقی برای صفحه وبمان ایجاد نماییم، پس لطفا در ادامه با همراه باشید.
مرحله اول : در مرحله اول ، همونطور که در ابتدای این آموزش اشاره کردم ، ما باید اسکلت منوی مان را با استفاده از HTML و با استفاده از تگ UL طراحی و ایجاد نماییم.
ایجاد اسکلت منو با استفاده از تگ UL در HTML
1 2 3 4 5 6 7 8 9 10 |
<body> <ul> <li><a href="#">خانه</a></li> <li><a href="#">آموزش HTML</a></li> <li><a href="#">آموزش CSS</a></li> <li><a href="#">درباره ما</a></li> </ul> </body> |
اگه لطف کنید و بروی دکمه امتحان کنید کلیک نمایید، میبینید که اسکلت منوی ما ایجاد شده، ولی همونطور که میبینید اصلا قیافش به منو نمیخوره! خب صددرصد درسته ، چون از این به بعدش دیگه CSS میاد وسط.
اگر در مثال بالا توجه کرده باشید یه گلوله های مشکی توپُر که متعلق به تگ UL و در کل لیست های نامرتب می باشد هم وجود دارند، خب اینا که نباید باشن وگرنه استایل منومون رو خراب میکنه، پس باید حذفشون کنیم.
مرحله دوم : استفاده از دستورات CSS جهت استایل دهی و زیباسازی منو
خب حالا میخوام اون گلوله های مشکی توپُر رو که کنار آیتم های منو هست ، حذف کنم، پس میتونم از ویژگی list-style-type جهت حذف این گلوله ها استفاده کنیم.
1 2 3 4 5 |
ul{ padding:0; margin:0; list-style-type:none; } |
حالا میخوایم کاری کنیم که گزینه های منو بصورت افقی قرار بگیرند و پشت سرهم. (در واقع میشه گفت گزینه ها بصورت اینلاین یا درون خطی قرار می گیرند)
و چون ما زبانمان فارسی می باشد، یعنی در واقع جهت متن مون از راست به چپ می باشد، پس باید گزینه های منو در سمت راست صفحه قرار بگیرند.
1 2 3 |
li { float:right; } |
حالا میخوایم یه سرسامونی به لینک های موجود در منو مون بدیم، برای اینکار ما باید در CSS تگ a رو که میشه لینک هامون اول انتخاب کنیم و سپس استایل دلخواه مون رو بهش بدیم.
توضیح دستورات زیر :
- ویژگی text-decoration : برای حذف خط زیر لینک ها
- ویژگی padding : برای ایجاد یک فضای خالی یا فاصله در عنصر لینک
- شبه کلاس hover : با استفاده از این شبه کلاس میتوانیم مشخص کنیم که وقتی ماوس بروی لینک ها رفت چه اتفاقی بیوفتد.
1 2 3 4 5 6 7 8 9 10 |
li a{ display:block; text-decoration:none; padding:8px; color:#fff; } li a:hover{ background-color:#d51c00; } |
خب تموم شد، به همین راحتی تونستید یک منوی افقی ایجاد کنید، حالا در مثال زیر بطور کامل دستورات مرحله اول و دوم را میتوانید مشاهده نمایید.
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 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <style> ul{ padding:0; margin:0; list-style-type:none; background-color:#333333; overflow: hidden; } li { float:right; } li a{ display:block; text-decoration:none; padding:8px; color:#fff; } li a:hover{ background-color:#d51c00; } </style> </head> <body dir="rtl"> <ul> <li><a href="#">خانه</a></li> <li><a href="#">آموزش HTML</a></li> <li><a href="#">آموزش CSS</a></li> <li><a href="#">درباره ما</a></li> </ul> </body> </html> |
Free-Learn
نحوه ایجاد منوی عمودی در CSS
برای ایجاد یک منوی عمودی در CSS ، دقیقا همون کارایی که برای ایجاد منوی افقی انجام دادیم برای منوی عمودی نیز باید انجام بدیم ، تنها نقطه تفاوت یک منوی افقی با یک منوی عمودی در ویژگی width و float می باشد.
یعنی فقط کافیه در قسمت دستورات CSS تگ UL بیایم و از ویژگی width و با یک مقدار دلخواه استفاده نماییم ، سپس در قسمت دستورات CSS تگ a دیگه لازم نیست از ویژگی float استفاده کنیم.
1 2 3 4 5 6 7 8 |
ul{ padding:0; margin:0; list-style-type:none; background-color:#333333; overflow: hidden; width:190px; } |
Free-Learn
مثال شماره ۱ : قرار دادن آیتم در سمت چپ منو (یا در سمت راست) بر خلاف آیتم های منو
1 2 3 4 5 6 |
<ul> <li><a href="#">خانه</a></li> <li><a href="#">آموزش HTML</a></li> <li><a href="#">آموزش CSS</a></li> <li style="float:left;"><a href="#">درباره ما</a></li> </ul> |
مثال شماره ۲ : فیکس یا ثابت کردن منو در سمت بالا صفحه (در برخی از تلفن های همراه ممکن است کار نکند)
1 2 3 4 5 |
ul{ position: fixed; top: 0; width: 100%; } |
مثال شماره ۳ : فیکس یا ثابت کردن منو در سمت پایین صفحه (در برخی از تلفن های همراه ممکن است کار نکند)
1 2 3 4 5 |
ul{ position: fixed; bottom: 0; width: 100%; } |
مثال شماره ۴ : ایجاد منوی افقی با استفاده از تگ div و تگ a ( بدون استفاده از تگ های UL و Li ) – بهمراه زیرمنو / زیرآیتم
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <div class="navbar"> <a href="#">خانه</a> <a href="#">آموزش HTML</a> <a href="#">آموزش CSS</a> <div class="dropdown"> <button class="dropbtn"> فری لرن </button> <div class="dropdown-content"> <a href="#">لینک 1</a> <a href="#">لینک 2</a> <a href="#">لینک 3</a> </div> </div> </div> </body> |
مثال شماره ۵ : ایجاد منوی افقی با استفاده تگ های ul و li ( بهمراه زیرمنو / زیرآیتم )
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul> <li><a href="#home">خانه</a></li> <li><a href="#news">دسته</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">منوی بازشو</a> <div class="dropdown-content"> <a href="#">لینک 1</a> <a href="#">لینک 2</a> <a href="#">لینک 3</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 ) رسیدیم، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید.