Вертикальное меню jquery: Выпадающее вертикальное меню с помощью CSS, JQuery – Вертикальное раздвижное меню на jQuery — Вебджем.рф

Содержание

Оформление меню css. Вертикальное яркое jQuery меню. jQuery оформление выпадающего списка

1. Вертикальное яркое jQuery меню

2. Прикольный эффект. Танцующее меню.

4. Выпадающий список с применением jQuery

Отличная стилизация элемента интерфейса в виде раскрывающегося списка.

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

6. jQuery плагин «MobilyBlocks» для отображения кругового меню

7. Меню с использованием спрайтов

Анимированное javascript меню с эффектом свечения.

Свежее симпатичное меню на jQuery.

9. jQuery меню «GarageDoor»

10. jQuery меню с вертикальной прокруткой

Реализация меню с большим количеством пунктов. Прокручивается при перемещении курсора мыши вверх или вниз.

11. jQuery оформление выпадающего списка

12. Плагин навигации по странице

Плавная прокрутка к нужному разделу на странице. Плагин «jQuery One Page Navigation».

13. Плагин «Animated Content Menu»

Новый jQuery плагин. Отличная реализация анимированной навигации по сайту. При переходе по пунктам меню всплывает блок с описанием и возможными ссылками, при этом в зависимости от выбранного пункта меняется фон страницы, который растягивается на весь экран независимо от размеров окна браузера. Обязательно посмотрите на демонстранционной странице.

14. jQuery плагин меню «Sweet Menu»

Анимированное меню с выезжающими пунктами.

15. Фиксированное jQuery меню

При прокрутке страницы вниз, меню остается зафиксировано сверху экрана.

16. Прокручивающиеся меню «Slider Kit»

Для реализации вертикльного меню с большим количеством пунктов. Прокрутка пунктов осуществляется с помощью колеса мыши, либо с помощью ссылок «Previos» и «Next».

17. Стильное CSS3 меню

18. Новое CSS3 меню в стиле Apple

Новое меню в стиле Apple. Выглядит темнее того, что было ранее, но не менее симпатично.

19. Оригинальное jQuery меню

Выпадающее меню с фоновым эффектом. Подпункты меню разворачиваются вверх. При наведении на пункт меню сменяется фоновое изображение.

20. Анимированное меню на jQuery

Анимированное меню. Пункты меню представлены в виде иконок и описания. несколько отличных эффектов при наведении курсора мышки на пункт меню. Предусмотрено 8 эффектов, чтобы посмотреть их все — пройдите по ссылкам Exemple1-Exemple8 на демонстрационной странице.

21. «Scrolling menu» XML меню с прокруткой

Вертикальное и горизонтально

Создание вертикального меню с помощью jQuery

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

Для начала нам нужно создать структуру HTML. Вводим в верстку атрибут title у каждой ссылки, в котором размещается текст всплывающей подсказки. IE игнорирует атрибутtitle, поэтому будет также использовать текст в img alt

<div>

</div>

Далее мы создаем стили CSS, выглядят они следующим образом:

div.sc_menu_wrapper {

position: relative;

height: 500px;

/* Делаем больше, чем фотография, так как нужно место для полоски прокрутки. */

width: 160px;

margin-top: 30px;

overflow: auto;

}

div.sc_menu {

padding: 15px 0;

}

.sc_menu a {

display: block;

margin-bottom: 5px;

width: 130px;

border: 2px rgb(79, 79, 79) solid;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

/* Когда нет изображений */

color: #fff;

background: rgb(79, 79, 79);

}

.sc_menu a:hover {

border-color: rgb(130, 130, 130);

border-style: dotted;

}

.sc_menu img {

display: block;

border: none;

}

При рассмотрении нашего кода замечаем, что свойство overflow используется для добавления полоски прокрутки к внешнему контейнеру div

. Также нам нужно свойство position для позиционирования наших подсказок. Свойства -webkit-border-radius и -moz-border-radius используются для формирования скругленных углов для Firefox, Safari.

Следующий этап, это подключение jQuery, здесь мы пойдем на маленькую хитрость, чтобы сократить время загрузки меню мы будем использовать библиотеки Google API, так как часто она уже имеется в кэше браузера, что сократит время загрузки страницы:

И так, смотрим, что функция $() — это короткая запись для $(document).ready(), самой используемой функции jQuery. Она позволяет привязывать выполнение скрипта к завершению загрузки DOM документа:

function makeScrollable(wrapper, scrollable){

}

$(function(){

makeScrollable(«div.sc_menu_wrapper», «div.sc_menu»);

});

При медленном интернет подключении стилизируем наше меню индикатором загрузки изображений:

