[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Система uCoz » Скрипты для uCoz » Темное меню для ucoz
Темное меню для ucoz
koufДата: Суббота, 21.02.2015, 18:06 | Сообщение # 1
Подполковник
Группа: Администраторы
Сообщений: 115
Репутация: 0
Статус: Offline


Простое и компактное вертикальное меню для ucoz в тёмных тонах. Меню можна поделить относительно разделов, категорий.
Установка. Этап 1. В CSS
Устанавливаем стили для нашего ucoz меню:


Код
/* Sidebar */   
   #sidebar {   
   width: 200px;   
   float: left;   
   margin-right: 20px;   
   }   
   /* Navigation */   
   #navigation {   
   border-top:1px solid #c2c2c2;   
   padding:0px;   
   text-indent:0px;   
   background-color:#efefef;   
   width:240px;   
   margin-left: 5px;   
   margin-right: 10px;   
   }   
   #navigation li1 a {   
   border-bottom-color: rgb(194, 194, 194);   
   border-bottom-style: solid;   
   border-bottom-width: 1px;   
   border-left-color: rgb(194, 194, 194);   
   border-left-style: solid;   
   border-left-width: 1px;   
   border-top: none;   
   background:#dddddd url(http://wallaby.ucoz.ru/menu/navigation_border.gif) repeat-x 0 0;   
   color:#0d0d0d;   
   display:block;   
   font-weight:bold;   
   margin:0px;   
   padding:4px 15px 5px 15px;   
   text-decoration: none;   
   }   
   #navigation li a {   
   border: 1px solid #c2c2c2;   
   border-top: none;   
   background:#dddddd url(http://wallaby.ucoz.ru/menu/navigation_border.gif) repeat-x 0 0;   
   color:#0d0d0d;   
   display:block;   
   font-weight:bold;   
   margin:0px;   
   padding:4px 15px 5px 15px;   
   text-decoration: none;   
   }   
   #navigation li a:hover, #navigation li.current-cat-parent > a {   
   background:#cfcfcf url(http://wallaby.ucoz.ru/menu/navigation_border.gif) repeat-x 0 0;   
   }   

   #navigation li1 a:hover, #navigation li.current-cat-parent > a {   
   background:#cfcfcf url(http://wallaby.ucoz.ru/menu/navigation_border.gif) repeat-x 0 0;   
   }   
   #navigation ul {   
   border: 1px solid #c2c2c2;   
   border-top: none;   
   display: none;   
   }   
   #navigation li {   
   list-style:none outside none;   
   display:inline;   
   }   
   #navigation ul.show {   
   display:block;   
   }   
   #navigation li li a {   
   background:#efefef;   
   display:block;   
   font-weight:normal;   
   margin:0px;   
   text-decoration: none;   
   color:#000;   
   display:block;   
   border: 1px solid #efefef;   
   padding:1px 15px 3px 15px;   
   text-decoration: none;   
   }   
   #navigation li li a:hover, #navigation li li.current-cat a {   
   background:#4d4d4d;   
   border: 1px solid #262626;   
   color:#cea088;   
   }   
   /* Page Sidebar Navigation */   
   #sidebar .navigation {   
   border-top:1px solid #c2c2c2;   
   padding:0px;   
   text-indent:0px;   
   background-color:#efefef;   
   width:190px;   
   margin-bottom: 30px;   
   }   
   #sidebar .navigation li a {   
   border: 1px solid #c2c2c2;   
   border-top: none;   
   background:#dddddd url(http://wallaby.ucoz.ru/menu/navigation_border.gif) repeat-x 0 0;   
   color:#0d0d0d;   
   display:block;   
   font-weight:bold;   
   margin:0px;   
   padding:4px 15px 5px 15px;   
   text-decoration: none;   
   }   
   #sidebar .navigation li a:hover, #sidebar .navigation li.current_page_item a {   
   background:#cfcfcf url(http://wallaby.ucoz.ru/menu/navigation_border.gif) repeat-x 0 0;   
   }   
   #sidebar .navigation li {   
   list-style:none outside none;   
   display:inline;   
   }   
   #sidebar .navigation li li a {   
   display: none;   
   }


Установка. Этап 2. HTML
Вставляем код в любое место на сайте, где хотим видеть темное меню:


Код
<div id="sidebar">   
   <ul id="navigation">   
   <li class="cat-item cat-item-1"><a href="http://Ваша ссылка/">Главная</a></li>   
   <li class="cat-item cat-item-4"><a href="http://Ваша ссылка/forum">Форум</a></li>   
   <li class="cat-item cat-item-27"><a href="http://Ваша ссылка/publ">Каталог стайтей</a></li>   
   <li class="cat-item cat-item-35"><a href="http://Ваша ссылка/blog">Блог</a></li>   

   <table style="" cellpadding="0" cellspacing="0" width="100%">   
   <tr><td style="" width="8%" valign="top">   
   <li1 class="cat-item cat-item-17"><a href="javascript://"><font color="#ff0000">Реклама</font></a></li1>   
   </td>   
   <td style="" width="8%" valign="top">   
   <li class="cat-item cat-item-17"><a href="javascript://"><font color="#ff0000">Автор:</font> <font color="#32cd32">Jonson</font></a></li>   
   </tr>   

   </table>   
   </ul>   
     
   </div>
Прикрепления: 2858109.png (6.0 Kb)
 
Форум » Система uCoz » Скрипты для uCoz » Темное меню для ucoz
  • Страница 1 из 1
  • 1
Поиск: