می خواهیم با اسفاده از 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