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

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

ОБСУЖДЕНИЕ

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

Вертикальное многоуровневое меню на css и JQuery
Просмотров: 5739  Скачан: 358 раз  Комментариев в теме: 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, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

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

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

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

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

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

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

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

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

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......
Интересные публикации:

Hope CenterHope Center

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

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......

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

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

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

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

Шаблон Desire Night ClubШаблон Desire Night Club

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

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

Pack кнопок #3 на CSS3Pack кнопок #3 на CSS3

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....
  • Текущий 1.33/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

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

Страницы: 1

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


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