web-touristМного добро вертикално меню
Автор: boby
Здравейте. Сега ще ви покажа как можете да си направите меню с помощта на CSS. Първото нещо, което трябва да направите, за да си направите менюто е да изтеглите ето тази картинка.
След това ви представям CSS кода:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #F3FAFF;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(menu.gif);
padding: 8px 0 0 10px;
}
#menu li a:hover, #menu li #current {
color: #26370A;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu li a:active {
color: #26370A;
background: url(menu.gif) 0 -64px;
padding: 8px 0 0 10px;
}А сега малко обяснения по CSS кода:
#menu {
width: 200px; //Широчина на менюто
border-color: #94AA74; //Цвят на контура
border-size: 1px; //Дебелина на контура
}
#menu li a {
height: 32px; //Височина на менюто
}
#menu li a:link, #menu li a:visited {
background: url(menu1.gif); //Това е картинката, която изтеглихте.
}
#menu li a:hover, #menu li #current {
background: url(menu1.gif) 0 -32px; //Това също е картинката, която изтеглихте.
}
#menu li a:active {
background: url(menu.gif) 0 -64px; //Това отново е картинката, която изтеглихте.
}Нека сега пристъпим към HTML кода:
<div id="menu">
<ul>
<li><a id="current" href="#">За нас</a></li>
<li><a href="#">Проекти</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</div>id=“current“ означава, че това е бутона, който е натиснат по подразбиране. Ако не желаете да е натиснат бутон по подразбиране махате id=“current“ 🙂 Последното нещо, което искам да направя е да ви съединя двата кода:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Много добро меню за вашия сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #F3FAFF;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(menu.gif);
padding: 8px 0 0 10px;
}
#menu li a:hover, #menu li #current {
color: #26370A;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu li a:active {
color: #26370A;
background: url(menu.gif) 0 -64px;
padding: 8px 0 0 10px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="#">За нас</a></li>
<li><a href="#">Проекти</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</div>
</body>
</html>Ами това е засега 🙂