function makeScrollable(wrapper, scrollable){

// Получаем элементы jQuery

var wrapper = $(wrapper), scrollable = $(scrollable);

// Скрываем изображения, пока они не загружены

scrollable.hide();

var loading = $(‘<div>Загрузка…</div>’).appendTo(wrapper);

// Запускаем функцию, которая проверяет загрузку всех изображений

var interval = setInterval(function(){

var images = scrollable.find(‘img’);

var completed = 0;

// Подсчитываем количество загруженных изображений

images.each(function(){

if (this.complete) completed++;

});

if (completed == images.length){

clearInterval(interval);

// Таймаут добавлен для устранения проблем с Chrome

setTimeout(function(){

loading.hide();

// Удаляем полоску прокрутки

wrapper.css({overflow: ‘hidden’});

scrollable.slideDown(‘slow’, function(){

enable();

});

}, 1000);

}

}, 100);

Задаем следующий стиль CSS для индикатора загрузки:

.sc_menu_wrapper .loading {

position: absolute;

top: 50px;

left: 10px;

margin: 0 auto;

padding: 10px;

width: 100px;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

text-align: center;

color: #fff;

border: 1px solid rgb(79, 79, 79);

background: #1F1D1D;

}

И вот самый интересный момент при создании , это оживление меню при наведении курсора мыши, мы будем использовать событие mousemove для функции, которая запускается при перемещении курсора мыши по меню. Также меню должно перемещаться быстрее, чем курсор мыши. Поэтому мы используем пропорцию(scrollableHeight — wrapperHeight) / wrapperHeight.

function enable(){

// Высота области вверху и внизу, в которой нет реакции на перемещение курсора мыши

var inactiveMargin = 99;

// Кэшируем параметры для повышения производительности

var wrapperWidth = wrapper.width();

var wrapperHeight = wrapper.height();

// Используем наружную высоту для включения отступов

var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;

//Когда пользователь перемещает курсор мыши по меню

wrapper.mousemove(function(e){

var wrapperOffset = wrapper.offset();

// Прокручиваем меню

var top = (e.pageY — wrapperOffset.top) * (scrollableHeight — wrapperHeight) / wrapperHeight — inactiveMargin;

if (top < 0){

top = 0;

}

wrapper.scrollTop(top);

});

}

При наведении курсора на картинку в меню, высвечиваются подсказки, которые имеют следующий стиль:

/* Стили для подсказок */

.sc_menu_tooltip {

display: block;

position: absolute;

padding: 6px;

font-size: 12px;

color:

Вертикальное меню для сайта с помощью JS и CSS

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

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

Шаг 1. HTML

Для примера мы берем первый основной блок, который мы заключаем в общий класс, который будет содержать все разделы навигации, затем мы добавляем стилизацию иконкой, а также стили для текста и галочки-индикатора:

<ul>

<li>

<div><i></i>Интересно<i></i></div>

<ul>

<li><a href=»#»>Photoshop</a></li>

<li><a href=»#»>Maquetacion web</a></li>

</ul>

</li>

</ul>

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

Шаг 2. CSS

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

.accordion {

width: 100%;

max-width: 360px;

margin: 30px auto 20px;

background: #FFF;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

.accordion .link {

cursor: pointer;

display: block;

padding: 15px 15px 15px 42px;

color: #4D4D4D;

font-size: 14px;

font-weight: 700;

border-bottom: 1px solid #CCC;

position: relative;

-webkit-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;

}

.accordion li:last-child .link {

border-bottom: 0;

}

.accordion li i {

position: absolute;

top: 16px;

left: 12px;

font-size: 18px;

color: #595959;

-webkit-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;

}

.accordion li i.fa-chevron-down {

right: 12px;

left: auto;

font-size: 16px;

}

.accordion li.open .link {

color: #b63b4d;

}

.accordion li.open i {

color: #b63b4d;

}

.accordion li.open i.fa-chevron-down {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

.submenu {

display: none;

background: #444359;

font-size: 14px;

}

.submenu li {

border-bottom: 1px solid #4b4a5e;

}

.submenu a {

display: block;

text-decoration: none;

color: #d9d9d9;

padding: 12px;

padding-left: 42px;

-webkit-transition: all 0.25s ease;

-o-transition: all 0.25s ease;

transition: all 0.25s ease;

}

.submenu a:hover {

background: #b63b4d;

color: #FFF;

}

Также мы добавили элементы трансформации цвета при наведении курсора мыши. Что позволит нам более оживить навигацию и сделать ее более отзывчивой.

Шаг 3. JS

Теперь нам необходимо активировать наше меню, добавив ему функции управления мышью:

$(function() {

var Accordion = function(el, multiple) {

this.el = el || {};

this.multiple = multiple || false;

var links = this.el.find(‘.link’);

links.on(‘click’, {el: this.el, multiple: this.multiple}, this.dropdown)

}

Accordion.prototype.dropdown = function(e) {

var $el = e.data.el;

$this = $(this),

$next = $this.next();

$next.slideToggle();

$this.parent().toggleClass(‘open’);

if (!e.data.multiple) {

$el.find(‘.submenu’).not($next).slideUp().parent().removeClass(‘open’);

};

}

var accordion = new Accordion($(‘#accordion’), false);

});

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

Вот и все. Готово!

Стильное стеклянное вертикальное меню на CSS3 и jQuery

.navigation {

border: 1px solid rgba(255, 255, 255, 0.1);

height: 100%;

width: 320px;

background-color: rgba(255, 255, 255, 0.1);

color: #fff;

position: fixed;

z-index: 9999;

top: 0;

right: calc(100% — 320px);

transition: right 0.5s;

}

.navigation .toggle-wrapper {

border: 1px solid rgba(255, 255, 255, 0.1);

border-left: none;

height: 52px;

width: 51px;

background-color: rgba(255, 255, 255, 0.1);

overflow: hidden;

position: absolute;

top: -1px;

right: calc(0px — 52px);

}

.navigation .toggle-wrapper span {

width: 50px;

height: 50px;

line-height: 50px;

text-align: center;

background-color: transparent;

color: inherit;

cursor: pointer;

position: absolute;

top: 0;

right: 0;

transition: right 0.25s;

}

.navigation .toggle-wrapper .show {

right: -50px;

}

.navigation .heading {

padding: 15px;

height: 51px;

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

line-height: 20px;

}

.navigation .menu {

list-style-type: none;

}

.navigation .menu li {

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.navigation .menu a {

display: block;

padding: 15px;

line-height: 20px;

color: #fff;

text-decoration: none;

position: relative;

z-index: 0;

}

.navigation .menu a::after {

content: «»;

background-color: rgba(255, 255, 255, 0.1);

position: absolute;

top: 0;

right: 100%;

bottom: 0;

left: 0;

transition: left 0.25s, right 0.25s;

}

.navigation .menu a:hover::after {

right: 0;

}

.navigation .has-menu {

position: relative;

}

.navigation .has-menu::before {

content: «»;

border-left: 1px solid rgba(255, 255, 255, 0.1);

height: 50px;

width: 50px;

cursor: pointer;

position: absolute;

top: 0;

right: 0;

z-index: 1;

}

.navigation .has-menu::after {

content: «\027A4»;

padding: 15px 0;

height: 50px;

width: 50px;

line-height: 20px;

text-align: center;

cursor: pointer;

position: absolute;

top: 0;

right: 0;

z-index: 1;

transform: rotate(90deg);

transition: transform 0.25s;

}

.navigation .has-menu > .menu {

overflow: hidden;

max-height: auto;

}

.navigation .menu .menu {

border-top: 1px solid rgba(255, 255, 255, 0.1);

}

.navigation .has-menu > .menu > li > a {

padding-left: 45px;

transition: padding 1s;

}

.navigation .has-menu > .menu > li:last-child {

border-bottom: none;

}

/* Closed States */

.navigation:not(.open) {

right: 100%;

}

.navigation:not(.open) .toggle-wrapper .show {

right: 0px;

}

.navigation:not(.open) .toggle-wrapper .hide {

right: 50px;

}

.navigation .has-menu:not(.open)::after {

transform: rotate(-90deg);

}

.navigation .has-menu:not(.open) > .menu {

border-top: none;

max-height: 0;

}

.navigation .has-menu:not(.open) > .menu > li > a {

padding-left: 15px;

}

Тёмное вертикальное меню-аккордеон на jQuery

<ul>

<ul>

<li><a href=»index.php?id=2a#ex1″>Subitem 2a</a></li>

<li><a href=»index.php?id=2b#ex1″>Subitem 2b</a></li>

<li><a href=»index.php?id=2c#ex1″>Subitem 2c</a></li>

<li><a href=»index.php?id=2d#ex1″>Subitem 2d</a></li>

<li><a href=»index.php?id=2e#ex1″>Subitem 2e</a></li>

</ul>

</li>

<ul>

<li><a href=»index.php?id=5a#ex1″>Subitem 5a</a></li>

<li><a href=»index.php?id=5b#ex1″>Subitem 5b</a></li>

<li><a href=»index.php?id=5c#ex1″>Subitem 5c</a></li>

</ul>

</li>

<ul>

<li><a href=»index.php?id=7a#ex1″>Subitem 7a</a></li>

<li><a href=»index.php?id=7b#ex1″>Subitem 7b</a></li>

<li><a href=»index.php?id=7c#ex1″>Subitem 7c</a></li>

<li><a href=»index.php?id=7d#ex1″>Subitem 7d</a></li>

</ul>

</li>

<ul>

<li><a href=»index.php?id=8a#ex1″>Subitem 8a</a></li>

<li><a href=»index.php?id=8b#ex1″>Subitem 8b</a></li>

<li><a href=»index.php?id=8c#ex1″>Subitem 8c</a></li>

<li><a href=»index.php?id=8d#ex1″>Subitem 8d</a></li>

<li><a href=»index.php?id=8e#ex1″>Subitem 8e</a></li>

<li><a href=»index.php?id=8f#ex1″>Subitem 8f</a></li>

</ul>

</li>

<ul>

<li><a href=»index.php?id=9a#ex1″>Subitem 9a</a></li>

<li><a href=»index.php?id=9b#ex1″>Subitem 9b</a></li>

<li><a href=»index.php?id=9c#ex1″>Subitem 9c</a></li>

<li><a href=»index.php?id=9d#ex1″>Subitem 9d</a></li>

<li><a href=»index.php?id=9e#ex1″>Subitem 9e</a></li>

</ul>

</li>

</ul>

«Умное» раскрывающееся вертикальное меню на jquery за 2 минуты

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

Допустим, у нас есть такое праймари меню:

Топ 100
Графика
- Абстракция
- Кино
- Компьютерная графика

Задача.
При нажатии на пункт меню, который не имеет подменю, должна открываться новая страница (как в обычном меню). А если пункт меню имеет подменю, то страница не должна открываться, а должно выезжать подменю. Надо написать «умный» скрипт, который будет за этим следить.

Решение
Сначала выводим в нужное нам место праймари меню. Можно через блок, можно через page.tpl.php, кому как удобнее. Я обычно вывожу вторым способом:

<?php if ($primary_links): ?>
  <div id = "menu"><?php print menu_tree('primary-links'); ?></div>
<?php endif; ?>

В общем, вывели меню. Для него подойдёт следующий css:

div#menu ul {
  padding: 0;
}
 
div#menu ul li {
  display: block;
  border-bottom: 1px solid #211f1b;
  margin-bottom: 5px;
  padding: 0;
}
 
div#menu ul li a {
  color:#211F1B;
  display:block;
  font-family:Verdana;
  font-size:18px;	
  font-weight:bold;
  padding:5px 0;
}
 
div#menu ul li a:hover,
div#menu ul li a.active,
div#menu ul li a:active {
  color: #005693;
  text-decoration: none;	
  outline: none;
}
 
div#menu ul ul {
  display: none; /* собственно, самое важное :) */
}	
 
div#menu ul ul li {
  border: none;
  margin: 0;
}
 
div#menu ul ul li a {
  font-size: 11px;	
  padding-left: 20px;
}
 
