3 242 Скрипты / Menu & Nav

TinyDropDown - выпадающее меню

Выпадающее меню на jаvascript.

Подключить в шапке файлы:

<link rel="stylesheet" href="tinydropdown.css" type="text/css" />
<script type="text/jаvascript" src="tinydropdown.js"></script>

HTML

<div class="nav">
    <ul id="menu" class="menu">
        <li class="nodiv"><a href="#">Главная</a></li>
        <li><a href="#">О нас</a>
            <ul>
                <li><a href="#">Категория 1</a></li>
                <li><a href="#">Категория 2</a></li>
                <li class="submenu">
                    <a href="#">Категория 3</a>
                    <ul>
                        <li class="noborder"><a href="#">Категория 1</a></li>
                        <li><a href="#">Категория 2</a></li>
                        <li><a href="#">Категория 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><span>Портфолио</span>
            <ul>
                <li><a href="#">Категория 1</a></li>
                <li><a href="#">Категория 2</a></li>
                <li><a href="#">Категория 3</a></li>
                <li class="submenu">
                    <span>Не ссылка</span><ul>
                        <li class="noborder"><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="#">Категория 5</a></li>
                <li><a href="#">Категория 6</a></li>
            </ul>
        </li>
        <li><a href="#">Команда</a>
            <ul>
                <li><a href="#">Категория 1</a></li>
                <li><a href="#">Категория 2</a></li>
                <li><a href="#">Категория 3</a></li>
            </ul>
        </li>
        <li><a href="#">Контакты</a>
            <ul id="info">
                <li>
                    <p>А сюда можно поместить какую-нибудь информацию.</p>
                </li>
            </ul>
        </li>
    </ul>
</div>

JS

var dropdown=new TINY.dropdown.init("dropdown", {
    id:'menu',
    active:'menuhover',
    fade:true,
    slide:true,
    timeout:200
});
Настраиваемые параметры:
  • id - ID навигации (string) - ''
  • active - CSS класс активного состояния(string) - ''
  • fade -  toggle fade tween (bool) - true
  • slide - toggle slide tween (bool) - true
  • speed - скорость (1-9) - 5
  • timeout - время задержки в мс до исчезновения (int) - 200
Скачать 1502Загрузок 2,47 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи