Готини вертикални менюта (2 част)

Автор: Fr33style

Продължение от ЧАСТ 1

Вижте първо първата част за да ви се изяснят нещата. Незабравяйте началният css код, който трябва да присъства във всеки css файл :

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

img {
border: none;
}

8 меню

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

#menu8 {
width: 200px;
margin: 10px;
border-style: solid;
border-color: #656556;
border-size: 1px;
border-width: 1px;
}

#menu8 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu8 li a:link, #menu8 li a:visited {
color: #656556;
display: block;
background: url(menu8.gif);
padding: 8px 0 0 20px;
}

#menu8 li a:hover {
color: #474739;
background: url(menu8.gif) 0 -32px;
padding: 8px 0 0 20px;
}

1. Трябва да изтеглите тази картинка и да я сложите в директорията на index файла ви menu8.gif
2. Сложете този код в index файла ви. Той е главното ви меню. Заместете Link 1, Link 2 с вашите идей за менюто, а след a href сложете линка .

<div id="menu8">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>

9 меню

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

#menu9 {
width: 200px;
margin: 10px;
}

#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(menu9.gif);
padding: 8px 0 0 35px;
}

#menu9 li a:hover {
color: #FFF;
background: url(menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}

1. Трябва да изтеглите тази картинка и да я сложите в директорията на index файла ви menu9.gif
2. Сложете този код в index файла ви. Той е главното ви меню. Заместете Link 1, Link 2 с вашите идей за менюто, а след a href сложете линка .

<div id="menu9">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>

10 меню

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

#menu10 {
width: 200px;
margin: 10px;
}

#menu10 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu10 li a:link, #menu10 li a:visited {
color: #4D4D4D;
display: block;
background: url(menu10.gif);
padding: 8px 0 0 10px;
}

#menu10 li a:hover {
color: #FF9834;
background: url(menu10.gif) 0 -32px;
padding: 8px 0 0 10px;
}

1. Трябва да изтеглите тази картинка и да я сложите в директорията на index файла ви menu10.gif
2. Сложете този код в index файла ви. Той е главното ви меню. Заместете Link 1, Link 2 с вашите идей за менюто, а след a href сложете линка .

<div id="menu10">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>

11 меню

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

#menu11 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #889944;
border-size: 1px;
border-width: 1px;
}

#menu11 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu11 li a:link, #menu11 li a:visited {
color: #889944;
display: block;
background: url(menu11.gif);
padding: 8px 0 0 25px;
}

#menu11 li a:hover {
color: #889944;
background: url(menu11.gif) 0 -32px;
padding: 8px 0 0 27px;
}

[ ]
2. Трябва да изтеглите тази картинка и да я сложите в директорията на index файла ви menu11.gif

3. Сложете този код в index файла ви. Той е главното ви меню. Заместете Link 1, Link 2 с вашите идей за менюто, а след a href сложете линка . <[CODE> <div id="menu11">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>

12 меню

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

#menu12 {
width: 200px;
margin: 10px;
}

#menu12 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
}

#menu12 li a:link, #menu12 li a:visited {
color: #666;
display: block;
background: url(menu12.gif);
padding: 10px 0 0 35px;
}

#menu12 li a:hover {
color: #000;
background: url(menu12.gif) 0 -32px;
padding: 10px 0 0 35px;
}

1. Трябва да изтеглите тази картинка и да я сложите в директорията на index файла ви menu12.gif
2. Сложете този код в index файла ви. Той е главното ви меню. Заместете Link 1, Link 2 с вашите идей за менюто, а след a href сложете линка .

<div id="menu12">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>

13 меню

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

#menu13 {
width: 200px;
margin: 10px;
}

#menu13 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu13 li a:link, #menu13 li a:visited {
color: #C7377D;
display: block;
background: url(menu13.gif);
padding: 8px 0 0 10px;
}

#menu13 li a:hover {
color: #C7377D;
background: url(menu13.gif) 0 -32px;
padding: 8px 0 0 10px;
}

1. Трябва да изтеглите тази картинка и да я сложите в директорията на index файла ви menu13.gif
2. Сложете този код в index файла ви. Той е главното ви меню. Заместете Link 1, Link 2 с вашите идей за менюто, а след a href сложете линка .

<div id="menu13">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>

14 меню

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

#menu14 {
width: 200px;
margin: 10px;
}

#menu14 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu14 li a:link, #menu14 li a:visited {
color: #333;
display: block;
background: url(menu14.gif);
padding: 8px 0 0 10px;
}

#menu14 li a:hover {
color: #FFF;
background: url(menu14.gif) 0 -32px;
padding: 8px 0 0 10px;
}

1. Трябва да изтеглите тази картинка и да я сложите в директорията на index файла ви menu14.gif
2. Сложете този код в index файла ви. Той е главното ви меню. Заместете Link 1, Link 2 с вашите идей за менюто, а след a href сложете линка .

<div id="menu14">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>