новороченное меню для сайтов ucoz - Форум ProUcoz.com - новороченное меню для сайтов ucoz - Форум ProUcoz.com
Понедельник 09:58 | 20.02.2017
Свежие темы · Участники · Правила форума · Поиск · RSS
Страница 1 из 11
Модератор форума: GrandDooM, FR3cH 
Форум ProUcoz.com » Готовые скрипты и интересные решения для системы uCoz » Другие скрипты для uCoz » новороченное меню для сайтов ucoz
новороченное меню для сайтов ucoz
УкраинаStranik3354[Нет на сайте]
Дата: Вторник, 30.04.2013, 14:43 | Сообщение # 1
Сообщений: 128
скрин http://i031.radikal.ru/1304/2a/849d924bda18.gif

Универсальное меню для Вашего сайта,основной фишкой которого является стабильность работы и легкость настройки.
При установке на тесте глюков не отмеченно

1. Копируем HTML-код в нужное место на странице сайта:
Код
<div id="toolbar">  
    <div class="wrapper">  
       
    <ul id="topnav">  
    <li><a href="/">Название<br><span>Описание</span></a></li>  
    <li><a href="/">Название<br><span>Описание</span></a></li>    
    <li class="chosen"><a href="/">Название<br><span>Описание</span></a>  
    <ul>  
    <li><a href="/">подраздел</a></li>  
    <li><a href="/">подраздел</a></li>  
    <li><a href="/">подраздел</a></li>  
    <li><a href="/">подраздел</a></li>  
    </ul>  
    <li class="chosen"><a href="/">Название<br><span>Описание</span></a>  
    <ul>  
    <li><a href="/">подраздел</a></li>  
    <li><a href="/">подраздел</a></li>  
    <li><a href="/">подраздел</a></li>  
    <li><a href="/">подраздел</a></li>  
  </ul></li>  
    </ul>  
    </div>  
    </div>

2. Копируем стили в таблицу стилей css:
Код
#toolbar {  
   background: #202020 url(http://ucozu.ru/dlyazagruzki/toolbar-bg.png) 0 0 repeat-x;  
   height: 61px;  
  }  

  #topnav {  
   float: left;  
   height: 61px;  
   padding-left: 5px;  
   margin: 0px;  
   z-index: 100;  
  }  

  #topnav ul {  
   margin: 0;  
   padding: 0;  
  }  

  #topnav li {  
   float: left;  
   margin: 0;  
   padding: 0px;  
   position: relative;  
   padding-right: 1px;  
   line-height: 16px;  
   list-style-type: none;  
  }  

  #topnav li a {  
   display: block;  
   float: left;  
   color: #ccc;  
   text-decoration: none;  
   padding: 16px 23px 13px;  
   font-size: 16px;  
   font-weight: bold;  
   font-family: Arial Narrow, Arial, Helvetica, sans-serif;  
  }  

  #topnav li a span {  
   color: #666;  
   font-size: 11px;  
   font-weight: normal;  
   font-family: "Segoe UI", Arial, Helvetica, sans-serif;  
  }  

  #topnav li a:hover, #topnav li:hover a, #topnav li.sfhover a {  
   color: #ddd;  
  }  

  #topnav li.chosen a {  
   background: url(http://ucozu.ru/dlyazagruzki/topnav-chosen.png) 50% 0 no-repeat;  
   color: #fff;  
  }  

  #topnav li.chosen a span {  
   color: #aaa;  
  }  

  #topnav li:hover span, #topnav li.sfhover span {  
   color:#999;  
  }  

  #topnav li li {  
   width: 170px;  
   height: auto;  
   padding: 0px;  
   margin: 0px;  
   border-bottom: 1px solid #313131;  
  }  

  #topnav li li a, #topnav .chosen li a, #topnav li:hover li a, #topnav li.sfhover li a {  
   background: none;  
   display: block;  
   height: 30px;  
   line-height: 30px;   
   padding: 0 0 0 22px;  
   width: 148px;  
   float: none;  
   color: #999;  
   font-size: 13px;  
   text-decoration: none;  
   font-family: "Segoe UI", Arial, Helvetica, sans-serif;  
   font-weight: normal;  
  }  

  #topnav li li a:hover, #topnav .chosen li a:hover {  
   background: #1a1a1a;  
   color: #ccc;  
   text-decoration: none;  
  }  

  #topnav li ul {  
   background: #1d1d1d;  
   clear: both;  
   position: absolute;  
   height: auto;  
   width: 170px;  
   top: 61px;  
   left: -999em;  
   z-index: 100;  
   border-right: 1px solid #313131;  
   border-left: 1px solid #313131;  
  }  

  #topnav li:hover ul, #topnav li.sfhover ul {  
   left: auto;  
  }  

  #topnav2 {  
   float: left;  
   height: 61px;  
   padding-left: 5px;  
   margin: 0px;  
   z-index: 100;  
  }  

  #topnav2 ul {  
   margin: 0;  
   padding: 0;  
  }  

  #topnav2 li {  
   float: left;  
   margin: 0;  
   padding: 0px;  
   position: relative;  
   line-height: 61px;  
   list-style-type: none;  
  }  

  #topnav2 li a {  
   display: block;  
   float: left;  
   color: #ccc;  
   text-decoration: none;  
   padding: 0 15px;  
   font-size: 14px;  
   font-family: Arial Narrow, Arial, Helvetica, sans-serif;  
  }  

  #topnav2 li a:hover {  
   color: #fff;  
  }  

  #topnav2 li a.chosen {  
   background: url(http://ucozu.ru/dlyazagruzki/topnav-chosen.png) 50% 0 no-repeat;  
   color: #fff;  
   font-weight: bold;  
  }
 
Форум ProUcoz.com » Готовые скрипты и интересные решения для системы uCoz » Другие скрипты для uCoz » новороченное меню для сайтов ucoz
Страница 1 из 11
Поиск: