Простое и компактное вертикальное меню для 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>
|