Темное меню для ucoz

0 507

Категория: Ucoz » Меню для ucoz Опубликовал: DavGev Дата: 16.05.2013

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

Источник материала: Не указан.

Всего комментариев: 0