Синее горизонтальное меню 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;} | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |