« Красивое, зеленое Web меню для uCoz »

Описание материала:

Красивое, зеленое, в Web стиле, меню для uCoz. Данное меню подойдет как для светлого, так и для темного дизайна сайта. Что из себя представляет меню: зеленый верхних блок раздела, серые стиль ссылок с иконками, при наведение курсора на ссылку стиль меняет цвет на зеленый.

Установка:

  • Скачиваем архив и заливаем папку img в корень своего сайта
  • Ставим код в блок, где хотим видеть меню:
    Код
    <nav class="bnav">  
      <ul>  
      <li><a href="/"><span class="ico ico_01"></span>Главная</a></li>  
      <li><a href="/load/"><span class="ico ico_02"></span>Фильмы торрент</a></li>  
      <li><a href="/load/"><span class="ico ico_03"></span>Сериалы торрент</a></li>  
      <li><a href="/load/"><span class="ico ico_04"></span>ТВ передачи торрент</a></li>  
      <li><a href="/load/"><span class="ico ico_05"></span>Мультфильмы торрент</a></li>  
      <li><a href="/load/"><span class="ico ico_06"></span>Музыка торрент</a></li>  
      <li><a href="/load/"><span class="ico ico_07"></span>Игры торрент</a></li>  
      <li><a href="/"><span class="ico ico_08"></span>Шаблоны для uCoz</a></li>  
      <li><a href="/load/"><span class="ico ico_09"></span>Журналы торрент</a></li>  
      <li><a href="/load/"><span class="ico ico_10"></span>Спорт торрент</a></li>  
      <li><a href="/load/"><span class="ico ico_11"></span>Обои торрент</a></li>  
      </ul>  
    </nav>

  • Дальше ставим данный код в таблицу стилей в самый низ:
    Код
    .bnav {width:215px;}  
    .bnav li {margin:3px 0 0 0;}  
    .bnav li:first-child {margin:0;}  
    .bnav li a {height:30px; padding:0 0 0 36px; display:block; position:relative; overflow:hidden; font:12px/30px Calibri; color:#4e6378; text-shadow:0 1px 1px #f5f8fa; text-decoration:none; background:url(/img/block_bg.png) no-repeat -698px 0;}  
    .bnav li a:hover {color:#fff; text-shadow:0 1px 1px #329500; background-position:-698px -32px;}  
    .bnav li a .ico {width:24px; height:24px; display:block; position:absolute; left:6px; top:3px; background-image:url(/img/icon_block.png); background-repeat:no-repeat;}  
    .bnav li a .ico_01 {background-position:center 3px;}  
    .bnav li a .ico_02 {background-position:center -28px;}  
    .bnav li a .ico_03 {background-position:center -60px;}  
    .bnav li a .ico_04 {background-position:center -94px;}  
    .bnav li a .ico_05 {background-position:center -128px;}  
    .bnav li a .ico_06 {background-position:center -160px;}  
    .bnav li a .ico_07 {background-position:center -194px;}  
    .bnav li a .ico_08 {background-position:center -228px;}  
    .bnav li a .ico_09 {background-position:center -260px;}  
    .bnav li a .ico_10 {background-position:center -293px;}  
    .bnav li a .ico_11 {background-position:center -228px;}


    Готова!


    Скачать ( Размер архива 51.0 Kb )

    По данной ссылке, Вы можете скачать или купить архив данного материала

    Установка материала

    Мы поможем установить данный материал к Вам на сайт


    Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 705 | Загрузок: 20

    Теги к материалу: красивое, зеленое, ucoz, Web, для, меню

    Поделиться в соц. сетях:

    К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

    Комментариев к материалу: 0
    avatar