Вертикално меню

Автор: mute

Нека започнем от частъ с html.
Обикновенно менюто се поставя в някакъв див ( поне аз така правя ) за това и тук ще направя така
и ще му задам един класс #vmenu . Нашето меню всъщност ще представлява един неномериран списъл

<div id="vmenu">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</div>

Мисля че всичко до тук е чясно имаме списък като всеки елемент ще се явява бутон от менюто.
Понеже менюто има някои неща които неможем да направим само с html/css трябва да изрежите няколко картинки, те изглеждата ето така.

картинката която ще се сменя при посочване на бутона.

Интересната част е тази с CSS.
създаваме си класът

#vmenu {
width:174px;/* ширина на менюто в случая се съобразявам с картинката*/
padding-bottom:19px;/* паддинг отдолу за да се покажи долната част на менюто като бекраунд*/
background:url('downcorner.jpg') 0% 100% no-repeat;/*картинката която е за бекграунд , задал съм е да не се повравя и съм я фиксирал наи долу на дивчето*/
}

сега трябва да добавим и стил към списъка UL
#vmenu ul{
width:160px; /*ширина , задал съм я по малко от тази на дивчето за да има разтояние от ляво и от дясно*/
padding-top:20px; /* паддинг отгоре нужен ни е за да покажем горното заоблено ръбче*/
padding-left:7px; /* паддинг от ляво 7пиксела */
padding-right:7px; /*паддинг от дясно 7 пиксела*/
padding-bottom:0px; /* отдолу паддинга да е 0;*/
margin:0px; /* премагваме мерджина не ни трябва тук*/
list-style:none; /* казваме на списака да няма никакъв стил , обикновенно е с точка пред всеки елемент*/
background:url('upcorner.jpg') 0px 0px no-repeat #1d97bc; /* поставяме бекрауд картинката която е горния заоблен край , както и задаваме цвят на целия списък*/
}


#vmenu ul li{
border-bottom:solid 1px #999;/*Завадаме рамка отдолу на всеки елемент от списъка с ширина 1пиксел и сив свят*/
width:160px;/*всеки елемент да е с ширина 160 пиксела*/
}

#vmenu ul li a{
background:#1d97bc;/*задаваме свят на връзката*/
border-left:solid 10px #75c5de;/*задаваме рамка от 10 пиксела в ляво*/
display:block;/*Дисплей блок , за да имаме блокова структура на елементите*/
height:24px;/*Височина */
text-decoration:none;/*Премахваме подчертаването което е по подразбиране*/
color:#fff;/*Бял свят на линковете*/
font-weight:bold;/*Удебелен шрифт*/
padding-left:10px;/*10пиксела падинг от ляво за да не са залепени в края линковете*/
line-height:22px;/*Височина между линниите 22пиксела , ползва се за да ги центрираме вертикално*/
}

#vmenu ul li a:hover{
border-left:0;/*При ховър премахваме рамката и на неино място слагаме 20пиксела падинг*/
background:url('bg.jpg') repeat-y left #1d97bc;/*понеже няма рамка тук ползваме изображението което ще се появява при ховър на бутона*/
padding-left:20px;/*падинг 20 пиксела*/
}

виждасе еднакво под IE5,6,7, FF,Opera9