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

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

ОБСУЖДЕНИЕ

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

Вертикальное многоуровневое меню на css и JQuery
Просмотров: 4653  Скачан: 331 раз  Комментариев в теме: 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>
Материалы по теме:

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

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

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

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

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

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

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

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

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

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

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

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

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......
Интересные публикации:

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи на PH...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......

HTML шаблон ImagoHTML шаблон Imago

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Меню с выпадающими пунктами на css

Вкладки контента css3Вкладки контента css3

Красивые вкладки контента реализованные с помощью css3...

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......
  • Текущий 1.45/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

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

Страницы: 1

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


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