Вертикальное меню jquery: Вертикальное меню аккордеон на jQuery · Блог веб-студии Keengo

Leave a Comment / Разное / By /

jquery — Вертикальное JS меню, прокручивающееся вместе с контентом, но в определенном диапазоне

Вопрос задан

Изменён 9 лет 3 месяца назад

Просмотрен 1k раз

Вопрос до боли избитый и древний, но почему-то хороших решений не нагуглилось…

Итак, есть сайдбар. Сайдбар по высоте может быть больше, чем экран. Хочется избавиться от полос прокрутки внутри сайдбара, так как это ужасно неудобно. Вывод — нужно прокручивать сайдбар вместе с контентом. Но при прокрутке к концу сайдбара он должен прилипнуть к низу экрана. Кроме того наверху есть шапка, на которую этот сайдбар не должен налезать. Такое поведение у блока навигации на news.mail.ru.

Подскажите, есть ли готовые решения?

  • jquery
  • меню
  • html
  • javascript
  • css

Еще такой вариант.

По мотивам Fixed Floating Elements…

UPD По поводу готового решения:

  • jQuery plugin. ScrollToFixed
  • Обсуждение на SO: Fixed Floating Element Stop at Footer
  • Fiddle из ответа

Правда кода в плагине дополна, но работает как надо…

4

Вот набросал быстренько: http://jsfiddle.net/EXAe5/2/

Поведение такое же, движения менюшки ограничены блоком контента.

Кода получилось многовато, завтра попробую уменьшить все это безобразие…

Не плохо было бы увидеть структуру html, т.к. примерчик, я конечно вам сделал, но вот подойдет ли он вам — не факт. Хотя, там всё придельно просто и адаптировать под свою разметку, не должно составить труда.

UPD В общем, как вариант, можно попробовать так сделать.

4

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Вертикальное меню для сайта в виде аккордеона на jQuery

Меню, как известно – неотъемлемая часть сайта. Интересная навигация интернет-ресурса способна заинтересовать посетителей. Кроме того, важное свойство любого меню – его компактность. Простое вертикальное меню легко создается при помощи HTML и CSS. Но мы пойдем дальше: поучимся создавать меню-«аккордеон» при помощи jQuery.

Создаем меню-«аккордеон»

Что такое вертикальное меню в виде аккордеона? Это такой раскрывающийся список, который создает удобную навигацию и придает стильность сайту. Меню, выполненное в таком виде, позволяет включить в себя много подпунктов. Доступ к ним происходит при щелчке мышки по необходимому элементу. Кто-то скажет, что можно сделать простое меню в таком стиле без применения jQuery. Да, это так. Но подобный объект будет не очень удобно использовать обладателям планшетов или смартфонов. Давайте создадим вертикальное меню, привлекательное для всех. Потом, меняя цветовую стилизацию такой навигации, можно будет подстроить дизайн под любой сайт.

Код HTML

Итак, чтобы создать наше вертикальное меню, сначала надо набрать HTML-код, который будет содержать следующие строки:

Сохраните данный код в файле под названием Accord_menu. html.

Как видите, мы создали неупорядоченный список. Он состоит из 3 основных пунктов:

— фотографии;

— фильмы;

— книги.

У каждого пункта есть по несколько подпунктов. Там где стоят #, вам надо будет добавить ссылки. Теперь важно описать стили. Все зависит от того, как выглядит ваш интернет-ресурс. Вертикальное меню для сайта должно гармонично вписываться в его дизайн.

CSS-код

Со стилями у вас не должно быть трудностей. Отметим только, что в данном примере используется градиентная заливка. Вот как выглядит CSS-код:

В CSS-файле задается цвет, размер, убираются маркеры слева от элементов списка. Определяется, как будет вести себя каждый пункт и подпункт меню при наведении на него курсора. К примеру:

#e1fee2 – это нежно-салатовый цвет подпунктов.

#c4f0f7 –голубоватый оттенок подпунктов при наведении на них курсора.

Свойству display задаем значение block, чтобы регулировать необходимые отступы и размеры. Цвет, размер, тип шрифта, расположение – все это также опишите в файле CSS. Назовите его, например, accordionmenu_my1.css.

Подключение jQuery для усовершенствования меню

Как вы помните, наша цель — создать вертикальное меню jQuery. Если вы плохо знакомы с данной технологией, не расстраивайтесь. Воспользуемся репозиторием Google и подключим скрипт JQuery. Это сделает меню привлекательнее. jQuery представляет собой библиотеку JavaScript, основанную на взаимодействии гипертекстовой разметки HTML и JavaScript. jQuery позволяет обращаться к содержимому и атрибутам элементов.

