CSS – Хоризонтално меню

В този урок ще се научен да правим просто горно меню,на което лесно ще можете да сменяте цветовете.

Ще започнем с HTML кода,който показва менюто:

<a href="">Link 1</a> <a href="">Link 2</a> <a href="">Link 3</a> <a href="">Link 4</a></div>

Това няма да ни направи проблем затова нека обгредин нашето миню в div:

<div id="nav">
<a href="">Link</a> <a href="">Home</a> <a href="">Tutorials</a> <a href="">Nothing</a>
</div>

Това беше всичко с HTML.Сега е време да обработим нашето меню в CSS

Сложете следния код в CSS файла:

#nav {
background-color: #D5D5D5;
border: 1px solid #B8B8B8;
padding-top: 8px;
height: 21px;
padding-left: 3px;
}
#nav a {
border: 1px solid #B7B7B7;
padding: 4px;
background-color: #F3F3F3;
color: #0077B4;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Sans-Serif;
font-size: 12px;
}
#nav a:hover {
color: #00A8FF;
background-color: #ffffff;
border: 1px solid #727272;
border-bottom: 1px solid #ffffff;
}

Сега ще обясня как действа.Нарекошме div-а,в който обгредихме менято, „nav“ .

Нашият следващ сет от CSS казва на браузера как да изобрази линковете в нашия div.Линковете са преписани на CSS-а като „a“.За линковете в нашето меню ще добавим рамка и цвят за фон.Може съща да променяме и шрифта.

Нашия последен сет в CSS ще зададае на браузера как да покаже нашите линкове,когато минаваме с мишката отгоре им.Ще направим рамката много по-тъмна и ще сменим цвета на шрифта и фона.

Нашето CSS меню е готово!Сега можете да променяте цветовете,за да подхождат на сайта ви и да променяте настройките.

За всички мързеливи хора ето и съединени HTML и CSS кода:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>CSS Menu</title>
<style type="text/css">
#nav {
background-color: #D5D5D5;
border: 1px solid #B8B8B8;
padding-top: 8px;
height: 21px;
padding-left: 3px;
}
#nav a {
border: 1px solid #B7B7B7;
padding: 4px;
background-color: #F3F3F3;
color: #0077B4;
font-weight: bold;
text-decoration: none;
font-family: Verdana, Sans-Serif;
font-size: 12px;
}
#nav a:hover {
color: #00A8FF;
background-color: #ffffff;
border: 1px solid #727272;
border-bottom: 1px solid #ffffff;
}
</style>
</head>
<body>

<div id="nav"><a href="">Link</a> <a href="">Home</a> <a href="">Tutorials</a> <a href="">Nothing</a></div>

</body>
</html>