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

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

ОБСУЖДЕНИЕ

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

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

Вертикальное многоуровневое меню на 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>
Материалы по теме:

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

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

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

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

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

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

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

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

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

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

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

Hope CenterHope Center

Универсальный шаблон Hope Center на HTML5, был разработан для благотворительного сайта, в шаблоне используется красивый слайдер......

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню на css

Горизонтальное многоуровневое фиксированного меню в темном стиле...

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

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

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Menu»

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......
  • Текущий 1.38/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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