Итак, подключаем необходимый скрипт в теле HTML-файла и задаем правила по хранению 2 переменных, исключая скачки элементов. Вносим код, закрывающий остальные вкладки при открытии той, по которой происходит клик мышью. Вот как это все выглядит:

Сохраните все изменения, посмотрите, как выглядит меню в браузере. Вот общий результат работы:

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

css — Многоуровневое (до 3 уровней) Вертикальное меню с bootstrap/Jquery

Возможно, это не тот ответ, который вы ищете, но это то, что я бы сделал в вашем случае.

Иногда я использую бутстрап, но, как бы он ни был хорош, по моему скромному мнению, люди очень часто думают, что это чудесный код, который может заставить вас делать все, что вы хотите, и в последнее время я обнаружил, что люди тратят больше времени, пытаясь модифицировать бутстрап. css, чем создавать весь css с нуля (если вы немного знакомы с основами css), не говоря уже о том, что так много веб-сайтов «выглядят» так похоже.

Для того, что вы хотите сделать, я бы в основном очистил ВСЕ классы в html и просто вырезал элементы из контейнера, я мог бы сделать меню, как показано на изображении (ну, для этого нужен дополнительный стиль, например, добавление значков со стрелками, тени и тому подобное, но смысл в том, чтобы показать вам другой способ сделать это).

HTML:

 

            <ул>
                
  • 
                    Совет клиентам
                    <ул>
                        
  • Предварительный совет
    • 
                        
  • Стратегия и технические вопросы
    • 
                        
  • Исследования
    • 
                        
  • 
                            APL и продукты
                            <ул>
                                
  • 
                                    <а href="#">
                                        Утвержденный список продуктов
                                    
                                    <ул>
                                        
  • Платформы
    • 
                                        
  • Управляемые фонды
    •  
    
                                        
  • Защита имущества
    • 
                                        
  • Списочные ценные бумаги
    • 
                                        
  • Защита имущества
    • 
                                        
  • Списочные ценные бумаги
    • 
                                        
  • Списочные ценные бумаги
    • 
                                    
                                
                                
  • Портфолио моделей
    • 
                                
  • Неутвержденные продукты
    • 
                            
                        
                        
  • Реализация
    • 
                        
  • Обзор
    • 
                        
  • Только выполнение
    • 
                    
                
                
  • Личностный рост
    • 
                
  • Практика
    •   
  • Новости
    •

    И только этот css (обратите внимание, что когда я напрямую вызываю тег , вам может понадобиться вызвать его по-другому:

     html, body {
    маржа: 0;
    заполнение: 0;
    высота:100%;
}
* {box-sizing: рамка-бокс;}
. контейнер {
    высота:100%;
}
а {
    цвет:#fff;
    текстовое оформление: нет;
    нижняя граница: 1px с точками #fff;
    заполнение: 0px 0px 20px 0px;
    ширина:100%;
    дисплей:блок;
    высота:100%;
}
ли {
    заполнение: 20px 20px 0 20px;
    ширина:100%;
    цвет:#fff;
}
.контейнер ул {высота: 100%;}
.контейнер > ул {
    ширина: 250 пикселей;
    цвет фона:#224490;
    должность: родственница;
    переполнение: видимое;
}
.container > ул > ли {}
.container > ul > li: hover {фоновый цвет: # 0f1e41;}
.container > ул >
     
     
     ли > ул {
    дисплей:нет;
    положение: абсолютное;
    справа:-250px;
    верх:0;
    ширина: 250 пикселей;
    цвет фона:#18316a;
}
.container > ul > li: hover > ul {
    дисплей:блок;
}
.container > ul > li > ul > li: hover {фоновый цвет: # 0f1e41;}
.container > ul > li > ul > li > ul {
    дисплей:нет;
    положение: абсолютное;
    справа:-250px;
    верх:0;
    ширина: 250 пикселей;
    цвет фона:#112551;
}
.container > ul > li > ul > li: hover ul {
    дисплей:блок;
}
. container > ul > li > ul > li > ul > li: hover {фоновый цвет: # 0f1e41;}
.container > ul > li > ul > li ul li ul li {
    нижняя граница: 1px с точками #fff;
    отступ: 20 пикселей;
}

    И я только что сохранил классы, активирующие скрипт, так что не трогайте их.

    FIDDLE

    Я надеюсь, что это может быть полезно для вас. Не стесняйтесь задавать любые вопросы или если вы хотите что-то изменить (и вы не можете, конечно, попробовав), я постараюсь вам помочь.

    javascript — меню вертикальной навигации CSS Jquery с горизонтальными подменю

    Задавать вопрос

    спросил

    Изменено 10 лет, 1 месяц назад

    Просмотрено 3к раз

    Я хочу создать навигационное меню следующим образом:

     |main-item1|
|основной элемент2| |подпункт1| |подпункт2| |подпункт3|
|основной элемент3|
|основной элемент4|

    то, что я вижу сейчас, это:

     |основной-элемент1|
|основной элемент2|
     |подпункт1| |подпункт2| |подпункт3| |основной элемент3| |основной элемент4|

    Я нашел еще один подобный вопрос здесь, в stackoverflow, но мне не удалось адаптировать код.

    HTML-код, который у меня есть:

     
    
        <навигация>
        <ул>
                
  • Чи сиамо
    • 
                
  • Услуги
                <ул>
                    
  • 
                        специальный
                    
    • 
                    
  • 
                        частное
                    
    • 
                    
  • 
                        популярный
                    
    • 
                    
  • 
                        церемония
                    
    • 
                    
  • 
                        Консуленца
                    
    • 
                
                
                
  • Местоположение
    • 
                
  • контакты
    • 
                
  •  партнер
    •

    А это css:

     #mainmenu {
  положение: фиксированное;
  слева: 20 пикселей;
  верх: 50%;
  z-индекс: 999999;
  верхняя граница:-200px;
}
  #главное меню ли {
    высота: 40 пикселей;
    поле: 5px;
    положение: родственник;
  }
  #главное меню {
    фон: нет повтора прокрутки 0 0 #333;
    цвет: #fff;
    дисплей: блок;
    семейство шрифтов: Folio;
    размер шрифта: 30px;
    отступ: 2px 15px;
    текстовое оформление: нет;
    преобразование текста: верхний регистр;
    ширина: 160 пикселей;
    высота: 40 пикселей;
    /*фон: url(Images/dotnav. png) 0 100% без повторов;*/
 /*текстовый отступ: -10000px;*/
    переполнение: скрыто;
  }
  #mainmenu a:наведение,
  #mainmenu li.active {
    фоновая позиция: 0 0;
  }
