Горизонтальное выпадающее меню на jQuery
Сегодня я расскажу как легко сделать горизонтальное выпадающее меню на jQuery. В силу его понятности и простоты его можно быстро приспособить к любому дизайну. Например, буквально сегодня, я вставил такое горизонтальное меню в проект на CMS Битрикс. К слову, этот скрипт входит в мою копилку сниппетов.
Html-код меню должен иметь такой вид:
<ul> <li><a href=»#»>JavaScript</a> <ul> <li><a href=»#»>Выпадающее меню</a></li> <li><a href=»#»>jQuery</a></li> <li><a href=»#»>Ajax</a></li> </ul> </li> <li><a href=»#»>Эффекты</a> <ul> <li><a href=»#»>Slide эффект</a></li> <li><a href=»#»>Fade эффект</a></li> </ul> </li> <li><a href=»#»>Навигация</a></li> <li><a href=»#»>HTML/CSS</a></li> <li><a href=»#»>Помощь</a></li> </ul>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul> <li><a href=»#»>JavaScript</a> <ul> <li><a href=»#»>Выпадающее меню</a></li> <li><a href=»#»>jQuery</a></li> <li><a href=»#»>Ajax</a></li> </ul> </li> <li><a href=»#»>Эффекты</a> <ul> <li><a href=»#»>Slide эффект</a></li> <li><a href=»#»>Fade эффект</a></li> </ul> </li> <li><a href=»#»>Навигация</a></li> <li><a href=»#»>HTML/CSS</a></li> <li><a href=»#»>Помощь</a></li> </ul> |
Теперь CSS. Вся прелесть данного скрипта в минимальном использовании селекторов. Фактически, нужен всего лишь ID для списка. Итак, нужно выстроить первый уроверь меню в линию, скрыть вложенные уровни и добавить необходимое оформление. На нашем примере это выглядит так:
#jsddm { margin: 0; padding: 0; } #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; } #jsddm li a { display: block; background: #20548e; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #eaffed; white-space: nowrap; } #jsddm li a:hover { background: #1a4473; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; } #jsddm li ul li { float: none; display: inline; } #jsddm li ul li a { width: auto; background: #9f1b1b; } #jsddm li ul li a:hover { background: #7f1616; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 3334 35 36 37 38 39 40 41 42 43 44 45 46 47 |
#jsddm { margin: 0; padding: 0; }
#jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial; }
#jsddm li a { display: block; background: #20548e; padding: 5px |
Несколько бесплатных решений навигации и меню с использованием JQuery и CSS3 для Ваших сайтов
Здравствуйте, дорогие читатели блога. В этот день я хочу представить Вам несколько простых решений навигации и меню с использованием JQuery и CSS3. Я думаю, что данная подборка очень поможет Вам решить проблему с поиском удобной навигации для Новых проектов, а так же и уже существующих.
Здесь в общем представлены выпадающие и многоуровневые меню, в горизонтальном и вертикальном положении. В тоже время почти вся навигация использует скрипты JQuery, которые существенно всё украшает.
Друзья, как обычно везде присутствуют примеры и прямые ссылки на бесплатные исходники. Так что наслаждайтесь.
Маленькая навигация с использованием JQuery
Пример ι Скачать исходники
Горизонтальное и вертикальное меню с интересным эффектом при наведении
Пример ι Скачать исходники
Фиксированное и горизонтальное меню для сайта
Пример ι Скачать исходники
Несколько разноцветных JQuery многоуровневых меню
Пример ι Скачать исходники
Простая навигация с интересным эффектом при наведении
Пример ι Скачать исходники
Выпадающее JQuery меню для сайтов с тёмным дизайном
Пример ι Скачать исходники
Многоуровневая навигация с JQuery и CSS3
Пример ι Скачать исходники
Горизонтальная и выпадающая тёмная навигация
Пример ι Скачать исходники
Красивое многоуровневое и зелёное JQuery меню
Пример ι Скачать исходники
Серое и горизонтальное меню для Вашего ресурса
Пример ι Скачать исходники
Большая навигация с красивым эффектом при наведении
Пример ι Скачать исходники
Классное вертикальное меню с автопрокруткой
Пример ι Скачать исходники
Очень красивая JQuery навигация с изображениями
Пример ι Скачать исходники
Красивое JQuery меню с голубыми оттенками
Пример ι Скачать исходники
Ещё одно меню в голубых тонах
Пример ι Скачать исходники
Классное и большое меню аккордеон
Пример ι Скачать исходники
Красивая навигация с плавным эффектом при наведении
Пример ι Скачать исходники
Разноцветная навигация для весёлых сайтов
Пример ι Скачать исходники
Красивое и тёмное JQuery меню на сайт
Пример ι Скачать исходники
Простое анимационное меню
Пример ι Скачать исходники
Горизонтальное выпадающее меню.
.cbp-hrmenu {
width: 100%;
margin-top: 2em;
border-bottom: 4px solid #47a3da;
}
/* general ul style */
.cbp-hrmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 90%;
max-width: 70em;
margin: 0 auto;
padding: 0 1.875em;
}
.cbp-hrmenu > ul > li {
display: inline-block;
}
.cbp-hrmenu > ul > li > a {
font-weight: 700;
padding: 1em 2em;
color: #999;
display: inline-block;
}
.cbp-hrmenu > ul > li > a:hover {
color: #47a3da;
}
.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
color: #fff;
background: #47a3da;
}
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
.cbp-hropen .cbp-hrsub {
display: block;
padding-bottom: 3em;
}
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 33%;
float: left;
padding: 0 2em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
content: » «;
display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after {
clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner > div a {
line-height: 2em;
}
.cbp-hrsub h5 {
color: #afdefa;
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
}
/* Examples for media queries */
@media screen and (max-width: 52.75em) {
.cbp-hrmenu {
font-size: 80%;
}
}
@media screen and (max-width: 43em) {
.cbp-hrmenu {
font-size: 120%;
border: none;
}
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 100%;
padding: 0;
}
.cbp-hrmenu .cbp-hrsub-inner {
padding: 0 2em;
font-size: 75%;
}
.cbp-hrmenu > ul > li {
display: block;
border-bottom: 4px solid #47a3da;
}
.cbp-hrmenu > ul > li > a {
display: block;
padding: 1em 3em;
}
.cbp-hrmenu .cbp-hrsub {
position: relative;
}
.cbp-hrsub h5 {
padding-top: 0.6em;
}
}
@media screen and (max-width: 36em) {
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 100%;
float: none;
padding: 0 2em;
}
}
выпадающее » Скрипты для сайтов
9 460 Скрипты / AccordionВертикальное accordion меню
Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.
3 302 Скрипты / AccordionВертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.
4 982 Скрипты / Menu & NavАдаптивное многоуровневое меню
Экспериментальное меню позволяющее с экономить пространство на вашем сайте, где требуется использование много уровневого меню. «Детки» заменяют собой «родителей» не загромождая страницу. Меню можно устанавливать на страницы с адаптивным дизайном.
Выпадающее меню на CSS3
Горизонтальное меню с выпадющими подпунктами с использованием css3.
4 244 Скрипты / Menu & NavДерево меню на jQuery
Древовидное меню на jQuery, как и положено с возможностью раскрытия и скрытия пунктов и подпунктов.
3 062 Скрипты / Menu & NavГоризонтальное меню с выпадающими подпунктами
Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню. 1 562 Скрипты / Menu & NavМеню с эффектом подпрыгивания
Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.
3 506 Скрипты / Menu & NavВыпадающее адаптивное меню
Адаптивное выпадающее CSS3 меню, которое при уменьшении окна браузера превращается в меню вида аккордеон. Проверено в Chrome, Opera, FireFox, IE9, iPad, iPhone. В IE7 и IE8 работает только выпадающее подменю, адаптивность теряется.
Многоуровневое выпадающее меню
Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.
1 540 Скрипты / Menu & NavМногоцветное меню на CSS3
Горизонтальное выпадающее меню, фишка которого состоит в том, что выпадающие блоки могут изменять цвет на тот, по какому из цветных квадратиков вы щелкните мышкой. При этом смена цвета реализована на CSS, а не на jаvascript.
1 978 Скрипты / Menu & NavВыпадающее CSS3 меню
Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.
1 340 Скрипты / Menu & NavПарящее навигационное меню
Реализованное только на CSS3 меню, в котором появление его подпунктов сопровождается анимацией похожей на полет.