» »

Серое горизонтальное меню VEBTEGA для uCoz


Серое горизонтальное меню VEBTEGA для uCoz

По дизайну есть очень разные Горизонтальное меню VEBTEGA для uCoz, что вы можете себе подобрать, под свой ресурс. Первое будет идти, без верхних углов, основном его устанавливают на шапку сайта или вверх, так как в низу будет все ровно. Второе сделал сам, а точнее просто дополнил и стало у него 4 одинаковых бока, сто можно его прописать, как и по верх и по низ. Здесь вам нужно смотреть, где как будет отображаться оно, главное забыл сказать, нет у них под категорий и они идут на основные материалы. Когда начнете наводить на рубрику, которую сами вы пропишите, то будет небольшой эффект, а это просто поменяется гамма и визуально прогиб появиться.



Код
<div class="b-menu">
  <ul>
<li><center><a href="/">Главная</a></center>
  </li><li><a href="/forum">Форум</a></li>
  <li><a href="/publ">Статьи</a></li>
  <li><a href="/video">Видео</a></li>
  <li><a href="/load">Каталог Файлы</a></li>
  <li><a href="/">Скрипты для uCoz</a></li>
  <li><a href="/">Шаблоны для uCoz</a></li>
  </ul></div>


CSS:

Код
/*menu-up*/
.b-menu {height: 36px;margin: 2px auto 0 auto;background: #525252;background: url('http://zornet.ru/CSS-ZORNET/gerav/Yor/menu_up5.png') no-repeat left top;width: 949px;}
.b-menu ul {margin: 0 0 0 14px;padding: 0;}
.b-menu li {list-style: none;float: left;background: url('http://zornet.ru/CSS-ZORNET/gerav/Yor/hmenu-ar.png') no-repeat right top;}
.b-menu li.last {background: none;}
.b-menu li a {color: #fff;font-family: verdana,arial,helvetica;font-size: 12px;font-weight: bold;letter-spacing: -1px;text-decoration: none;line-height: 2.2;height: 32px;display: block;padding: 4px 9px 0 9px;text-shadow: #000000 0 1px 1px;}
.b-menu li a:hover {text-decoration: none;background: url('http://zornet.ru/CSS-ZORNET/gerav/Yor/menu_up_a.png') center top;}
.bm-search .schQuery {float: left;}
.bm-search .schQuery input {background: url('http://zornet.ru/CSS-ZORNET/gerav/Yor/find-form-bg.png') no-repeat left top;border: none;height: 24px;width: 152px;margin: 0 5px 0 0;}
.bm-search .schBtn {float: left;}
.bm-search .schBtn input {border: none;background-color: transparent;color: #fff;font-family: verdana,arial,helvetica;cursor: pointer;font-weight: bold;font-size: 12px;padding: 4px 9px 0 9px; }
.b-menu .bm-search {float: right;margin: 6px 10px 0 0;}
/*------*/






Код

  <ul>
<li><center><a href="http://zornet.ru/">Главная</a></center>
  </li><li><a href="http://zornet.ru/forum">Форум</a></li>
  <li><a href="http://zornet.ru/publ">Статьи</a></li>
  <li><a href="/video">Видео</a></li>
  <li><a href="http://zornet.ru/load">Каталог Файлы</a></li>
  <li><a href="/">Скрипты для uCoz</a></li>
  <li><a href="/">Шаблоны для uCoz</a></li>
<li><a href="/">ZORNET.RU</a></li>
  <li><a href="/">Обратная связь</a></li>
  </ul></div>


CSS:

Код
/*menu*/
.b-menu {height: 36px;margin: 2px auto 0 auto;background: #525252;background: url('http://zornet.ru/CSS-ZORNET/gerav/Yor/menu_up7.png') no-repeat left top;width: 949px;}
.b-menu ul {margin: 0 0 0 14px;padding: 0;}
.b-menu li {list-style: none;float: left;background: url('http://zornet.ru/CSS-ZORNET/gerav/Yor/hmenu-ar.png') no-repeat right top;}
.b-menu li.last {background: none;}
.b-menu li a {color: #fff;font-family: verdana,arial,helvetica;font-size: 12px;font-weight: bold;letter-spacing: -1px;text-decoration: none;line-height: 2.2;height: 32px;display: block;padding: 4px 9px 0 9px;text-shadow: #000000 0 1px 1px;}
.b-menu li a:hover {text-decoration: none;background: url('http://zornet.ru/CSS-ZORNET/gerav/Yor/menu_up_a.png') center top;}
.bm-search .schQuery {float: left;}
.bm-search .schQuery input {background: url('http://zornet.ru/CSS-ZORNET/gerav/Yor/find-form-bg.png') no-repeat left top;border: none;height: 24px;width: 152px;margin: 0 5px 0 0;}
.bm-search .schBtn {float: left;}
.bm-search .schBtn input {border: none;background-color: transparent;color: #fff;font-family: verdana,arial,helvetica;cursor: pointer;font-weight: bold;font-size: 12px;padding: 4px 9px 0 9px; }
.b-menu .bm-search {float: right;margin: 6px 10px 0 0;}
/*------*/


19.04.2015 Просмотров: 417 Комментарий: (0)

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

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

Комментарий: 0
avatar