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

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

1
2
3
4
5
6
7
8
9
10
11
12
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) قرار خواهیم داد.

منتظر آموزش های بعدی ما باشید.

 

تگ های مطلب

طراحی وب سایت حرفه ای ، طراحی وب سایت با قیمت مناسب و ارزان ، طراحی وب سایت حرفه ای با جوملا، طراحی وب سایت با قیمت مناسب ، طراحی وب سایت ارزان ، طراحی وب سایت با جوملا