Вертикальное меню HTML и CSS

Автор Damir-Tote. Опубликовано в Блог, Все о Блогспот

            Приветствую Вас читатели блога damirtote.ru! В этой статье вы получите множество вариантов вертикального меню сооруженного только с помощью кода HTML и стилей CSS. На самом деле месяца два назад я пробовал как-то программу, где можно было взять готовое вертикальное меню. Необходимо было выбрать вертикальное меню и скопировать просто готовый код и вставить, но не получилось совместить его с Blogger. А представленные ниже коды сделаны вполне совместимо с Blogger. Теперь можно легко установить любое вертикальное меню HTML и CSS, ведь их легко установить и настроить.
Вертикальное меню

     Как добавить вертикальное меню HTML и CSS

 
            Конечно, и этот процесс установки не столь прост, это в первую очередь касается новичков. Но если просто аккуратно выполните следующие шаги, то затруднений не должно возникнуть, как добавить вертикальное меню.
 
Шаг 1. Перейти к BloggerШаблонИзменить HTMLПриступить. Не забываем делать резервное копирование шаблона.
 
            В вертикальном меню навигации используется две части кода. Один CSSкод, который отвечает за внешний вид меню и второй HTML код, который отвечает за позиционирование меню. Поэтому опишу, куда вставить CSS код, а куда HTML код, если вы решили создать веб сайт своими руками, не прибегая только к шаблонам Blogger.
 
Шаг 2. Найдите с помощью поиска Ctrl+Fкод ]]></b:skin> м вставьте перед ним код CSS.
 
Шаг 3. HTML код вставляете либо в шаблон, где располагается ваш сайдбар или с помощью HTML/JavaScript гаджета. В шаблоне ниже кода <div id=’sidebar-wrapper’>  вставляем один из вариантов.
  • <divid=’sidebarwrapperright‘> — правый сайдбар в шаблоне блога;
  • <divid=’sidebarwrapperleft‘> — левый сайдбар в шаблоне блога.
 
            Так как большинство шаблонов используют различные кодировки, поэтому, если вы не смогли найти код сайдбара, то стоит его найти самому, хотя бы методом тыка. Проще всего его найти в коде, если знаете, где находится шапка вашего кода, вот ниже и начинается сайдбар как раз.
 

            Варианты вертикального меню

 
Шаг 4. Сохраняем шаблон и посмотрите, что у Вас получилось. Естественно не забудьте меню, ссылки и заголовки отредактировать под свой блог.
 
Вариант 1.

Вертикальное меню
CSS код:
 
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7zmvMfQI/AAAAAAAACrQ/herewFa4gNQ/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7zmvMfQI/AAAAAAAACrQ/herewFa4gNQ/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

HTML код:

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

 

Вариант 2.

Вертикальное меню
CSS код:

#menu3
 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border:
none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; }
#menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica,
sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background:
#FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li
a:visited { color: #888; display: block; background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze6a84WulI/AAAAAAAACpw/o1vXeHb6wnw/s800/menu3.gif);
padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3
li a:active { color: #283A50; background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze6a84WulI/AAAAAAAACpw/o1vXeHb6wnw/s800/menu3.gif)
0 -32px; padding: 8px 0 0 30px; }
 
HTML код:
 
<div id="menu3"> <ul> <li><a href="#1">Link 
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 

Вариант 3.

Вертикальное меню
CSS код:
 
#menu9
ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border:
none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height:
32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;
font-size: 10pt; font-weight: bold; background: #FFF; height: 24px;
text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color:
#FFF; display: block; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze74hbQVSI/AAAAAAAACro/preFOt7muGA/s800/menu9.gif);
padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze74hbQVSI/AAAAAAAACro/preFOt7muGA/s800/menu9.gif)
0 -32px; padding: 8px 0 0 35px; }
 
HTML код:
 
<div id="menu9"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 4.

