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

17.01.13 17.01.13 Нет 8618

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

Пример использования:
Между <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 | Загрузок: 318