Выпадающее меню

30 дек 2011

Выпадающее меню

Zero_Xz Категория: DATALIFE ENGINE » Модули

У нас вы можете скачать бесплатно Выпадающее меню

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.

1. Качаем скрипт - Скачивание файлов доступно только зарегистрированным пользователям, распаковываем в /templates/шаблон/js/
2. В styles.css добавляем -

/*leftsubmenu*/
.submenu, .submenu ul { margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style: none; background-color: #443935; border-left: 1px solid #2c2421; visibility: hidden; z-index: 100; }
.submenu li a { font-size: 0.9em; display: block; width: 160px; color: #fff; text-decoration: none; padding: 4px 5px; border-bottom: 1px solid #5f5652; position: relative; }
* html .submenu li { display: inline-block; width: 170px; }
.submenu li a:hover { background-color: #59504c; }
.downarrowpointer { padding-left: 4px; }
.rightarrowpointer { position: absolute; padding-top: 6px; left: 100px; top: 0; }
.ddiframeshim { position: absolute; z-index: 500; background: none; border-width: 0; width: 0; height: 0; display: block; }

3. В Main.tpl добавляем -

4. В коде блока с меню(main.tpl), после

<ul

нужно добавить

id="ddsidemenu"

, должно выйти так:

5. Начимнаем строить наше меню:

<li><a rel="sm1" href="#"><span>Пункт меню1</span></a></li>
<li><a rel="sm2" href="#"><span>Пункт меню2</span></a></li>
<ul id="sm1" class="submenu">
            <li><a href="#">выпадающая ссылка из Пункт меню1</a></li>

        </ul>
<ul id="sm2" class="submenu">
            <li><a href="#">выпадающая ссылка из Пункт меню2</a></li>
                </ul>

6. Готово

Цвета выпадающего меню можно регулировать в styles.css (код из 2го пункта)

Меню взято из шаблона inmay

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

Выпадающее меню для DLE

Контекстное меню для сайта на JavaScript

Вид модального окна Win7 [Все версии DLE]

Социальное меню на HTML5 and CSS3

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.