Главная » Статьи » Menu для Ucoz

Горизонтальное выпадающее 6 уровневое меню


Меню выпадающее 6 уровневое,работает без применения скриптов,используются только свойства CSS3.Основные регулировки настроены для работы,для изменения цвета фона секций измените значения для свойства background.Для изменения цвета текста в секциях измените значения свойства color.Для изменения размера текста измените значение свойства font-size.На сайте есть статьи по всем свойствам и тегам,воспользуйтесь поиском введя в него название интересующего элемента.Можно установить весь код со стилями,можно стили перенести в файл основных стилей ( не рекомендуется ).




Код меню для установки


<style>
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
#pmenu {margin:30px 0 auto 0; position:relative; z-index:500;}
#pmenu li {float:left;position:relative;}
#pmenu a, #pmenu a:visited {display:block; width:100px; font-size:10px; color:#000; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background:#b2ab9b; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a{background:#dfd7ca; color:#c00;}
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}
#pmenu > li:hover > ul {left:0; top:24px;}
</style>
<ul id="pmenu">
<li><a href="#">Top Level 1</a></li>
<li><a href="#">Top Level 2</a></li>
<li><a href="#">Top Level 3 &#9658;</a>
<ul>
<li><a href="#">Sub Level 1a</a></li>
<li><a href="#">Sub Level 1b</a></li>
<li><a href="#">Sub Level 1c &#9658;</a>
<ul>
<li><a href="#">Sub Level 2a</a></li>
<li><a href="#">Sub Level 2b &#9658;</a>
<ul>
<li><a href="#">Sub Level 3a</a></li>
<li><a href="#">Sub Level 3b &#9658;</a>
<ul>
<li><a href="#">Sub Level 4a</a></li>
<li><a href="#">Sub Level 4b</a></li>
<li><a href="#">Sub Level 4c &#9658;</a>
<ul>
<li><a href="#">Sub Level 5a</a></li>
<li><a href="#">Sub Level 5b</a></li>
<li><a href="#">Sub Level 5c</a></li>
<li><a href="#">Sub Level 5d &#9658;</a>
<ul>
<li><a href="#">Sub Level 6a</a></li>
<li><a href="#">Sub Level 6b</a></li>
<li><a href="#">Sub Level 6c</a></li>
<li><a href="#">Sub Level 6d</a></li>
</ul>
</li>
<li><a href="#">Sub Level 5e</a></li>
<li><a href="#">Sub Level 5f</a></li>
</ul>
</li>
<li><a href="#">Sub Level 4d</a></li>
<li><a href="#">Sub Level 4e</a></li>
<li><a href="#">Sub Level 4f</a></li>
</ul>
</li>
<li><a href="#">Sub Level 3c</a></li>
<li><a href="#">Sub Level 3d</a></li>
</ul>
</li>
<li><a href="#">Sub Level 2c</a></li>
</ul>
</li>
<li><a href="#">Sub Level 1d</a></li>
<li><a href="#">Sub Level 1e</a></li>
</ul>
</li>
<li><a href="#">Top Level 4</a></li>
<li><a href="#">Top Level 5</a></li>
<li><a href="#">Top Level 6</a></li>
</ul>

Категория: Menu для Ucoz | Добавил: NAREK (18.11.2012)
Просмотров: 978 | Рейтинг: 5.0/1
Всего комментариев: 0
Имя *:
Email *:
Код *:

Реклама

SEO sprint - максимальная раскрутка сайтов!

Top Шаблоны

  • DEXTER
  • GamerPress
  • IRENE
  • ENGAMER
  • Наш опрос

    • Оцените мой сайт
      Всего ответов: 22




    Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0