» »

Стильное вертикальное меню для uCoz


Стильное вертикальное меню для uCoz

Красиво сделано вертикальное мню в стили минимализм для светлого сайта. Его нужно только поставить в контейнер и не каких блоков для него не предусмотрено. При наведение на категорию, то будет меняться оттенок самой стрелки и фон станет на нем светлее. Тематически, если рассудить, то оно общение, тут главное чтоб по дизайну подошло. Имеет в низу черту, под индивидуальные разделы, но если их нет, то можно просто снять. Также к дизайну относиться его черты, как 3 круга, которые вы можете сменить или просто сделать их разными по оттенку.

Так будет смотреться на простом сайте.



Переходим к установке:

Устанавливаем в контейнер, но как уже сказано, не в блок, как делают обычно.

Код
<div id="w_menu_block">  
  <div id="w_menu_top"><b>Меню сайта</b>  
  <div>  
  <span style="background: #355C88;"></span>  
  <span style="background: #355C88;"></span>  
  <span style="background: #355C88;"></span>  
  </div>  
  </div>  
  <ul>  
  <li><a href="#"><i></i>Скрипты для uCoz</a></li>  
  <li><a href="#"><i></i>Шаблоны для uCoz</a></li>  
  <li><a href="#"><i></i>Заработок на uCoz</a></li>  
  <li><a href="#"><i class="activ_ss"></i>Авторство</a></li>  
  <li><a href="#"><i></i>Блог сайта</a></li>  
  <li><a href="#"><i></i>Новости сайта</a></li>  
  <li style="border-bottom: 1px solid #C3C8CB;margin-bottom:10px;padding-bottom:10px;"><a href="#"><i></i><b>Форум сайта</b></a></li>  
  <li><a href="#"><i></i>Предоставляемые услуги</a></li>  
  <li><a href="#"><i></i>Предложить материал</a></li>  
  </ul>  
  </div>


CSS:

Код
#w_menu_block {  

  }  

  #w_menu_block ul {  
  list-style: none;  
  padding: 0px;  
  margin: 3px 0 0;  
  }  

  #w_menu_block ul li {  
   
  }  

  #w_menu_block ul li a {  
  display: block;  
  padding: 0 10px;  
  color: #797D7F;  
  font:13px Tahoma,Arial,sans-serif;  
  text-decoration: none;  
  line-height: 30px;  
  }  
  #w_menu_block ul li a:hover {  
  background: #FFF;  
  border-radius: 5px;  
  }  
  #w_menu_block ul li a:hover i {  
  border: 7px solid transparent; border-left: 9px solid #0074B8;  
  }  

  #w_menu_block ul li i {  
  float: left;  
  border: 7px solid transparent; border-left: 9px solid #797D7F;  
  margin-top: 9px;  
  }  
  #w_menu_block ul li i.activ_ss {  
  border: 7px solid transparent; border-left: 9px solid #0074B8;  
  }  

  #w_menu_block ul li span{  
  float: right;  
  }  

  #w_menu_top {  
  padding: 0 10px;  
  font:17px Tahoma,Arial,sans-serif;  
  color: #0D608A;  
  line-height: 35px;  
  }  
  #w_menu_top div {  
  float: right;  
  margin-top: 13px;  
  }  
  #w_menu_top span {  
  background: #000;  
  float: left;  
  margin-right: 3px;  
  margin-top: center;  
  display: block;  
  width: 12px;  
  height: 12px;  
  border-radius: 50%;  
  }


На этом установка закончена, все сохраняем.
Автор: waaka
Источник: http://boba.ucoz.com/
27.01.2016 Просмотров: 497 Комментарий: (10)

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

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

Комментарий: 9
Сопрано
Сопрано 27.01.2016 19:051
0
Сейчас отошла старая добрая навигация, которая была нарисована на фотошоп, теперь на стилях все.
tsakonter
tsakonter 27.01.2016 19:092
0
Но почему, просто такое меню не когда не подойдет на дизайнерский сайт. А сейчас больше делают из стандартного шаблона оригинальный и что требуется, то появляется.
Maryges
Maryges 28.01.2016 01:113
0
Сейчас основном можно типа такого меню и увидеть, не ставят теперь просто цветные или дизайнерские, но если сам шаблон не нарисован.
AnTron
AnTron 28.01.2016 01:304
0
Но кнопки там явно лишние и как виду их можно убрать. А если их разным цветом сделать, то большинство может подумать, что переключать можно на такой оттенок дизайн.
Сафрон
Сафрон 28.01.2016 01:345
0
Кому как, можно что то вообще кроме них поставить. Просто раньше круглые были кнопки, сейчас уже пошли другие, как все меняется быстро.
Kosten
Kosten 28.01.2016 01:536
0
Как гугл начал пугать, что позиций понизит, если ресурс не будет корректно отображаться в мобильных устройствах, очень много и в том числе сам сменил на простой от системы.
Tergran
Tergran 28.01.2016 02:057
0
Но а почему бы DEMO на его не сделать, это же не сложно. Чтоб посмотреть как он будет работать или какие имеет эффекты, то пока поставишь и там только узнаешь.
ucozmental
ucozmental 28.01.2016 02:118
0
Но на демо нужно время, хотя сам научился как делать, а здесь просто все закачал и все.
Kosten
Kosten 28.01.2016 02:129
0
Если что постараюсь вывести на просмотр, как время будет, но не сильно время тратить нужно на меню к примеру, на другое больше уходит.
avatar