Каталог файлов

Главная » Файлы » Меню » Вертикальное

Вертикальное выпадающее меню на CSS 3


Вставьте туда где будет располагаться ваше меню:
Код
<a href="#" class="menu_sep" tabindex="1">Главная</a>  
<div class="menu_sep" tabindex="1">Каталог файлов<br><br>
<a href="#" class="silka_sep">Ссылка1</a>
<a href="#" class="silka_sep">Ссылка2</a>
<a href="#" class="silka_sep">Ссылка3</a>
<a href="#" class="silka_sep">Ссылка4</a></div>
<div class="menu_sep" tabindex="1">Каталог статей<br><br>
<a href="#" class="silka_sep">Ссылка1</a>
<a href="#" class="silka_sep">Ссылка2</a>
<a href="#" class="silka_sep">Ссылка3</a>
<a href="#" class="silka_sep">Ссылка4</a></div>
<div class="menu_sep" tabindex="1">Блог<br><br>
<a href="#" class="silka_sep">Ссылка1</a>
<a href="#" class="silka_sep">Ссылка2</a></div>
<a href="#" class="menu_sep" tabindex="1">Видео</a>
Вставьте в таблицу стилей CSS:
Код
.menu_sep {background: #ffffff; font: 15px Verdana;border-radius: 2px;display: block;
  padding: 5px;
  box-shadow: 0 0 5px #000000;  
  width: 100%;
  margin: 3px;
  cursor: default;
  height: 18px;
  overflow: hidden;
  -ms-transition-property: background ;
  -ms-transition-duration: 0.2s;
  -ms-transition-timing-function: linear;
  -o-transition-property: background ;
  -o-transition-duration: 0.2s;
  -o-transition-timing-function: linear;
  -moz-transition-property:background ;
  -moz-transition-duration: 0.2s;
  -moz-transition-timing-function: linear;
  -webkit-transition-property: background ;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
}
.menu_sep:link { text-decoration: none; color: #000;}
.menu_sep:visited { text-decoration: none; color: #000;}
.menu_sep:hover {background: #ECECEC;
width1: 97%;cursor: default;
}
.menu_sep:focus {background: #ECECEC;
width1: 97%;
height: auto;
cursor: default;
outline: none;
}
.silka_sep {
display: block;text-decoration: none;padding: 4px;margin-bottom: 2px;width: 90%;
border-radius: 4px;border: 1px solid #B4B4B4;
  -webkit-transition-property: margin text-shadow;-webkit-transition-duration: 0.2s;-webkit-transition-timing-function: linear;
  -moz-transition-property: margin text-shadow;-moz-transition-duration: 0.2s;-moz-transition-timing-function: linear;
  -o-transition-property: margin text-shadow;-o-transition-duration: 0.2s;-o-transition-timing-function: linear;
  -ms-transition-property: margin text-shadow;-ms-transition-duration: 0.2s;-ms-transition-timing-function: linear;}
.silka_sep:link {text-decoration:none; background: #fff; color: #000;}
.silka_sep:visited {
text-decoration: none;background: #fff; color: #000;
}
.silka_sep:hover {
text-decoration: none;margin-left1: 10px;text-shadow1: 0 0 1px #000; color: #c9c9c9;
}



Поддержка браузеров   

Категория: | | 2371 | 0 | Дата: 29/07/2026
Всего комментариев: 0
Имя *:
Email:



Код *:

Copyright MyCorp © 2012-2026