Вертикальное меню
CSS код:
 
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img {
border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a {
height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:
24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited {
color: #8D9179; display: block; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/yAWa9ZgZMPU/s800/menu6.gif);
padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6
li a:active { color: #6C7250; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/yAWa9ZgZMPU/s800/menu6.gif)
0 -32px; padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu6"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
 
Вариант 5.

Вертикальное меню
CSS код:
 
#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img {
border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a {
height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:
24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited {
color: #fff; display: block; background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s800/menu14.gif)
0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333;
background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s800/menu14.gif);
padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu14"> <ul> <li><a href="#1">Link 
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
 
Вариант 6.

Вертикальное меню
CSS код:
 
#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img {
border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a {
height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:
24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited {
color: #FFF; display: block; background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze71ba8QDI/AAAAAAAACrY/MPJLHCcZc2g/s800/menu7.gif);
padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze71ba8QDI/AAAAAAAACrY/MPJLHCcZc2g/s800/menu7.gif)
0 -32px; padding: 8px 0 0 30px; }
 
HTML код:

<div id="menu7"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
 
Вариант 7.

Вертикальное меню
CSS код:
 
#menu2
ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border:
none; } #menu2 { width: 200px; border-style: solid solid none solid;
border-color: #677D92; border-size: 1px; border-width: 1px; margin:
10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial,
Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold;
background: #FFF; height: 24px; text-decoration: none; } #menu2 li
a:link, #menu2 li a:visited { color: #fff; display: block; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Du-c/s800/menu2.gif);
padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color:
#283A50; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Du-c/s800/menu2.gif)
0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50;
background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Du-c/s800/menu2.gif)
0 -64px; padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu2"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
 
Вариант 8.

Вертикальное меню
CSS код:
 
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img {
border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a {
height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:
24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited {
color: #E5E8D4; display: block; background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif);
padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color:
#725033; background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif)
0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff;
background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif)
0 -64px; padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu9"> <ul> <li><a href="#1">Link 
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 9.

Вертикальное меню
CSS код:
 
#menu12
ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border:
none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height:
32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;
font-size: 10pt; font-weight: bold; background: #FFF; height: 22px;
text-decoration: none; } #menu12 li a:link, #menu12 li a:visited {
color: #666; display: block; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif);
padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif)
0 -32px; padding: 10px 0 0 35px; }
 
HTML код:
 
<div id="menu12"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 10.

Вертикальное меню
CSS код:
 
#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img {
border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a {
height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:
24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited {
color: #C7377D; display: block; background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze7_lAyz9I/AAAAAAAACsI/2kHgX_EVeow/s800/menu13.gif);
padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D;
background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze7_lAyz9I/AAAAAAAACsI/2kHgX_EVeow/s800/menu13.gif)
0 -32px; padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu13"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 

Вариант 11.

Вертикальное меню
CSS код:
 
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { 
border: none; } #menu4 { width: 200px; border-style: solid solid none
solid; border-color: #D76100; border-size: 1px; border-width: 1px;
margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial,
Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold;
background: #FFF; height: 24px; text-decoration: none; } #menu4 li
a:link, #menu4 li a:visited { color: #9E3C02; display: block;
background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6fxCdMLI/AAAAAAAACp4/XQPhnSUOmYs/s800/menu4.gif);
padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color:
#fff; background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6fxCdMLI/AAAAAAAACp4/XQPhnSUOmYs/s800/menu4.gif)
0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff;
background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6fxCdMLI/AAAAAAAACp4/XQPhnSUOmYs/s800/menu4.gif)
0 -64px; padding: 8px 0 0 30px; }
 
HTML код:
 
<div id="menu4"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 12.

Вертикальное меню
CSS код:
 
#navlist
{ color: white; background: #17a; border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width:
12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style:
none; margin: 0; font-size: 1em; } #navlist a { display: block;
text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color:
white; background: #39c; border-width: 1px; border-style: solid;
border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding:
0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd
#035 #068 #f30; } #navlist a { width: 99%; /* only necessary for
Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family:
inherit; width: 9.6em; /* Tantek-hack should only used if
Internet-Explorer 6 is in standards-compliant mode */ }
#navcontainer>#navlist a { width: auto; /* only necessary if you use
the hacks above for the Internet Explorer */ } #navlist a:hover,
#navlist a#current:hover { background: #28b; border-color: #069 #6cf
#5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active,
#navlist a#current:active { background: #17a; border-color: #069 #6cf
#5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }
 
