Выпадающее меню без javascript

0 591

Категория: Ucoz » Меню для ucoz Опубликовал: DavGev Дата: 19.05.2013

Меню для ucoz - Выпадающее меню без javascript

Горизонтальное меню без использования js для ucoz. Меню не использует ни одной картинки, грузить сайт соответственно нечему. В любой момент можно легко настроить цвет, размер, структуру меню. Меню ucoz с подкатегориями.

Установка горизонтального меню:

В П.У - Дизаин - Управление дизайном(CSS):

*{
  margin:0;
  padding:0
}
#nav{
  font-size:0.7em;
  list-style-type:none;
  width:600px;
  height:25px;
  display:inline-block;
  background:#355C96;
  line-height:25px
}
  #nav li{
  float:left;
  width:120px;
  margin-top:-10000px
  }
  #nav li a{
  width:120px;
  text-decoration:none;
  text-align:center;
  color:#fff;
  position:relative;
  float:left;
  margin-right:-119px;
  margin-top:10000px
  }
  #nav li a:hover, #content #nav li a:focus, #content #nav li a:active{
  background:#DCE2FC;
  margin-right:0;
  color:#355C96
  }
  #nav li ul{
  background:#6286BD;
  float:left;
  margin-top:-25px;
  padding-top:25px;
  margin-bottom:-10000px;
  list-style-type:none
  }
  #nav li ul li{
  float:none;
  margin:0;
  width:auto
  }
  #nav li ul li a{
  float:none;
  display:block;
  margin:0;
  margin-right:-1px;
  background:#6286BD
  }

Этот код вставляем в то место, где хотите видеть меню, обычно это П.У - Дизаин - Управление дизайном - Верхняя часть сайта:

<ul id="nav">
  <li><a href="" title="">Главная</a></li>
  <li><a href="" title="">Шаблоны</a>
  <ul>
  <li><a href="" title="">Компьютеры</a></li>
  <li><a href="" title="">Мониторы</a></li>
  <li><a href="" title="">Комплектующие</a></li>
  </ul>
  </li>
  <li><a href="" title="">Скрипты</a>
  <ul>
  <li><a href="" title="">Меню для ucoz</a></li>
  <li><a href="" title="">Шапки для ucoz</a></li>
  <li><a href="" title="">Часы для ucoz</a></li>
  </ul>
  </li>
  <li><a href="" title="">Форум веб мастеров</a></li>
  <li><a href="" title="">Карта сайта</a></li>
  </ul>

Источник материала: Не указан.

Всего комментариев: 0