Красиво меню за вашият сайт

Здравейте във този урок ще ви покажа как да си направите хубаво меню за сайта ви с помощта на CSS.

Започваме със index.html :)

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div class="body">
<div id="menu">
<div id="items">
<a href="#" id="selected">Начало</a><a href="#">линк</a><a href="#">линк1</a><a href="#">линк2</a>
<a href="#">линк3</a><a href="#">линк4</a><a href="#">линк5</a><a href="#">линк6</a>
<a href="#">линк7</a><a href="#">линк8</a><a href="#">Край на ликовете</a>
</div>
</div>
<div align="right">Автор: stoqnski</div>
</body>


След това : style.css


html, body
{
color: #8c909a;
font-family: Verdana, sans-serif;
font-size: 12px;
padding: 0;
margin: 0;
background: #1e1e1e;

}


.body
{
margin-left: auto;
margin-right: auto;
padding: 0;
width: 800px;
}



#menu
{
margin: 10px 0;
background: #aeff00 url("kartinki/back.gif");
height: 42px;
line-height: 42px;
}



#menu a
{
color: #000;
font-weight: bold;
border-right: 1px solid #5b9400;
display: block;
float: left;
padding: 0 10px;
}

#menu a:hover
{
background: #aeff00 url("kartinki/hover.gif");
}

#selected
{
background: #aeff00 url("kartinki/back.gif");
}

a
{
color: #fbaf32;
text-decoration: none;
}

a:hover
{
color: #f0e155;
}



Трябват ни и 2 картинки :

back.gif -
hover.gif -

тях ги запишете във папка kartinki.

Това беше :) .

Онлайн демо 24/7!!!

Забележка: Менюто се вижда еднакво под всички браузери :)

/ Трябва да сте регистриран за да напишете коментар /
От: ih999
18:51 13-04-2010
Найстина е много хубаво,харесва ми!
От: split
0:04 17-04-2010
dobre e no moje i oshte..
От: namitkov
10:16 06-04-2011
добро е това меню
Браво
От: batmanabg
13:17 22-07-2011
Полезен урок.
1