Войти на сайт Регистрация
Добавить файлВ каталоге: 678
Горизонтальное меню для uCoz
19.11.2018
Горизонтальное меню для uCoz
  • 942 Просмотров:
  • 0 Скачиваний:
  • 0 Комментариев:
  • 0.0 Рейтинг:
  • (Голосов: 0)
Описание:
Красивое горизонтальное меню для uCoz. Меню выполнено в светлых тонах, а снизу под меню присутствует зеленый кружок. При наведении на меню, оно окрашивается в салатовый цвет, а иконка снизу становиться синей.

Установка:

1. В верхнюю часть сайта кидаем:

Код
<div id="head_bot">
  <ul>
  <li><div><a href="/">Главная</a></div></li>
  <li><div><a href="/forum/">Форум</a></div></li>
  <li><div><a href="/load/">Шаблоны</a></div></li>
  <li><div><a href="/publ/">Скрипты</a></div></li>
  <li><div><a href="/blog/8">SEO статьи</a></div></li>
  <li><div><a href="http://7old.ru/">Набор модераторов</a></div></li>
  </ul>
</div>


2. В CSS кидаем код:

Код
#header #head_bot {
  width:1001px;
  height:71px;
  background:url(http://7old.ru/ucoz-files/1/head_bot.png) no-repeat 0 0;
  margin:32px auto 0 auto;
}

#header #head_bot ul {
  float:left;
  margin:0;
  padding:16px 0 0 18px;
}

#header #head_bot ul li {
  display:block;
  float:left;
  height:39px;
  margin-right:8px;
}

#header #head_bot ul li div a {
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  background:#f3f3f3;
  font-family:"calibrii";
  font-size:12px;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  line-height:22px;
  text-align:center;
  padding:6px 8px 5px 8px;
}

#header #head_bot ul li div {
  background:url(http://7old.ru/ucoz-files/1/head_bot_menu.png) no-repeat center 28px;
  height:39px;
}

#header #head_bot ul li div:hover a {
  background:url(http://7old.ru/ucoz-files/1/head_bot.png) repeat-x 0 0;
  box-shadow:0 3px 0 0 #eef3e7;
  -webkit-box-shadow:0 3px 0 0 #eef3e7;
  -moz-box-shadow:0 3px 0 0 #eef3e7;
  text-shadow:1px 1px 0 #739f33;
  color:#fff;
  overflow:hidden;
}

#header #head_bot ul li div:hover {
  cursor:pointer;
  background:url(http://7old.ru/ucoz-files/1/head_bot_menu_.png) no-repeat center 28px;
}


На этом всё.
Горизонтальное меню для uCoz" title="Скачать Горизонтальное меню для uCoz бесплатно, без смс и регистрации" target="_blank">Сервер Скачать файл
Источник: 7OLD.RU
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]