CSS - лесен начин да си направите вертикално меню

Първо създава вашите връзки в HTML и за този пример, в който аз ще поставя връзките право в тялото без А, делящо се на DIV просто показва колко елементарно то може да бъде.

Първо създаваме линковете в html

<body>
<a class="nav" href="#">Page 1</a>
<a class="nav" href="#">Page 2</a>
<a class="nav" href="#">Page 3</a>
<a class="nav" href="#">Page 4</a>
<a class="nav" href="#">Page 5</a>
</body>

Пример 1

Това беше с html сега продължаваме с CSS

Първо ще подготвим размерът на бутоните от менюто, това ще го направим като използваме display:block; width и height като им зададем стоиност.

a.nav, a.nav:link, a.nav:visited {display:block; width:150px; height:25px;}

Пример 2


Сега ще напвавим да изглежда като бутон като добавим border и background-color:

a.nav, a.nav:link, a.nav:visited {display:block; width:150px; height:25px; background:#dca; border:1px solid #000;}

Пример 3


Сега нека да сложим малко разтояние между бутоните и да оправим текста.

a.nav, a.nav:link, a.nav:visited {display:block; width:150px; height:25px; background:#dca; border:1px solid #000; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000;}

Пример 4

Почти готово, просто преместете текста надолу към вертикалния център и ние вече имаме добре оформен бутон.

a.nav, a.nav:link, a.nav:visited {display:block; width:150px; height:25px; background:#dca; border:1px solid #000; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000; line-height:25px; overflow:hidden;}

Пример 5

Сега да приложим малко динамичност към менюти

a.nav:hover {color:#fff; background:#764;}
a.nav:active {color:#fff; background:#c00;}

Ето и краен резултат

ако искате да направите менюто хорезонтално просто пребавете float:left на a.nav, a.nav:link, a.nav:visited

Урока е подготвен специално за http://web-tourist.net .
Източник http://www.cssplay.co.uk




/ Трябва да сте регистриран за да напишете коментар /
От: batmanabg
13:25 22-07-2011
Полезен урок.
1