2 541 Скрипты / Menu & Nav

Красное вертикальное меню

Красное вертикальное меню

Незамысловатое, но функциональное красное вертикальное меню. Так как цвет меню определяется файлами изображений, то перекрасив их, можно добиться любого цвета для навигации.

В <head> подключаем необходимые файлы

<link href="css/webwidget_menu_vertical_menu1.css" rel="stylesheet" type="text/css"></link>             
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/jаvascript" src="js/webwidget_menu_vertical_menu1.js"></script>

HTML

<div class="webwidget_menu_vertical_menu1">
    <ul>
        <li class="top_border"></li>
        <li class="current"><a href="#">Меню1</a>
            <ul>
                <li class="top_border"></li>
                <li><a href="#">подменю1</a>
                </li>
                <li><h3>Категория</h3></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>
                <li><a href="#">подменю6</a></li>
                <li class="bottom_border"></li>
            </ul>
        </li>
        <li><a href="#">Меню2</a>
            <ul>
                <li class="top_border"></li>
                <li><a href="#">подменю1</a>
                </li>
                <li><a href="#">подменю2</a></li>
                <li><h3>Категория</h3></li>
                <li><a href="#">подменю3</a></li>
                <li><a href="#">подменю4</a></li>
                <li><a href="#">подменю5</a></li>
                <li><a href="#">подменю6</a></li>
                <li class="bottom_border"></li>
            </ul>
        </li>
        <li><a href="#">Меню3</a></li>
        <li><h3>Категория</h3></li>
        <li><a href="#">Меню4</a>
        <ul>
            <li class="top_border"></li>
            <li><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>
            <li><a href="#">подменю6</a></li>
            <li class="bottom_border"></li>
        </ul></li>
        <li><a href="#">Меню5</a></li>
        <li><a href="#">Меню6</a>
        </li>
        <li class="bottom_border"></li>
    </ul>
</div>

JS

И запускаем сам скрипт:

$(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'
    });
});
Скачать 1202Загрузок 4,27 Kb
Демо

Комментарии

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

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