HTML код:
 
<div id="navcontainer"> <ul id="navlist"> <li><a
href="#1">Link 1</a></li> <li><a
href="#2">Link 2</a></li> <li><a
href="#3">Link 3</a></li> <li><a
href="#4">Link 4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 13.

Вертикальное меню
CSS код:
 
#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { 
border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a {
text-decoration: none; height: 32px; font-family: Verdana, Arial,
Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold;
background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited {
color: #777; display: block; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6vCsjMXI/AAAAAAAACqY/iRErP3OUIiE/s800/menu8.gif);
padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color:
#257EB7; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6vCsjMXI/AAAAAAAACqY/iRErP3OUIiE/s800/menu8.gif)
0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff;
background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6vCsjMXI/AAAAAAAACqY/iRErP3OUIiE/s800/menu8.gif)
0 -64px; padding: 8px 0 0 25px; }
 
HTML код:
 
<div id="menu8"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
Вариант 14.

Вертикальное меню
CSS код:
 
#menu8
ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border:
none; } #menu8 { width: 200px; margin: 10px; border-style: solid;
border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a
{ height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:
24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited {
color: #656556 ; display: block; background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze73NFcouI/AAAAAAAACrg/jhptyKy73yg/s800/menu8.gif)
; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739;
background:
url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze73NFcouI/AAAAAAAACrg/jhptyKy73yg/s800/menu8.gif)
0 -32px; padding: 8px 0 0 20px; }
 
HTML код:
 
<div id="menu8"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 15.

Вертикальное меню
CSS код:
 
#menu9
body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;
font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul {
list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; }
#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; font-family: Verdana, Arial, Helvetica,
sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background:
#FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li
a:visited { color: #E4D6CD; display: block; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7kFpTupI/AAAAAAAACqo/c2Bn0V6oL38/s800/menu1.gif);
padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7kFpTupI/AAAAAAAACqo/c2Bn0V6oL38/s800/menu1.gif)
0 -32px; padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu1"> <ul> <li><a href="#1">Link 
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 16.

Вертикальное меню
CSS код:
 
#navcontainer
{ background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0;
font-family: georgia, serif; font-size: 13px; text-align: center;
text-transform: lowercase; } ul#navlist { text-align: left; list-style:
none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display:
block; margin: 0; padding: 0; } ul#navlist li a { display: block;
width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777;
text-decoration: none; background: #f7f2ea; }
#navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a
{ background: #f0e7d7; color: #800000; } ul#navlist li a:hover,
ul#navlist li#active a:hover { color: #800000; background: transparent;
border-color: #aaab9c #fff #fff #ccc; }
 
HTML код:
 
<div id="navcontainer"> <ul id="navlist"> <li><a
href="#1">Link 1</a></li> <li><a
href="#2">Link 2</a></li> <li><a
href="#3">Link 3</a></li> <li><a
href="#4">Link 4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 17.

Вертикальное меню
CSS код:
 
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img {
border: none; } #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; font-family: Verdana,
Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight:
bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li
a:link, #menu3 li a:visited { color: #8BADCF; display: block;
background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7tGEpoOI/AAAAAAAACq4/S0ZV4ChMjyg/s800/menu3.gif);
padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7;
background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7tGEpoOI/AAAAAAAACq4/S0ZV4ChMjyg/s800/menu3.gif)
0 -32px; padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu3"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 18.

Вертикальное меню
CSS код:
 
#menu11
ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border:
none; } #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; font-family: Verdana, Arial, Helvetica,
sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background:
#FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11
li a:visited { color: #889944; display: block; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze78f0F6lI/AAAAAAAACr4/FJiv57hTmXc/s400/menu11.gif);
padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944;
background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze78f0F6lI/AAAAAAAACr4/FJiv57hTmXc/s400/menu11.gif)
0 -32px; padding: 8px 0 0 27px; }
 
HTML код:
 
<div id="menu11"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 19.

Вертикальное меню
CSS код:
 
