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

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

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


Вставить туда где будет ваше меню:
Код
<a href="#" class="win-s">Ссылка меню</a>  
<a href="#" class="win-s">Ссылка меню</a>  
<div class="win-s" tabindex="1">Выпадающий пункт<br><br>
<a href="#" class="win-s_p">Ссылка1</a>
<a href="#" class="win-s_p">Ссылка2</a>
<a href="#" class="win-s_p">Ссылка3</a>
<a href="#" class="win-s_p">Ссылка4</a></div>
<div class="win-s" tabindex="1">Выпадающий пункт<br><br>
<a href="#" class="win-s_p">Ссылка1</a>
<a href="#" class="win-s_p">Ссылка2</a>
<a href="#" class="win-s_p">Ссылка3</a>
<a href="#" class="win-s_p">Ссылка4</a></div>
<div class="win-s" tabindex="1">Выпадающий пункт<br><br>
<a href="#" class="win-s_p">Ссылка1</a>
<a href="#" class="win-s_p">Ссылка2</a>


Вставить в таблицу стилей css:
Код
.win-s {background:rgba(0,0,0, 0.2); font: 15px Verdana;border-radius: 2px;display: block;
  padding: 6px;
  box-shadow: 0 0 10px rgba(0,0,0, 0.2);  
  width: 90%;
  margin-bottom: 3px;
  cursor: default;
  height: 18px;
  overflow: hidden;
  color: #CFCFCF;
  -webkit-transition: 0.1s linear color, 0.2s linear text-shadow;
}
.win-s:link { text-decoration: none; color: #CFCFCF;}
.win-s:visited { text-decoration: none; color: #CFCFCF;}
.win-s:hover {color: #fff; text-shadow: 0 0 2px #fff;}
.win-s:focus {color: #fff; text-shadow: 0 0 2px #fff; height: auto;cursor: default;outline: none;}
.win-s_p {font:14px Arial; font-weight: bold;background: rgba(255,255,255, 0.1); display: block; margin-bottom: 3px;padding: 4px;border-radius: 2px;-webkit-transition: 0.3s linear color;}
.win-s_p:link {text-decoration: none;color: #fff;}
.win-s_p:active {text-decoration: none;color: #fff;}
.win-s_p:visited {text-decoration: none;color: #fff;}
.win-s_p:hover {text-decoration: none;color: #FF130F;text-shadow: none;}

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



Код *:

Copyright MyCorp © 2012-2026