Готини вертикални менюта (1 част) – Web-Tourist.net

Webmaster общности: Predpriemach.com | SearchEngines.bg

CSS

Сходни публикации

Лепкав хедър със скролиране.

Tooltip без jQuery/Javascript

Background image – Създаване на линк

html css уроци

Автор: Fr33style

Ще ви предоставя голям избор от CSS вертикални меюта !

Създайте си някакъв css файл например с име style.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;
}

Този код трябва да присъства в началото на всеки css файл. Оттука нататък ще слагаме вътре само кода за съответното меню.

1 меню

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

#menu1 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #3D261D;
border-size: 1px;
border-width: 1px;
}

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

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

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

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

<div id="menu1">
<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>

2 меню

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

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

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

#menu2 li a:link, #menu2 li a:visited {
color: #3688BA;
display: block;
background: url(menu2.gif);
padding: 8px 0 0 30px;
}

#menu2 li a:hover {
color: #3688BA;
background: url(menu2.gif) 0 -32px;
padding: 8px 0 0 32px;
}

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

<div id="menu2">
<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>

3 меню

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

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

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

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

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

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

<div id="menu3">
<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>

4 меню

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

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

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

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

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

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

<div id="menu4">
<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>

5 меню

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

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

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

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

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

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

<div id="menu5">
<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>

6 меню

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

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

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

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

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

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

<div id="menu6">
<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>

7 меню

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

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

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

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

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

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

<div id="menu7">
<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>

web-tourist

ВИЖТЕ ВСИЧКИ СТАТИИ

предишнаМного добро вертикално меню

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

Оставете коментар Cancel Reply

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