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

Темное горизонтальное меню GERATEN для ucoz

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

Код:

Код
<ul id=»nav»>
  <li><a href=»#»>Главная</a></li>
  <li><a href=»http://zornet.ru/»>ZORNET.RU</a>
<li><a href=»#»>Скрипты для ucoz</a></li>
  <li><a href=»#»>Шаблоны сайта</a>
  <li><a href=»#»>Обратная связь</a></li>
  <li><a href=»#»>Форум сайта</a>
  <li><a href=»#»>О сайте</a></li>
</ul>

CSS:

Код
#nav
  background: #e5e5e5;
  float: left;
  margin: 0; padding: 0;
  border: 1px solid black;
  border-bottom: none;

#nav li a, #nav li
  float: left;

   
#nav li
  list-style: none;
  position: relative;

   
#nav li a
  padding: 1em 2em;
  text-decoration: none;
  color: white;
  background: #292929;
  background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
  background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
  border-right: 1px solid #3c3c3c;
  border-left: 1px solid #292929;
  border-bottom: 1px solid #232323;
  border-top: 1px solid #545454;

   
#nav li a:hover
  background: #2a0d65;
  background: -moz-linear-gradient(top, #11032e, #2a0d65);
  background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));

   
/* Submenu */
   
.hasChildren
  position: absolute;
  width: 5px; height: 5px;
  background: black;
  right : 0;
  bottom: 0;

   
#nav li ul
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0; margin: 0;

   
#nav li:hover > ul
  display: block;

   
#nav li ul li, #nav li ul li a
  float: none;

   
#nav li ul li
  _display: inline; /* for IE6 */

   
#nav li ul li a
  width: 150px;
  display: block;

   
/* SUBSUB Menu */
   
#nav li ul li ul
  display: none;

   
#nav li ul li:hover ul
  left: 100%;
  top: 0;

   
#nav li ul

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

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