» »

Вертикальное меню под категорий сайта 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.05.2015 Просмотров: 433 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 27.05.2015 15:461
0
Эту навигацию, можно сделать как не основную и прописать разделы сайта.
avatar