.подменю
{
    тип стиля списка: нет;
    должность: родственница;
    плыть налево;
}
.submenu ли
{
    дисплей: встроенный;
    плыть налево;
    должность: родственник
}

    Было бы неплохо использовать какой-нибудь плагин jquery, также потому, что я хотел бы добавить некоторый эффект при наведении курсора, но я подумал, что лучше сначала выровнять все с помощью css.

    Спасибо. высота: 40 пикселей; поле: 5px; положение: родственник; ясно: оба

    }

    и перейти к ссылкам:

     #mainmenu a {
плыть налево;
фон: нет повтора прокрутки 0 0 #333;
цвет: #fff;
дисплей: блок;
семейство шрифтов: Folio;
размер шрифта: 30px;
отступ: 2px 15px;
текстовое оформление: нет;
преобразование текста: верхний регистр;
ширина: 160 пикселей;
высота: 40 пикселей;
переполнение: скрыто;
}

    5

    это то, что вам может понадобиться:

    css:

     #mainmenu {
  положение: фиксированное;
  слева: 20 пикселей;
  верх: 50%;
  z-индекс: 999999;
  верхняя граница:-200px;
}
  #главное меню ли {
    высота: 40 пикселей;
    поле: 5px;
    положение: родственник;
  }
  #главное меню {
    фон: нет повтора прокрутки 0 0 #333;
    цвет: #fff;
    дисплей: блок;
    семейство шрифтов: Folio;
    размер шрифта: 30px;
    отступ: 2px 15px;
    текстовое оформление: нет;
    преобразование текста: верхний регистр;
    ширина: 160 пикселей;
    высота: 40 пикселей;
    /*фон: url(Images/dotnav. png) 0 100% без повторов;*/
 /*текстовый отступ: -10000px;*/
    переполнение: скрыто;
  }
  #mainmenu a:наведение,
  #mainmenu li.active {
    фоновая позиция: 0 0;
  }
.подменю
{
    тип стиля списка: нет;
    должность: родственница;
    плыть налево;
}
.submenu ли
{
    дисплей: встроенный;
    плыть налево;
    должность: родственница;
}
#mainmenu .подменю ли {
    поле: 0px;
}

    и HTML

    В html я добавил в «servizi» float слева, а в css я добавил:

     #mainmenu .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *