» »

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


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

Давайте рассмотрим один код, который выполнен в разном дизайне, как Синее горизонтальное меню AKRAS для uCoz, где можно заметить небольшие изменение, которые соответственно в формате на ресурсе, будут противоположны. И так, мы видим первую навигацию у которой вверх нет углов, а это только означает, что его нужно садить на корпус и он будет к примеру как шапка ресурса, больше применение я не вижу. А вот второе, можно установить как и внутри самого конструктора, так и вверх и также будет смотреться отлично. В стилях очень красиво нарисовано, это разделы, где прописаны категорий и при наведение, безусловно оттенок поменяется и создаваться такой красивый эффект, как прогибание той рубрики, которая вам нужна.



Код
<div class="b-menu">
  <ul>
<li><center><a href="/">Главная</a></center>
  </li><li><a href="/forum">Форум</a></li>
</li><li><a href="http://zornet.ru/">ZORNET.RU</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_up20.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_a71.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;}
/*------*/






Код
<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:

Код
.b-menu {height: 36px;margin: 2px auto 0 auto;background: #525252;background: url('http://zornet.ru/CSS-ZORNET/gerav/Yor/menu_up22.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_a77.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 Просмотров: 468 Комментарий: (0)

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

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

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