CSS طراحی سایت گوناگون

۲۳-ساخت نوار هدایتی در CSS

نحوه ساخت نوار هدایتی در صفحه به کمک CSS

رضااسدزاده اردیبهشت ۲۱, ۱۳۹۷

8 1,369 1 دقیقه قبل خوانده شده

ساخت نوار هدایتی در CSS

نمونه یک Navigation Bar (نوار هدایتی):

Navigation Bar = لیستی از لینک ها

navigation bar یا همان نوار هدایتی در واقع لیستی از لینک ها بوده که به کمک عناصر ul و li ایجاد میشود.

<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>

<html>

<body>

<ul>

<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 هارا حذف کنیم تا لیستمان نمای بهتری پیداکند.

<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>

<html>

<head>

<style>

{

list-style-type:none;

margin:0;

padding:0;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

Navigation Bar عمودی

برای ساخت یک Navigation Bar عمودی با توجه به کد بالا، فقط کافی است که برای گزینشگر a ، خصوصیت display را با مقدار “block” تنظیم کنیم:

<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>

<html>

<head>

{

list-style-type:none;

margin:0;

padding:0;

}

{

display:block;

width:60px;

background-color:#dddddd;

}

</style>

</head>

<body>

<ul>

<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 مشخص کنیم:

<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>

<html>

<head>

{

list-style-type:none;

margin:0;

padding:0;

}

{

display:inline;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

تصویر قطعه کد بالا به شکل زیر است:

Floating

در مثال بالا، لینک ها عرض های متفاوتی دارند.

برای اینکه تمام لینک ها عرض یکسان داشته باشند، عناصر <li> را float می کنیم و عرض عناصر <a> را تنظیم می کنیم:

<!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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

{

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

{

float:left;

}

{

display:block;

width:60px;

background-color:#dddddd;

}

</style>

</head>

<body>

<ul>

<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>

تصویر قطعه کد بالا به شکل زیر است:

ساخت منوی کشویی

<!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>

<!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>

<ul>

<li><a href="#news">اخبار</a></li>

<a href="#" class="dropbtn">لیست کشویی</a>

<a href="#">لیینک سه</a>

</div>

</li>

</ul>

<h3>یک لیست کشویی داخل Navigation Bar</h3>

<p>موس خود را روی گزینه "لیست کشویی" قرار دهید تا گزینه های آن ظاهر شود.</p>

</body>

</html>

تصویر قطعه کد بالا به شکل زیر است:

توجه داشته باشید که به کمک Bootstrap ساخت منوی کشویی بسیار راحت تر میباشد.

بخش بعدی

بخش قبلی

به این پست امتیاز دهید.

برچسب ها

مشاهده بیشتر

8 دیدگاه

دیزل ژنراتور گفت:
تیر ۵, ۱۳۹۷ در ۱۰:۵۹
اطلاعات مفیدی به اشتراک گذاشتین مطالب بسیار جامع است
پاسخ
تولید کننده لباس کار گفت:
مرداد ۳, ۱۳۹۷ در ۰۴:۱۷
آموزش خیلی خوبی بود ممنونم از شما
پاسخ
سمعک گفت:
مرداد ۲۱, ۱۳۹۷ در ۰۴:۳۸
ممنونم از آموزش عالیتون
پاسخ
نوار نقاله گفت:
مرداد ۲۹, ۱۳۹۷ در ۰۴:۳۳
آموزش خیلی خوبی بود
پاسخ
بالابر گفت:
شهریور ۵, ۱۳۹۷ در ۰۶:۴۲
بسیار عالی بود
پاسخ
یوبوت گفت:
شهریور ۱۸, ۱۳۹۷ در ۱۱:۴۵
متشکر از اشتراک گذاریتون
پاسخ
ایران سرویس ماشین گفت:
مهر ۲۳, ۱۳۹۷ در ۱۲:۵۹
سلام،خسته نباشین واقعا مطالب خوب و جذابی درج میکنین
پاسخ
دلسا الکترونیک گفت:
مهر ۲۸, ۱۳۹۷ در ۱۳:۴۴
سلام و سپاس فراوان از اشتراک گذاریتون مطالب سایت عالیه
پاسخ