div#menu ul ul li a:hover,
div#menu ul ul li.active-trail a {
  background: #b7b7b7;
  color: #fff;
}
 
div#menu ul ul li.active-trail ul li a {
  background: #fff;
  color: #000;
}

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

$(document).ready(function() {
  $('div#menu>ul>li>a').click(function() {
    if ($(this).parent().find('ul').length) {
      $(this).parent().find('ul').slideToggle(200);				
      return false;
    }
  });
});

Подключаем наш скрипт в шаблон. Чистим кэш. Проверяем, наслаждаемся.

Таким же образом можно сделать и горизонтальное меню, слегка поменяв css.

Вертикальное меню jquery: Выпадающее вертикальное меню с помощью CSS, JQuery – Вертикальное раздвижное меню на jQuery

Оформление меню css. Вертикальное яркое jQuery меню. jQuery оформление выпадающего списка

1. Вертикальное яркое jQuery меню

2. Прикольный эффект. Танцующее меню.

4. Выпадающий список с применением jQuery

6. jQuery плагин «MobilyBlocks» для отображения кругового меню

7. Меню с использованием спрайтов

9. jQuery меню «GarageDoor»

10. jQuery меню с вертикальной прокруткой

11. jQuery оформление выпадающего списка

12. Плагин навигации по странице

13. Плагин «Animated Content Menu»

14. jQuery плагин меню «Sweet Menu»

15. Фиксированное jQuery меню

16. Прокручивающиеся меню «Slider Kit»

17. Стильное CSS3 меню

18. Новое CSS3 меню в стиле Apple

19. Оригинальное jQuery меню

20. Анимированное меню на jQuery

21. «Scrolling menu» XML меню с прокруткой

Создание вертикального меню с помощью jQuery

Вертикальное меню для сайта с помощью JS и CSS

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JS

Вот и все. Готово!

Читайте также:

Стильное стеклянное вертикальное меню на CSS3 и jQuery

Тёмное вертикальное меню-аккордеон на jQuery

«Умное» раскрывающееся вертикальное меню на jquery за 2 минуты

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

Рубрики