js Многоуровневое вертикальное меню на jQuery 

Дата публикации  Дата изменения17.01.13  КомментарииНет   Просмотры3454

Простое вертикальное меню. Пункты меню плавно исчезают и появляются. Аскетично, без дизайнерских изысков; возможность добавлять подкатегории.

Пример использования:
Между <head></head>:

<link href="css/webwidget_menu_vertical_menu1.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/webwidget_menu_vertical_menu1.js"></script>
Между <body></body>:
        <script language="javascript" type="text/javascript">
            $(function() {
                $(".webwidget_menu_vertical_menu1").webwidget_menu_vertical_menu1({
                    style_color: 'red',
                    font_color: '#666',
                    font_decoration: 'none',//none blink inherit line-through overline underline
                    animation_speed: 'normal',//"slow", "normal", or "fast"
                    directory: 'images'
                });
            });
    </script>
<div class="webwidget_menu_vertical_menu1">
            <ul>
                <li class="top_border"></li>
                <li class="current"><a href="#">Menu1</a>
                    <ul>
                        <li class="top_border"></li>
                        <li><a href="#">submenu1</a>
                        </li>
                        <li><h3>Category</h3></li>
                        <li><a href="#">submenu2</a></li>
                        <li><a href="#">submenu3</a></li>
                        <li><a href="#">submenu4</a></li>
                        <li><a href="#">submenu5</a></li>
                        <li><a href="#">submenu6</a></li>
                        <li class="bottom_border"></li>
                    </ul>
                </li>
                <li><a href="#">Menu2</a>
                    <ul>
                        <li class="top_border"></li>
                        <li><a href="#">submenu1</a>
                        </li>
                        <li><a href="#">submenu2</a></li>
                        <li><h3>Category</h3></li>
                        <li><a href="#">submenu3</a></li>
                        <li><a href="#">submenu4</a></li>
                        <li><a href="#">submenu5</a></li>
                        <li><a href="#">submenu6</a></li>
                        <li class="bottom_border"></li>
                    </ul>
                </li>
                <li><a href="#">Menu3</a></li>
                <li><h3>Category</h3></li>
                <li><a href="#">Menu4</a>
                <ul>
                    <li class="top_border"></li>
                    <li><a href="#">submenu1</a>
                    </li>
                    <li><a href="#">submenu2</a></li>
                    <li><a href="#">submenu3</a></li>
                    <li><a href="#">submenu4</a></li>
                    <li><a href="#">submenu5</a></li>
                    <li><a href="#">submenu6</a></li>
                    <li class="bottom_border"></li>
                </ul></li>
                <li><a href="#">Menu5</a></li>
                <li><a href="#">Menu6</a>
                </li>
                <li class="bottom_border"></li>
            </ul>
        </div>

  Размер:  26,22kB | Изменен: 17.01.13 | Загрузок: 161
Бесплатные курсы

Категории

Теги: , , , ,

Оцените материал:

Рейтинг: 6.5/10 (2)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые