Вітаю на блозі цікавих ідей

Вертикальне меню

Щоб зробити вертикальне багаторівневе меню, потрібно:
1. Дизайн - Макет - Додати ґаджет - HTML/JavaScript.
2. У поле Вміст вставити код, поданий нижче.
3. Вибрати одну із дій - Зберегти, Скасувати, Назад. 

 Код:

<style type="text/css">  <!--
/* CSS Document */
ul#menu-v,
ul#menu-v li,
ul#menu-v ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
}

ul#menu-v:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#menu-v li {
  float: left;
  display: block !important;
  display: inline;
  position: relative;
  border:#ddcca2 1px solid;
}
ul#menu-v li ul li {
border:none;
border-bottom:#991500 2px solid;
}

/* Root Menu */
ul#menu-v a {
  padding: 0 6px;
  display: block;
  background: #ebe0c7;
  color: #991500;
  font: bold 12px/28px Verdana, Arial;
  text-decoration: none;
  height: auto !important;
  height: 1%;
}

ul#menu-v a:hover,
ul#menu-v li:hover a,
ul#menu-v li.iehover a {
  background: #991500;
  color: #ebe0c7;
}

/* 2nd Menu */
ul#menu-v li:hover li a,
ul#menu-v li.iehover li a {
  background: #ebe0c7;
  color: #991500;
  border:#ddcca2 1px solid;
}

ul#menu-v li:hover li a:hover,
ul#menu-v li:hover li:hover a,
ul#menu-v li.iehover li a:hover,
ul#menu-v li.iehover li.iehover a {
  background: #991500;
  color: #ebe0c7;
  border:#ebe0c7 1px solid;
}

ul#menu-v ul,
ul#menu-v ul ul,
ul#menu-v ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 161px;
}

ul#menu-v li:hover ul ul,
ul#menu-v li:hover ul ul ul,
ul#menu-v li.iehover ul ul,
ul#menu-v li.iehover ul ul ul {
  display: none;
}

ul#menu-v li:hover ul,
ul#menu-v ul li:hover ul,
ul#menu-v ul ul li:hover ul,
ul#menu-v li.iehover ul,
ul#menu-v ul li.iehover ul,
ul#menu-v ul ul li.iehover ul {
  display: block;
}
-->  </style>

<ul id="menu-v">
    <li><a href="#"> Тема 1</a>
        <ul>
          <li><a href="#>Посилання 1</a></li>
          <li><a href="#>Посилання 2</a></li>
        </ul>
    </li>
    <li><a href="#">Тема 2</a>
        <ul>
          <li><a href="#">Посилання 1</a></li>
          <li><a href="#">Посилання 2</a></li>
          <li><a href="#">Посилання 3</a></li>
          <li><a href="#">Посилання 4</a></li>
          <li><a href="#">Посилання 5</a></li>
        </ul>
    </li>
    <li><a href="#">Тема 3</a>
        <ul>
          <li><a href="#">Посилання 1</a></li>
          <li><a href="#">Посилання 2</a></li>
        </ul>
    </li>
</ul>

Примітка. Тема 1, Тема 2 , Тема 3 - це основні розділи меню.
Посиляння 1, Посилання 2 і т.д. - це підрозділи відповідних тем.
# - це символ, який потрібно замінити на посилання

Немає коментарів:

Дописати коментар