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

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

ОБСУЖДЕНИЕ

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

Вертикальное многоуровневое меню на css и JQuery
Просмотров: 4089  Скачан: 307 раз  Комментариев в теме: 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Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

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

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

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

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

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

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

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

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

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

Креативное вертикальное меню на css3 и JQuery
Интересные публикации:

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

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

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

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

Красивые кнопки на css3Красивые кнопки на css3

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

Paris ClarkParis Clark

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

MinimoSity v1.1MinimoSity v1.1

Minimosity - стильная тема для wordpress, отлично подойдёт для сайта новостной и журнальной тематики....
  • Текущий 1.33/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

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

Страницы: 1

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


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