Как сделать красивое горизонтальное меню для uCoz?

17.02.2013 Скрипты для uCoz 7059 kav-kaz

В прошлый раз я делился с вами синим вертикальным меню для вашего сайта. Оно было выполнено очень просто и без особых излишеств. Ведь я только-только учусь создавать свои элементы с помощью css и html.

Сегодня я решил использовать готовое горизонтальное меню, немного его изменив. А так же, решил объяснить некоторые детали, чтобы каждый мог создать меню под свои нужды и разобраться с установкой, а не гулял по просторам Интернета в поисках нужного элемента дизайна. И так , приступим.

Для начала пропишем html код в нужном месте для горизонтального меню. Html код почти всегда будет одинаков, а менять его будем при помощи таблицы стилей. Сам код представлен ниже

Код

<div id="top">
  <nav>
  
<div id="uMenuDiv1" class="uMenuV" style="position:relative;"><ul class="uMenuRoot">
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/"><span>Меню</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="http://uworld.su/load/"><span>для uCoz</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="http://uworld.su/news/"><span>от uWorld.su</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="/index/0-3"><span>Контакты</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li>
<li><div class="umn-tl"><div class="umn-tr"><div class="umn-tc"></div></div></div><div class="umn-ml"><div class="umn-mr"><div class="umn-mc"><div class="uMenuItem"><a href="http://uworld.su/forum/"><span>красивое:)</span></a></div></div></div></div><div class="umn-bl"><div class="umn-br"><div class="umn-bc"><div class="umn-footer"></div></div></div></div></li></ul></div>
  
  </nav>
  </div>

Важно. Если мы хотим, чтобы выделялась активная ссылка, то есть ссылка открытая в нужном разделе (например в меню - это "Главная страница" и мы находимся на "Главной странице" нашего сайта и хотим, чтобы меню уже подсветило данный элемент), то необходимо в сам скрипт добавить код перед тегом < ! -- -- > :

Код

На этом наши работы с html закончены. Осталось настроить таблицу стилей для uCoz cайта. Можно пойти двумя вариантами, добавить ниже предоставленный код сразу после/перед кодом html меню, поставив тег < style > , но лучше отправить в отдельную таблицу стилей, зайти в неё просто (панель управления ->дизайн -> каскадная таблица стилей):

Код

#top {
  font: 12px/20px 'Arial';
  background: #fff;
  color: #848383;
  height: 32px;
  border-bottom: 4px solid #303030;
  background: #ff0000; /*Цвет фона + использован градиет, так что подбирайте цвета и не забывайте всюду заменить данный код в данном блоке ниже (код = код цвета*/
  background: -moz-linear-gradient(top, #ff0000 0%, #ff2300 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#ff2300));
  background: -webkit-linear-gradient(top, #ff0000 0%,#ff2300 100%);
  background: -o-linear-gradient(top, #ff0000 0%,#ff2300 100%);
  background: -ms-linear-gradient(top, #ff0000 0%,#ff2300 100%);
  background: linear-gradient(to bottom, #ff0000 0%,#ff2300 100%);
}
nav ul li a.uMenuItemA, nav ul li a:hover {
  background: #000000;
  background: -moz-linear-gradient(top, #000000 0%, #303030 30%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(30%,#303030));
  background: -webkit-linear-gradient(top, #000000 0%,#303030 30%);
  background: -o-linear-gradient(top, #000000 0%,#303030 30%);
  background: -ms-linear-gradient(top, #000000 0%,#303030 30%);
  background: linear-gradient(to bottom, #000000 0%,#303030 30%);
}

nav {
  width: 800px;
  margin: 0 auto;
} /*Определяем область под меню*/
nav ul, nav li {
  padding: 0;
  margin: 0;
}
  /*отступы зануляем - можно убрать*/
nav ul li {
  float: left;
  list-style-type: none;
  margin-right: 3px;
}
nav ul li a {
  display: block;
  line-height: 32px;
  padding: 0 20px;
  color: #fff !important;
  text-transform: uppercase;
  text-decoration: none !important;
}

Смотрите также:

Оставить комментарий