» »

Вертикальное меню Blue gamma для ucoz

Вертикальное меню Blue gamma для ucoz

Думаю здесь можно обойтись без блока, но хотя кому как, ведь Вертикальное меню Blue gamma для ucoz просто блестяще выполнено по своему дизайну. У него есть свои категорий, которые как вы можете заметить, прописаны в темном оттенке цвета. Но если вам это гамма не нравиться, то вы всегда можете поставить другой оттенок, так как с ним идут стили и там выставлять можно. Очень грамотно придумано, что разделили его, так как на портале всегда есть несколько категорий и здесь они будут вписаны, если вы так решите, а дальше за ними пойдут уже, те рубрики, которые вы считаете главными на своем ресурсе.

Давайте для начало установки, с CSS начнем.

Код
.cat_b {  
  background:url(http://zornet.ru/CSS-ZORNET/gerav/gesad/cat_a.gif) no-repeat;  
  width:249px;  
  height:21px;  
  display:block;  
  margin-left:-9px;}  

.cat_b:hover {background-position:0 -26px;}  
ul.cat {margin-top:-3px; padding:0; margin:0;}  
ul.cat li {text-decoration:none; padding:1px 0 0 8px; text-align:left;}  

ul.cat li a {  
  padding-top:0px;  
  color:#fff;  
  padding:5px 0 0 8px;  
  text-decoration:none;  
  font-weight:bold;}  

ul.cat li a:hover {color:#1f1f1f; text-decoration:none;}


Теперь сам код, в нужно в контейнер и там уже можно попробовать его поставить кодом или прописать в блок.

Код
<ul class="cat">
<li><a class="cat_b" title="#"><span style="color: #000;">Скрипты для ucoz</span></a></li>
<li><a class="cat_b" title="asd" href="#">Скрипты для ucoz</a></li>
<li><a class="cat_b" title="asd" href="#">Скрипты для ucoz</a></li>
<li><a class="cat_b" title="asd" href="#">Скрипты для ucoz</a></li>
  </ul>
<ul class="cat">
<li><a class="cat_b" title="#"><span style="color: #000;">Шаблоны для ucoz</span></a></li>
<li><a class="cat_b" title="asd" href="#">Шаблоны для ucoz</a></li>
<li><a class="cat_b" title="asd" href="#">Шаблоны для ucoz</a></li>
<li><a class="cat_b" title="asd" href="#">Шаблоны для ucoz</a></li>
<li><a class="cat_b" title="asd" href="#">Шаблоны для ucoz</a></li>
<li><a class="cat_b" title="asd" href="#">Шаблоны для ucoz</a></li>
  </ul>
<ul class="cat">
<li><a class="cat_b" title="#"><span style="color: #000;">Меню для ucoz</span></a></li>
<li><a class="cat_b" title="asd" href="#">Меню для ucoz</a></li>
<li><a class="cat_b" title="asd" href="#">Меню для ucoz</a></li>
<li><a class="cat_b" title="asd" href="#">Меню для ucoz</a></li>
  </ul>
<ul class="cat">
<li><a class="cat_b" title="#"><span style="color: #000;">Меню для ucoz</span></a></li>
<li><a class="cat_b" title="asd" href="#">Меню для ucoz</a></li>
<li><a class="cat_b" title="asd" href="#">Меню для ucoz</a></li>
  </ul>


Перед тем как поставит, смотрим с начало DEMO

Редактируем название под свою тематику.
02.04.2015 Просмотров: 585 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 02.04.2015 23:041
0
Это не раздвижное меню, просто категорий подчеркнуты в другом цвете, оно может быть как большим там и маленьким, от материала, что пропишите зависит.
avatar