گروه مقاله : CSS

تاريخ انتشار : 1394/02/05 - 10:16

كد :244

ساخت منو افقی و عمودی (Navigation bars)

برای هر وب سایتی داشتن یک navigation bar برای راحتی استفاده و دسترسی سریعتر ضروریست. از navigation bar ها غالبا برای ایجاد منو استفاده می شود.

Navigation bar = list of links

یک navigation bar احتیاج به یک کد html مناسب دارد که یک لیست مرتب از لینک ها را به نمایش بگذارد و برای این منظور از ul و li استفاده می کنند. در مثال زیر نیز از این روش، بدون کمک گرفتن از css استفاده شده است.

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

در مثال زیر bullet و margin و padding حذف شده اند:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

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 احتیاج به bullet ندارد، ما از دستور ;list-style-type: none استفاده کرده ایم تا bullet نمایش داده نشود.

Margin و padding نیز برای اینکه مقادیر پیش فرض مرورگرها پاک شوند با صفر مقدار دهی شده اند.

کدی که در مثال بالاست، برای navigation bar ها، چه در حالت عمودی و چه در حالت افقی استفاده می شود.

Vertical navigation bar :

برای ساخت یک navigation bar عمودی فقط کافیست یک style برای تگ a در مثال بالا اضافه نماییم. به مثال زیر توجه نمایید:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

a {

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 تمام فضای افقی در دسترس خود را به طور کامل اشغال کند و عنصر دیگری را در این فضا کنار خود جای ندهد اما ما با استفاده از width یک فضای clickable را برای تگ a فراهم کرده ایم به گونه ای که فقط اگر در این محدوده کلیک شود تگ a لینک خواهد شد.

توجه : اگر شما width را از قلم بیاندازید این موضوع در Ie6 نتایج غیر منتظره ای را بوجود میاورد.

Horizontal navigation bar :

برای ایجاد navigation bar عمودی شما دو راه دارید، یکی استفاده از inline برای li و دیگری استفاده از float.

هر دو روش به خوبی کار می کنند اما اگر بخواهید لینک ها در یک سایز مشخص باشند میبایست از float استفاده نمایید.

Inline list items :

در مثال زیراز inline استفاده شده است:

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

li {

display: inline;

}

</style>

</head>

<body>

<ul>

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

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

</ul>

</body>

</html>

توضیح مثال : به طور پیش فرض li جز عناصریست که display آن block است وبه اندازه یک خط قبل و بعد از خود فاصله عمودی ایجاد میکند ولی ما در اینجا بنا به توضیحات داده شده آن را به صورت inline استایل دهی کرده ایم تا فقط به اندازه یک خط فضا اشغال کند.

Floating list items :

در مثال بالا هر کدام از تگ های a به اندازه ی متن داخل خود فضا اشغال می کنند. حال برای اینکه همه ی تگ های a داخل navigation bar فضایی یکسان داشته باشند، از float و width استفاده می کنیم.

<!DOCTYPE html>

<html>

<head>

<style>

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="#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>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>

<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>

</body>

</html>

توضیح مثال :

در مثال بالا از ;float: left برای کنار هم قرار گرفتن لینک ها استفاده شده است.

همینطور از ;display: block استفاده شده تا ;width: 60px برای هر کدام از تگ های a در نظر گرفته شود (فضای قابل کلیک یا clickable).

از آنجایی که عناصر block تمام فضای افقی در دسترس خود را اشغال می کنند، خاصیت float به تنهایی برای کنار هم قرار دادن لینک ها بی تاثیر می باشد، به همین دلیل از width استفاده و آن را مقدار دهی کرده ایم.

» در مثالی که مشاهده می نماییید یک منوی افقی با تمام استایل های لازم را می توانید ببینید.

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

}

li {