ایجاد منوی عمودی با استفاده از css و html

behnam.yousefi · #1 05-11-2013

می خواهیم با اسفاده از css و html یک منوی عمودی (vertical menu) ایجاد کنیم.

برای دیدن مثال، روی لینک زیر کلیک کنید.

ایجاد منوی عمودی (vertical menu) با استفاده از css و html

ما برای شما این مثال کوچک را قرار دادیم تا درک راحتتری داشته باشد.

همان طور که می دانید منوها را چه افقی و چه عمودی با استفاده از تگ ul و li می سازند.

* تگ ul و li تگ های زبان html هستند.

حالا به کد ul و li مثال بالا توجه کنید

کد ul و li مثال بالا به صورت زیر است)

<ul class="v-menu">
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>

به کد های html بالا دقت کنید. به تگ ul کلاس (class) داده شده است.(v-menu).

یعنی این که تگ ul که همان منوی عمودی ما است از کلاس v-menu در فایل css استفاده می کند.

و حالا کد های کلاس v-menu :

ul.v-menu{
list-style:none;
margin-bottom: 0;
margin-top: 0;
padding-right: 0;
width: 170px;
background:green;
padding:10px;
}
ul.v-menu li{padding:5px; background:#42B242; margin-bottom:5px}
ul.v-menu li:hover{padding:5px; background:#59BD59; margin-bottom:5px}
ul.v-menu a{ text-decoration:none; color:#fff; font-family:Tahoma, Geneva, sans-serif}

کد های بالا کدهای css این مثال هستند که باید در فایل Css سایتتون و یا اگر تنها یک فایل html دارید در تگ <head> قرار گیرند.

** شما می توانید با تغییر css منو های بسیار زیباتری ایجاد کنید...

انشالله در آینده آموزش ایجاد زیر منو برای همین نوع منو (vertical) قرار خواهیم داد.

منبع : http://www.sitesazi.com/support/arti...-css-html.html