آموزش ایجاد منوی عمودی با استفاده از 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 :
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
دوست عزیز، به سایت علمی نخبگان جوان خوش آمدید
مشاهده این پیام به این معنی است که شما در سایت عضو نیستید، لطفا در صورت تمایل جهت عضویت در سایت علمی نخبگان جوان اینجا کلیک کنید.
توجه داشته باشید، در صورتی که عضو سایت نباشید نمی توانید از تمامی امکانات و خدمات سایت استفاده کنید.
پاسخ با نقل قول
علاقه مندی ها (Bookmarks)