ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вертикальное меню под категорий сайта uCoz

Вертикальное меню под категорий сайта uCoz

Представляю вам 3 оттенка цветовой гаммы Вертикальное меню под категорий сайта uCoz где они все отлично считаются. Безусловно можно сказать, что черная гамма это основа и идет по умолчанию на ресурс ближе к этому оттенку. Когда вы наводите курсор, по все быстро меняется и высвечивается уже как обвод, который чисто белый и в нем серый, где и написано рубрика. Больше похоже на разделы, которые у кого стоят на сайте, но больше их убирают как лишний модуль. Но как навигация для идентичного по оттенку создано оно, что можно посмотреть как представление ниже. Также для вас будет DEMO и там вы оцените скрипт в реальности, как он может подойти и куда в плане тематической направленности.

Каркас:

Код

<div id="menu-block">

<ul class="vertical-menu">
<li><a href="http://zornet.ru" class="uMenuItemA">Главная страница</a></li>
<li><a href="http://zornet.ru/news">Новости кино</a></li>
<li><a href="http://zornet.ru/gb">Скрипты сайта</a></li>
<li><a href="http://zornet.ru/news">Шаблоны сайта</a></li>
<li><a href="/">ZORNET.RU</a></li>
<li><a href="/">Все для uCoz</a></li>
<li><a href="/">Коды для uCoz</a></li>
<li><a href="/">Связаться с нами</a></li>
</ul>

</div>

CSS:

Код

#menu-block {padding:2px; margin:0;}
/*стили всего блока меню, пунктов и ссылок*/
  .vertical-menu {
  display: block;
  background: url("http://zornet.ru/CSS-ZORNET/Grety/Menu-1/content.png") 50% 0% repeat-y transparent;
  padding: 0px;
  margin: 0;
  border-radius: 5px;
  width: 200px;}

  .vertical-menu li {
  position: relative;
  list-style: none;
  outline: none;
  background: #252525;
  padding: 5px;
  margin: 5px 0;
  border-radius: 5px;
  border: 1px solid #252525;
  }

  .vertical-menu li:hover {
  position: relative;
  list-style: none;
  outline: none;
  background: #4a4a4a;
  border-radius: 5px;
  padding: 5px;
  margin: 5px 0;
  border: 1px solid #fff;
}

  .vertical-menu a {
  display: block;
  text-decoration:none;
  text-align: left;
  font: normal normal 14px Verdana;
  color: #f0f0f0;
  padding: 0px;
  margin: 0;
  font-size:11px;
  font-weight:bold;
}

22 Мая 2015 Просмотров: 1736 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 27 Мая 2015 15:46¹ 0 Эту навигацию, можно сделать как не основную и прописать разделы сайта.