qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Многоуровневое меню на JQuery

Вертикальное многоуровневое меню на css и JQuery
Просмотров: 5567  Скачан: 352 раз  Комментариев в теме: 3

Вертикальное многоуровневое меню на css с неограниченной вложенностью на основе jQuery, сама структура меню очень простая и удобна. Хочу отметить некоторые достоинства этого меню, это несомненно правильная реакция на края страницы, наличия маркеров вложения, бесконечная вложенность и довольно приятный внешний вид.

Шаг 1 - создание разметки

 

HTML

<div class="conteiner">
    <ul class="menu_vert">
        <li><a href="#">Clickable link long link and long long link</a>
            <ul>
                <li><a href="#">Clickable link long link and long long link</a>
                    <ul>
                        <li><a href="#">Clickable link long link and long long link</a>
                            <ul>
                                <li><a href="#">Clickable link long link and long long link</a>
                                    <ul>
                                        <li><a href="#">Clickable link long link and long long link</a></li>
                                        <li><a href="#">Clickable link</a></li>
                                        <li><a href="#">Clickable link</a></li>
                                        <li><a href="#">Clickable link</a>
                                            <ul>
                                                <li><a href="#">Clickable link long link and long long link</a></li>
                                                <li><a href="#">Clickable link</a></li>
                                                <li><a href="#">Clickable link</a>
                                                    <ul>
                                                        <li><a href="#">Clickable link long link and long long link</a></li>
                                                        <li><a href="#">Clickable link</a></li>
                                                        <li><a href="#">Clickable link</a></li>
                                                        <li><a href="#">Clickable link</a>
                                                            <ul>
                                                                <li><a href="#">Clickable link</a></li>
                                                                <li><a href="#">Clickable link</a></li>
                                                                <li><a href="#">Clickable link long link and long long link</a></li>
                                                                <li><a href="#">Clickable link</a></li>
                                                                <li><a href="#">Clickable link</a></li>
                                                                <li><a href="#">Clickable link</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a href="#">Clickable link</a>
                                                            <ul>
                                                                <li><a href="#">Clickable link</a></li>
                                                                <li><a href="#">Clickable link</a></li>
                                                                <li><a href="#">Clickable link</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a href="#">Clickable link</a>
                                                            <ul>
                                                                <li><a href="#">Clickable link</a></li>
                                                                <li><a href="#">Clickable link</a></li>
                                                                <li><a href="#">Clickable link</a></li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li><a href="#">Clickable link</a></li>
                                                <li><a href="#">Clickable link</a></li>
                                                <li><a href="#">Clickable link</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Clickable link</a>
                                            <ul>
                                                <li><a href="#">Clickable link</a></li>
                                                <li><a href="#">Clickable link</a></li>
                                                <li><a href="#">Clickable link</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Clickable link</a>
                                            <ul>
                                                <li><a href="#">Clickable link</a></li>
                                                <li><a href="#">Clickable link</a></li>
                                                <li><a href="#">Clickable link</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Clickable link Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                    </ul>
                </li>
                <li><a href="#">Clickable link</a></li>
                <li><a href="#">Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Clickable link</a>
            <ul>
                <li><a href="#">Clickable link</a></li>
                <li><a href="#">Clickable link</a></li>
                <li><a href="#">Clickable link</a></li>
            </ul>
        </li>
        <li><a href="#">Clickable link</a></li>
        <li><a href="#">Clickable link</a>
            <ul>
                <li><a href="#">Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Clickable link Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                    </ul>
                </li>
                <li><a href="#">Clickable link</a></li>
                <li><a href="#">Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Clickable link</a>
            <ul>
                <li><a href="#">Clickable linkClickable linkClickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Clickable link Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link link link</a></li>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                    </ul>
                </li>
                <li><a href="#">Clickable link link link link link link link</a></li>
                <li><a href="#">Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link link</a></li>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Clickable</a>
            <ul>
                <li><a href="#">Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link link link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clickable link link link</a>
                            <ul>
                                <li><a href="#">Clickable link link link link link link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clickable link link</a>
                            <ul>
                                <li><a href="#">Clickable link link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Clickable link Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                    </ul>
                </li>
                <li><a href="#">Clickable link</a></li>
                <li><a href="#">Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" >

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript" src="js/Menu.js"></script>
<script type="text/javascript">
$(function(){
    $('.menu_vert').liMenuVert({
        delayShow:300,      //Задержка перед появлением выпадающего меню (ms)
        delayHide:300        //Задержка перед исчезанием выпадающего меню (ms)
    });
});
</script>
Материалы по теме:

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

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

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

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

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Вертикальное меню с прокруткойВертикальное меню с прокруткой

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...
Интересные публикации:

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Paris ClarkParis Clark

Красивый html шаблон Paris Clark, на главной странице используется привлекательный слайдер, имеется портфолио, контактная форма......

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....
  • Текущий 1.36/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.4/5( Голосов 14 )

Комментариев в теме: (3)
↑ -1 ↓
Алекс
Такую маниакальную вложенность, как в примере, наблюдаю первый раз  :)
Но что хотел сказать. К сожалению меню, с использованием <ul><li> крайне неудобно для использования в шаблонах Битрикса.
По крайней мере для меня. Перелопатил уже тонну Инета, но ничего вразумительного нет по теме того, что в Битриксе вставки стороннего кода, использующего конструкцию списков <ul><li>, подразумевают визуальное отображение символов меток списка (обычно это жирные точки). Проще говоря, если запустить просто хтмл со стилями и скриптами в браузере, то всё норм. Но если то же самое встроить в страницу битрикс, то всегда наблюдаются маркеры списка.
Ответить Ответ с цитатой
↑ 0 ↓
Пользователь
Прокомментировано пользователя: Алекс
Такую маниакальную вложенность, как в примере, наблюдаю первый раз
Но что хотел сказать. К сожалению меню, с использованием <ul><li> крайне неудобно для использования в шаблонах Битрикса.
По крайней мере для меня. Перелопатил уже тонну Инета, но ничего вразумительного нет по теме того, что в Битриксе вставки стороннего кода, использующего конструкцию списков <ul><li>, подразумевают визуальное отображение символов меток списка (обычно это жирные точки). Проще говоря, если запустить просто хтмл со стилями и скриптами в браузере, то всё норм. Но если то же самое встроить в страницу битрикс, то всегда наблюдаются маркеры списка.

Отправьте на помойку этот ваш битрикс.
Ответить Ответ с цитатой
↑ +1 ↓
ADMIN
Битрикс не юзаю, но по словам нужно просто поправить разметку данного меню + стили.

Ответить Ответ с цитатой

Страницы: 1

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить