Категории
| Шаблоны для ucoz [126] |
| PSD макеты [8] |
| Иконки групп [27] |
| Иконки форума [5] |
| Скрипты для ucoz [49] |
Мини-чат
Лента комментариев
Новое на сайте
-
- Новое на форуме
-
- Популярные файлы
-
- Самые популярные темы
| Главная » Файлы » Всё для uCoz » Скрипты для ucoz |
Темно-серое меню для uCoz
Добавил: Gopn1k » Дата: 28.11.2025
Простое и компактное вертикальное меню для ucoz в тёмных тонах. Меню можна поделить относительно разделов, категорий.
Установка. Этап 1. В CSS
Устанавливаем стили для нашего ucoz меню:
Code
/* Sidebar */ </div><div> #sidebar { </div><div> width: 200px; </div><div> float: left; </div><div> margin-right: 20px; </div><div> } </div><div> /* Navigation */ </div><div> #navigation { </div><div> border-top:1px solid #c2c2c2; </div><div> padding:0px; </div><div> text-indent:0px; </div><div> background-color:#efefef; </div><div> width:240px; </div><div> margin-left: 5px; </div><div> margin-right: 10px; </div><div> } </div><div> #navigation li1 a { </div><div> border-bottom-color: rgb(194, 194, 194); </div><div> border-bottom-style: solid; </div><div> border-bottom-width: 1px; </div><div> border-left-color: rgb(194, 194, 194); </div><div> border-left-style: solid; </div><div> border-left-width: 1px; </div><div> border-top: none; </div><div> background:#dddddd url(http://3week.clan.su/img5/navigation_border.gif) repeat-x 0 0; </div><div> color:#0d0d0d; </div><div> display:block; </div><div> font-weight:bold; </div><div> margin:0px; </div><div> padding:4px 15px 5px 15px; </div><div> text-decoration: none; </div><div> } </div><div> #navigation li a { </div><div> border: 1px solid #c2c2c2; </div><div> border-top: none; </div><div> background:#dddddd url(http://3week.clan.su/img5/navigation_border.gif) repeat-x 0 0; </div><div> color:#0d0d0d; </div><div> display:block; </div><div> font-weight:bold; </div><div> margin:0px; </div><div> padding:4px 15px 5px 15px; </div><div> text-decoration: none; </div><div> } </div><div> #navigation li a:hover, #navigation li.current-cat-parent > a { </div><div> background:#cfcfcf url(http://3week.clan.su/img5/navigation_border.gif) repeat-x 0 0; </div><div> } </div><div><br></div><div> #navigation li1 a:hover, #navigation li.current-cat-parent > a { </div><div> background:#cfcfcf url(http://3week.clan.su/img5/navigation_border.gif) repeat-x 0 0; </div><div> } </div><div> #navigation ul { </div><div> border: 1px solid #c2c2c2; </div><div> border-top: none; </div><div> display: none; </div><div> } </div><div> #navigation li { </div><div> list-style:none outside none; </div><div> display:inline; </div><div> } </div><div> #navigation ul.show { </div><div> display:block; </div><div> } </div><div> #navigation li li a { </div><div> background:#efefef; </div><div> display:block; </div><div> font-weight:normal; </div><div> margin:0px; </div><div> text-decoration: none; </div><div> color:#000; </div><div> display:block; </div><div> border: 1px solid #efefef; </div><div> padding:1px 15px 3px 15px; </div><div> text-decoration: none; </div><div> } </div><div> #navigation li li a:hover, #navigation li li.current-cat a { </div><div> background:#4d4d4d; </div><div> border: 1px solid #262626; </div><div> color:#cea088; </div><div> } </div><div> /* Page Sidebar Navigation */ </div><div> #sidebar .navigation { </div><div> border-top:1px solid #c2c2c2; </div><div> padding:0px; </div><div> text-indent:0px; </div><div> background-color:#efefef; </div><div> width:190px; </div><div> margin-bottom: 30px; </div><div> } </div><div> #sidebar .navigation li a { </div><div> border: 1px solid #c2c2c2; </div><div> border-top: none; </div><div> background:#dddddd url(http://3week.clan.su/img5/navigation_border.gif) repeat-x 0 0; </div><div> color:#0d0d0d; </div><div> display:block; </div><div> font-weight:bold; </div><div> margin:0px; </div><div> padding:4px 15px 5px 15px; </div><div> text-decoration: none; </div><div> } </div><div> #sidebar .navigation li a:hover, #sidebar .navigation li.current_page_item a { </div><div> background:#cfcfcf url(http://3week.clan.su/img5/navigation_border.gif) repeat-x 0 0; </div><div> } </div><div> #sidebar .navigation li { </div><div> list-style:none outside none; </div><div> display:inline; </div><div> } </div><div> #sidebar .navigation li li a { </div><div> display: none; </div><div> }
Установка. Этап 2. HTML
Вставляем код в любое место на сайте, где хотим видеть темное меню:
Code
<div id="sidebar"> </div><div> <ul id="navigation"> </div><div> <li class="cat-item cat-item-1"><a href="http://Ваша ссылка/">Главная</a></li> </div><div> <li class="cat-item cat-item-4"><a href="http://Ваша ссылка/forum">Форум</a></li> </div><div> <li class="cat-item cat-item-27"><a href="http://Ваша ссылка/publ">Каталог стайтей</a></li> </div><div> <li class="cat-item cat-item-35"><a href="http://Ваша ссылка/blog">Блог</a></li> </div><div><br></div><div> <table style="" cellpadding="0" cellspacing="0" width="100%"> </div><div> <tr><td style="" width="8%" valign="top"> </div><div> <li1 class="cat-item cat-item-17"><a href="javascript://"><font color="#ff0000">Реклама</font></a></li1> </div><div> </td> </div><div> <td style="" width="8%" valign="top"> </div><div> <li class="cat-item cat-item-17"><a href="javascript://"><font color="#ff0000">Автор:</font> <font color="#32cd32">3week</font></a></li> </div><div> </tr> </div><div><br></div><div> </table> </div><div> </ul> </div><div> </div><div> </div>
| Всего комментариев: 0 | |