#button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em
0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif;
/*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
font-size : 10px; background-color: #90bade; color: #333; } #button ul {
list-style: none; margin: 0; padding: 0; border: none; } #button li {
border-bottom: 1px solid #90bade; margin: 0; list-style: none;
list-style-image: none; } #button li a { display: block; padding: 5px
5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid
#508fc4; background-color: #2175bc; color: #fff; text-decoration: none;
width: 100%; } html>body #button li a { width: auto; } #button li
a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid
#5ba3e0; background-color: #2586d7; color: #fff; } #button li #active {
border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0;
background-color: #2586d7; color: #fff; }
 
HTML код:
 
<div id="button"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 

Вариант 20.

Вертикальное меню
CSS код:
 
#menu
ul { list-style: none; margin: 0; padding: 0; } #menu img { border:
none; } #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; font-family: Verdana, Arial,
Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold;
background: #FFF; height: 24px; text-decoration: none; } #menu li
a:link, #menu li a:visited { color: #5E7830; display: block; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/menu1.gif);
padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color:
#26370A; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/menu1.gif)
0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A;
background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/menu1.gif)
0 -64px; padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 21.

Вертикальное меню
CSS код:
 
#menu2
ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border:
none; } #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; font-family: Verdana, Arial, Helvetica,
sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background:
#FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li
a:visited { color: #3688BA; display: block; background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7rt53jHI/AAAAAAAACqw/hHM-78iwjzI/s800/menu2.gif);
padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA;
background:
url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7rt53jHI/AAAAAAAACqw/hHM-78iwjzI/s800/menu2.gif)
0 -32px; padding: 8px 0 0 32px; }
 
HTML код:
 
<div id="menu2"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 22.

Вертикальное меню
CSS код:
 
#menu5
ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border:
none; } #menu5 { width: 200px; border-style: none solid none solid;
border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a {
height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:
24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited {
color: #777; display: block; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6h5GM5nI/AAAAAAAACqA/ukLum90DRAs/s800/menu5.gif);
padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover,
#menu5 li #current { color: #fff; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6h5GM5nI/AAAAAAAACqA/ukLum90DRAs/s800/menu5.gif)
0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li
a:active { color: #fff; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6h5GM5nI/AAAAAAAACqA/ukLum90DRAs/s800/menu5.gif)
0 -64px; padding: 8px 25px 0 10px; text-align: right; }
 
HTML код:
 
<div id="menu5"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 23.

Вертикальное меню
CSS код:
 
#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img {
border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a {
height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:
24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited {
color: #FFF; display: block; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7yOQyjyI/AAAAAAAACrI/h0YliokmD28/s800/menu5.gif);
padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7yOQyjyI/AAAAAAAACrI/h0YliokmD28/s800/menu5.gif)
0 -32px; padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu5"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 24.

Вертикальное меню
CSS код:
 
#menu4
ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border:
none; } #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; font-family: Verdana, Arial, Helvetica,
sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background:
#FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li
a:visited { color: #CCC; display: block; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s800/menu4.gif);
padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background:
url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s800/menu4.gif)
0 -32px; padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu4"> <ul> <li><a href="#1">Link
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>
 
Вариант 25.

Вертикальное меню
CSS код:
 
#menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img {
border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a {
height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:
24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited {
color: #4D4D4D; display: block; background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze76mVADoI/AAAAAAAACrw/wjRC9Z4jrP4/s800/menu10.gif);
padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834;
background:
url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze76mVADoI/AAAAAAAACrw/wjRC9Z4jrP4/s800/menu10.gif)
0 -32px; padding: 8px 0 0 10px; }
 
HTML код:
 
<div id="menu10"> <ul> <li><a href="#1">Link 
1</a></li> <li><a href="#2">Link
2</a></li> <li><a href="#3">Link
3</a></li> <li><a href="#4">Link
4</a></li> <li><a
href="#5">Link5</a></li> </ul> </div>

Трекбэк с Вашего сайта.

  • a1987zz

    Одни ошибки крутое меню

    • Код подправил

      • Туроп

        и что … тыкаешь на кнопки и ничего не происходит ? зачем такое меню и как его уже сделать … цвет поменять если это возможно тоже хотелось бы знать 🙂

.