
ساخت نوار هدایتی در CSS
نمونه یک Navigation Bar (نوار هدایتی):
Navigation Bar = لیستی از لینک ها
navigation bar یا همان نوار هدایتی در واقع لیستی از لینک ها بوده که به کمک عناصر ul و li ایجاد میشود.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p> </body> </html> |
- تصویر قطعه کد بالا به شکل زیر است:
حال میخواهیم شکل های دایره ای و همچنین margin و padding هارا حذف کنیم تا لیستمان نمای بهتری پیداکند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> |
Navigation Bar عمودی
برای ساخت یک Navigation Bar عمودی با توجه به کد بالا، فقط کافی است که برای گزینشگر a ، خصوصیت display را با مقدار “block” تنظیم کنیم:
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 | <html> <head> <style type="text/css"> ul { list-style-type:none; margin:0; padding:0; } a { display:block; width:60px; background-color:#dddddd; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>A background color is added to the links to show the link area.</p> <p>Notice that the whole link area is clickable, not just the text.</p> </body> </html> |
- تصویر قطعه کد بالا به شکل زیر است:
توضیح مثال بالا:
- با تنظیم خصوصیت display با مقدار “block” تمام تگ های <a> در یک خط جداگانه قرار می گیرند و تمام فضای لینک قابل کلیک کردن است (نه فقط متن لینک)، و این به ما اجازه می دهد تا عرض لینک را مشخص کنیم.
- عناصر Block به صورت پیشفرض تمام عرض قابل دسترس را اشغال می کنند. ما می توانیم مشخص کنیم که ۶۰ پیکسل از یک خط را اشغال کند.
توجه: همیشه عرض تگ <a> استفاده شده در navigation bar را مشخص کنید. اگر انجام این کار را فراموش کنید، IE6 یک نتیجه غیرمنتظره تولید خواهد کرد.
Navigation Bar افقی
دو راه برای ساخت نوار هدایتی افقی وجود دارد. استفاده از لیست های inline یا floating
هر دو روش برای ساخت نوار مناسب میباشند، اما اگر می خواهید لینک ها، اندازه یکسان داشته باشند باید از روش floating استفاده کنید.
لیست های inline
یک راه برای ساخت نوار هدایتی افقی این است که عناصر <li> را به صورت inline مشخص کنیم:
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 | <html> <head> <style type="text/css"> ul { list-style-type:none; margin:0; padding:0; } li { display:inline; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> |
- تصویر قطعه کد بالا به شکل زیر است:
Floating
در مثال بالا، لینک ها عرض های متفاوتی دارند.
برای اینکه تمام لینک ها عرض یکسان داشته باشند، عناصر <li> را float می کنیم و عرض عناصر <a> را تنظیم می کنیم:
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a { display:block; width:60px; background-color:#dddddd; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p> </body> </html> |
- تصویر قطعه کد بالا به شکل زیر است:
ساخت منوی کشویی
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: right; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropbtn:after { content:url(http://beyamooz.com/templates/shaper_helix/images/big_daddy.png); color:#fff; padding-right:5px; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: right; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } </style> </head> <body style="direction:rtl"> <ul> <li><a class="active" href="#home">صفحه نخست</a></li> <li><a href="#news">اخبار</a></li> <li class="dropdown"> <a href="#" class="dropbtn">لیست کشویی</a> <div class="dropdown-content"> <a href="#">لینک یک</a> <a href="#">لینک دو</a> <a href="#">لیینک سه</a> </div> </li> </ul> <h3>یک لیست کشویی داخل Navigation Bar</h3> <p>موس خود را روی گزینه "لیست کشویی" قرار دهید تا گزینه های آن ظاهر شود.</p> </body> </html> |
- تصویر قطعه کد بالا به شکل زیر است:
توجه داشته باشید که به کمک Bootstrap ساخت منوی کشویی بسیار راحت تر میباشد.
اطلاعات مفیدی به اشتراک گذاشتین مطالب بسیار جامع است
آموزش خیلی خوبی بود ممنونم از شما
ممنونم از آموزش عالیتون
آموزش خیلی خوبی بود
بسیار عالی بود
متشکر از اشتراک گذاریتون
سلام،خسته نباشین واقعا مطالب خوب و جذابی درج میکنین
سلام و سپاس فراوان از اشتراک گذاریتون مطالب سایت عالیه