вРазные полезности

Горизонтальное меню в темных тонах для сайта

 
Представляю вам по своему оригинальное темное меню для сайта ucoz. Меню по своему дизайну подойдет как светлым так и темным сайтам. Но красивей оно будит смотреться на светлом дизайне. Так же у меню есть под меню при нажатие которые выскакивают, или выезжают с разделами которые вы прописали. Это хорошо для пользователя который все на главной странице найдет и определится куда где и что искать. Само под меню синего а не темного цвета.
Устанавливаем вверх сайта в самый низ его.

Код
<style>
#menu
/* — Фон меню —*/
background: #4d4d4d;
border-bottom: 1px solid #abacad;
/* — Высота меню —*/
height: 37px;
margin-bottom: 15px;
/* — Размер шрифта меню —*/
font-size: 16px;
/* — Закругляем углы —*/
-ms-border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
/* — Добаляем тени —*/
-ms-box-shadow: 0px 2px 2px #DDDDDD;
-o-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;

#menu ul
list-style: none;
margin: 0;
padding: 0;

#menu > ul > li
position: relative;
float: left;
z-index: 20;
  
#menu > ul > li:hover
/* — Цвет фона ссылок подменю —*/
background: #535353;

#menu > ul > li > a
/* — Размер шрифта подменю —*/
font-size: 15px;
/* — Цвет ссылок подменю —*/
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
/* — Отступы подменю —*/
padding: 12px 15px 11px 15px;
z-index: 6;
position: relative;

#menu > ul > li > div
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #034281;
-o-border-radius: 0px 0px 5px 5px;
-ms-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url(‘http://zornet.ru/ZORNET-RU/dsgvm.png’);

#menu > ul > li:hover > div
display: table;

#menu > ul > li > div > ul
display: table-cell;

#menu > ul > li ul + ul
padding-left: 20px;

#menu > ul > li ul > li > a
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;

#menu > ul > li ul > li > a:hover
background: #638aff;

#menu > ul > li > div > ul > li > a
color: #FFFFFF;

</style>
<div id=»menu»>
<ul>
<li>
<a href=»#»>Главная</a>
<div>
<ul>
<li><a href=»#»>Скрипты для uCoz</a></li>
<li><a href=»#»>Фоны</a></li>
<li><a href=»#»>Справочник CSS3</a></li>
<li><a href=»#»>Полезные ресурсы</a></li>
<li><a href=»#»>Финал</a></li>
</ul>
</div>
</li>
<li><a href=»#»>Генератор меню</a>
</li>
<li><a href=»#»>Генератор градиентов</a>
</li>
<li><a href=»#»>Контакты</a>
<div>
<ul>
<li><a href=»#»>Е — майл</a></li>
<li><a href=»http://zornet.ru/»>Сайт</a></li>
<li><a href=»#»>Страница соц сети</a></li>
<li><a href=»#»>Местоположение</a></li>
</ul>
</div>
</li>
</ul>
</div>

источник: zornet.ru

Похожие посты