Создание необычного выезжающего меню с использованием jQuery
В этом уроке мы создадим необычное выезжающее снизу меню. У пунктов этого большого меню будет название и описание. Оно будет выезжать снизу, открывая описание и уменьшенное изображение. Мы будем использовать свойства CSS3 для интересных эффектов тени и jQuery для взаимодействия.
Демонстрация работы – Скачать исходный код
Набор уменьшенных изображений Luna Grey можно скачать с сайта DryIcons.
Мы не можем предоставить их вместе с исходным кодом, но мы не меняли их названия, так что вы легко сможете их использовать.
Давайте начнем с разметки.
Разметка
Меню будет находиться в контейнере. Оно будет состоять из ненумерованного списка с элементами ссылок внутри. Элементы ссылок будут содержать два тега span: один для названия и второй для описания. У нас также будет элемент для уменьшенного изображения:
<div>
<ul>
<li>
<a>
<i></i>
<span>About</span>
<span>
Learn about us and our services
</span>
</a>
</li>
<li>
<a>
<i></i>
<span>Work</span>
<span>
See our work and portfolio
</span>
</a>
</li>
<li>
<a>
<i></i>
<span>Help</span>
<span>
Talk to our support
</span>
</a>
</li>
<li>
<a>
<i></i>
<span>Search</span>
<span>
Search our website
</span>
</a>
</li>
</ul>
</div>Не забудьте приспособить элемент ссылки, добавить адрес ссылки в параметр href по необходимости.
CSS
Давайте начнем со стилей окружающего блока. У него будет относительное позиционирование, так как у меню будет абсолютное позиционирование. Нам придется спрятать часть, содержащую описание, у элементов меню, для этого мы спрячем все переполнение блока. Если Вы поместите это меню с абсолютным позиционированием на страницу, например, снизу, часть с описанием просто исчезнет за краем окна. Этот блок позволит Вам увидеть, как реализовать это меню, относительно спозиционированное к некоторым другим элементам:
.container{
width:900px;
height:130px;
margin:0 auto;
position:relative;
overflow:hidden;
border:3px solid #fff;
background-color:#fff;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
border-radius:0px 0px 20px 20px;
}Мы создадим милые тени и закругленные границы с помощью свойств CSS3. Не забывайте, что они будут работать только в современных браузерах, в основном во всех, кроме браузера Internet Explorer. У списка будет такой стиль:
ul#menu{
list-style:none;
position:absolute;
bottom:0px;
left:20px;
font-size:36px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color:#999;
letter-spacing:-2px;
}
ul#menu li{
float:left;
margin:0px 10px 0px 0px;
}
ul#menu a{
cursor:pointer;
position:relative;
float:left;
bottom:-95px;
line-height:20px;
width:210px;
}Как Вы видите, мы прячем элемент ссылок вниз, чтобы также почти полностью скрыть тег span с описанием. Мы делаем это, задавая отрицательное значение нижнего расположения по вертикали. Вы можете подогнать это значение, чтобы тег span чуть-чуть появлялся или не появлялся совсем.
Теперь давайте рассмотрим классы уменьшенных изображений:
.icon_about,
.icon_work,
.icon_help,
.icon_search{
width:64px;
height:64px;
display:block;
left:140px;
top:50px;
position:absolute;
}
.icon_about{
background:transparent url(../images/id_card.png) no-repeat top left;
}
.icon_work{
background:transparent url(../images/globe.png) no-repeat top left;
}
.icon_help{
background:transparent url(../images/help.png) no-repeat top left;
}
.icon_search{
background:transparent url(../images/find.png) no-repeat top left;
}У тегов span названия и описания будут такие стили:
ul#menu span.title{
display:block;
height:26px;
text-shadow:1px 1px 1px #000;
color:#B7B7B6;
text-indent:10px;
}
ul#menu span.description{
width:140px;
height:80px;
background-color:#B7B7B6;
border:3px solid #fff;
color:#fff;
display:block;
font-size:24px;
padding:10px;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
box-shadow:1px 1px 6px #000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}Мы также хотим, чтобы эти два тега span меняли цвет текста и фона, так что мы определим эти стили, которые применятся, когда пользователь наведет указатель мыши на родительский элемент ссылки:
ul#menu a:hover span.description{
background-color:#54504F;
}
ul#menu a:hover span.title{
color:#54504F;
}И это все для стилей. Теперь давайте добавим милых эффектов для взаимодействий с помощью jQuery.
Javascript
Javascript будет довольно прямолинейным, так как мы только выдвинем элемент ссылки и уменьшенное изображение. Следующая функция сделает это, а также обратное действие, когда мы отодвинем указатель мыши:
$(function() {
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-15px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 400);
},
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-95px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 400);
}
);
});Чтобы выдвинуть элемент ссылки, мы изменим значение нижнего расположения по вертикали и анимируем это. Мы изменим значение верхнего расположения по вертикали для уменьшенного изображения и дадим эффекту побольше времени, так как мы хотим создать небольшую задержку.
И это все! Наслаждайтесь!
Демонстрация работы – Скачать исходный код
Автор урока Mary Lou
Смотрите также:
Создаем выезжающее меню с использованием CSS и jQuery
В этом уроке мы покажем, как создать выезжающее меню для вашего веб-сайта. Меню будет почти полностью спрятанным, элементы будут выезжать только когда пользователь наводит указатель мыши на область вблизи меню. Это создает очень красивый эффект, и использование этой техники может освободить немного места на вашем сайте. Элементы будут полупрозрачными, так что то, что находится под ними, не будет полностью спрятано.
Демонстрация работы – Скачать исходный код
Уменьшенные изображения, которые мы будем использовать, взяты из наборов цветных наклеек 1, 2, 3 и 4, созданных DryIcons. Их не разрешено распространять под свободной лицензией, так что мы не можем включить их в исходный код для этого урока.
Итак, давайте приступим к работе.
Структура html
Единственное, что нам нужно для этого меню, — это простой ненумерованный список с ссылками внутри элементов списка:
<ul> <li><a title="Home"></a></li> <li><a title="About"></a></li> <li><a title="Search"></a></li> <li><a title="Photos"></a></li> <li><a title="Rss Feed"></a></li> <li><a title="Podcasts"></a></li> <li><a title="Contact"></a></li> </ul>
Мы присваиваем списку идентификатор, потому что мы хотим сослаться на него позднее в JavaScript. С помощью jQuery мы заставим ссылочные элементы выезжать, когда мы наводим указатель мыши на элементы списка.
CSS
Сначала мы определим свойства CSS для этого списка:
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}Меню должно быть всегда доступно для пользователя, даже если он прокручивает страницу до самого низа. Так что положение должно быть зафиксированным. Внешние и внутренние отступы установлены в 0, так как у ненумерованного списка есть для них значения по умолчанию. Меню также должно быть выше всех других элементов на странице. Поэтому мы устанавливаем значение
Теперь давайте рассмотрим свойства элементов списка:
ul#navigation li {
width: 100px;
}Для ссылок в этих элементах списка мы определим следующие свойства CSS:
ul#navigation li a {
display: block;
margin-left: -85px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
}У внешнего левого отступа установлено отрицательное значение, так как мы хотим спрятать большую часть уменьшенных изображений и показать их, только когда мы наведем указатель мыши на элемент списка. Мы изначально выталкиваем ссылочные элементы влево, за пределы видимой области страницы:
В JavaScript мы определим функцию, которая заставит элементы выезжать. Но сначала давайте добавим им слегка скругленные углы, которые, к сожалению, не будут работать в браузере Internet Explorer:
ul#navigation li a {
display: block;
margin-left: -85px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
}Чтобы сделать их очень аккуратными, мы добавим прозрачности, так что то, что находится под ними, будет видимым.
ul#navigation li a {
display: block;
margin-left: -85px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}Последнее свойство фильтра заставит это все работать также в браузере Internet Explorer.
Это были общие свойства всех ссылочных элементов в списке. Сейчас мы определим фоновые изображения для ссылок в определенных элементах списка:
ul#navigation .home a{
background-image: url(../images/home.png);
}
ul#navigation .about a {
background-image: url(../images/id_card.png);
}
ul#navigation .search a {
background-image: url(../images/search.png);
}
ul#navigation .podcasts a {
background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a {
background-image: url(../images/rss.png);
}
ul#navigation .photos a {
background-image: url(../images/camera.png);
}
ul#navigation .contact a {
background-image: url(../images/mail.png);
}Это все, что касается CSS. Теперь давайте рассмотрим код JavaScript, который оживит меню.
JavaScript
Мы заставим иконки появляться с помощью jQuery, когда мы наводим указатель мыши на один из элементов списка. Запомните, что сам элемент списка имеет ширину 100 пикселей, но ссылочный элемент выталкивается влево, за пределы видимой области страницы, так что он невидим.
Мы определим следующую функцию до конца тега body, которая будет выполняться каждый раз, когда мы наводим указатель мыши на элемент списка:
$(function() {
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});Когда мы наводим указатель мыши, мы хотим, чтобы определенный ссылочный элемент получил значение левого внешнего отступа -2 пикселя, и чтобы это было красиво анимировано, и происходило не слишком медленно, 200 миллисекунд. Отодвигание указателя мыши должно вернуть ссылочный элемент назад на его старое место, на -85 пикселей. Функция остановки остановит все выполняемые на данный момент анимации на всех выбранных элементах, что даст нам красивый эффект, когда, например, мы проводим указатель мыши надо всеми элементами очень быстро.
Так же будет очень мило предупредить пользователя о том, что на Вашем сайте есть такое замечательное меню. В нынешнем состоянии пользователь едва увидит серые границы, высовывающиеся из левого края страницы. Так что мы покажем меню ненадолго, когда страница загружается. Итак, вот как мы это сделаем.
Мы изначально позволим меню быть видимым. Для этого мы изменим значение левого внешнего отступа для ссылочных элементов:
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}И мы добавим следующий код в начало функции JavaScript:
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});С помощью этого кода мы определили, что изменение значения левого внешнего отступа на -85 пикселей для всех ссылочных элементов должно занять 1 секунду. С помощью изменения значения этого отступа мы покажем пользователю меню, которое потом спрячем с помощью JavaScript.
И это все!
Если Вам нравятся тени, Вы также можете добавить этот код к свойствам ссылочного элемента:
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
}Добавление тени блока и прозрачности создаст иллюзию объема у элементов меню. Если оставить их полупрозрачными, это тоже будет выглядеть отлично, попробуйте и наслаждайтесь!
Вы также можете посмотреть альтернативную версию этого урока на английском языке здесь. Его перевод будет выложен в ближайшее время.
Демонстрация работы – Скачать исходный код
Автор урока Mary Lou
Перевод — Дежурка
Смотрите также:
Обзор 30 лучших бесплатных jQuery меню навигации
С помощью возможностей JQuery мы можем превратить меню навигации в динамическое меню. Хотя сейчас для создания динамической навигации можно использовать только CSS3, JQuery делает меню еще более функциональным.
Помимо динамических функций, дизайн также играет немаловажную роль. Хотя бы потому, что это то, что посетители видят в первую очередь, когда заходят на ваш сайт.
Если меню будет непрезентабельным, это даст пользователям плохой опыт взаимодействия. Хороший дизайн меню в свою очередь увеличит качество вашего сайта, и даст лучший опыт взаимодействия пользователей.
Сегодня я представляю вам 30 отличных примеров JQuery меню навигации.
1. Pushy
Pushy адаптивное, не привязанное к холсту меню навигации, использующее преобразования и переходы CSS. Оно отлично работает на мобильных устройствах. Обязательно посмотрите демо, и оно определенно вам понравится.
Демо | Скачать
2. Slinky
Это еще одно отличное JQuery-меню для создания красивых прокручиваемых списков навигации. Его отличительной чертой является малый размер исходных файлов.
Демо | Скачать
3. jQuery Pop Menu
Это простое адаптивное всплывающее меню с очень интересными функциями. При нажатии на иконку меню, всплывает окно меню с иконками элементов. Посмотрите демо.
Демо | Скачать
4. Slidebars
Slidebars – JQuery фреймворк для быстрой и простой реализации стилей приложения без привязки к холсту. Slidebars также обрабатывает изменения ориентации и изменение размеров.
Демо | Скачать
5. jQuery Square Menu
JQuery меню, которое выводит квадратное анимированное меню сайта с помощью JQuery и CSS3. Убедитесь в этом, посмотрев демо.
Демо | Скачать
Это jQuery меню навигации превращает страницу в 3D меню. Идея заключается в том, чтобы создать дизайн мобильного приложения, в котором при клике по иконке меню, содержимое страницы сдвигается в сторону, а меню выводится на передний план.
Демо | Скачать
Плагин для создания адаптивного мобильного jQuery меню с несколькими уровнями и гибкой, но простой настройкой. Совместим с разными браузерами, возможна навигация с помощью клавиатуры.
Демо | Скачать
jQuery меню для приложений с привязкой и без привязки к холсту с всплывающими подпунктами. Благодаря многочисленным опциях, адд-онам и расширениям, возможна очень гибкая настройка меню.
Демо | Скачать
9. Sidr
jQuery плагин для создания меню и простого добавления адаптивных функций. С помощью Sidr вы сможете создавать различные элементы своего сайта, а также адаптивные меню.
Демо | Скачать
10. slimMenu
slimMenu – это небольшой jQuery плагин, который поможет вам в разработке адаптивных, многоуровневых меню навигации. Что самое классное в нем, так это то, что вы можете иметь несколько разных меню, и все они будут абсолютно адаптивны.
Демо | Скачать
jQuery меню навигации, позволяющее задать горизонтальное меню по всей ширине контейнера. С помощью этого плагина это делается очень просто. Кроме того можно реализовать поддержку для IE7.
Демо | Скачать
Это mobile-first пример использования медиа запросов и JavaScript для создания отличного многоуровневого меню с поддержкой сенсорных экранов, эффектов наведения и навигации с помощью клавиатуры.
Демо | Скачать
13. jQuery Menu-Aim
jQuery меню, которое запускает события при наведении курсора мыши на выпадающий элемент меню. Идеально подходит для создания адаптивных выпадающих меню, как на Amazon.
Демо | Скачать
14. SmartMenus
Плагин jQuery меню, который предлагает простой и интуитивный способ вывода меню. Создает адаптивные списки меню. Работает на всех устройствах!
Демо | Скачать
15. Shifter
Shifter – простой в использовании mobile-first jQuery плагин для создания слайд-меню, выезжающих с правой стороны при нажатии на кнопку переключения. Для настройки существует только одна опция maxWidth. Она позволяет настроить разрешение/ориентацию для мобильных устройств.
Демо | Скачать
16. Hamburger
Hamburger – это jQuery плагин для создания слайд-меню в стиле Android App, в котором по правому краю экрана размещается всплывающее меню. При раскрытии меню в полном размере, оно перекрывает область контента, но не панель действий.
Демо | Скачать
17. Focucss
Focucss – jQuery меню навигации, с помощью которого создается не привязанное к холсту меню в сайдбаре с крутыми функциями размытости, с помощью которых вы можете обратить внимание пользователей на основные разделы сайта и сделать менее заметными не слишком полезные разделы.
Демо | Скачать
18. Drawer
Drawer – jQuery плагин для создания адаптивного, анимированного меню, выезжающего при нажатии из боковой области экрана. Подобные функции вы могли видеть в Android-приложениях.
Демо | Скачать
Datmenu – премиум jQuery адаптивное меню с различными функциями CSS3 анимации. Что самое замечательное в этом плагине, так это возможность полной настройки с помощью js-опций.
Демо | Скачать
20. jPanelMenu
jPanelMenu – красивое и современное jQuery меню, позволяющее создавать панельное меню навигации с функциями переходов CSS3 анимации. Стиль jPanelMenu напоминает мобильные версии Facebook и Google. Плагин может использоваться для разнообразных мобильных приложений.
Демо | Скачать
21. Fly Side Menu
Fly Side Menu – крутой плагин меню навигации, который использует CSS3 для создания бокового меню с 3D преобразованиями и переходами.
Демо | Скачать
22. PageScroll jQuery Menu Plugin
PageScroll – настраиваемое мобильное jQuery-меню, рекомендованное для использования на любых веб-сайтах, а также целевых страницах.
Демо | Скачать
23. DD Icon Menu
DD Icon Menu – это jQuery плагин, который позволяет создавать вертикальное меню иконок, расположенное на краю экрана с разворачивающимися при наведении подпунктами меню.
Демо | Скачать
jQuery меню, позволяющее осуществлять навигацию по датам в выбранном диапазоне (неделя, месяц или год). Идеально для запросов информации с помощью вызовов AJAX.
Демо | Скачать
jQuery плагин меню навигации, позволяющий очень просто создавать мобильные меню. Использует CSS переходы для установки позиции меню на мобильных устройствах.
Демо | Скачать
26. Multi-Level Push Menu
Multi-Level Push Menu – это Javascript библиотека, созданная MARY LOU из Codrops. Она создает многоуровневые меню, выезжающие с левой стороны экрана и сдвигающие контент вправо.
Демо | Скачать
27. Box Lid
Box Lid – простой jQuery плагин. позволяющий создавать боковое меню навигации с 3D-эффектами ‘Box Lid’, использующими переходы и преобразования CSS3.
Демо | Скачать
28. JQuery Mobile Slide Menu
jQuery слайд-меню, внешне похожее на мобильные меню Facebook и Path.
Демо | Скачать
scrollNav – это jQuery плагин, который выводит существующий контент веб-страницы, разбивая его на логические разделы и создавая настраиваемый слайд сайдбар навигации.
Демо | Скачать
30. DoubleTapToGo
DoubleTapToGo – это jQuery плагин, который помогает создать удобное многоуровневое адаптивное выпадающее меню.
Демо | Скачать
Заключение
Вот и все! Все эти jQueryплагины обеспечат крутой и приятный дизайн ваших меню. Вы можете использовать их в своих проектах, чтобы произвести впечатление на своих посетителей. Если вам известны другие отличные jQuery меню, напишите об этом в комментариях.
Перевод статьи «The Listed Voyage: 30 Free jQuery Navigation Menus» был подготовлен дружной командой проекта Сайтостроение от А до Я.
7 jQuery плагинов меню для Bootstrap / jQuery плагины и JavaScript решения / Постовой
jQuery, вероятно, самая популярная JavaScript библиотека на сегодняшний день и ее использование для создания всевозможных элементов интерфейса вполне очевидно. Данная подборка содержит 7 плагинов, которые раскрывают всю мощь jQuery в создании привлекательных, удобных и функциональных меню для навигации по сайту.
Смотрите также:
Responsive Bootstrap Mega Menu
Очень мощный плагин для создания мегаменю с широчайшими возможностями: пунктами меню может быть не только текст (в том числе форматированный), но и видеоролики, карты Google, контактные формы, рекламные банеры и много другое. Использует Bootstrap и работает во всех современных браузерах.Yamm
Еще один отличный плагин меню для фреймворка Bootstrap. Он использует стандартную разметку навигационной панели, работает как с фиксированной, так и с адаптивной версткой и позволяет размещать практически все элементы Bootstrap.
Прекрасная иллюстрация использования плагина Bootstrap Affix для создания фиксированных меню с тенью, придающих дизайну определенную объемность. Правда учтите, что такая панель не отображается на меленьких экранах.
HOE Navigation Menu содержит как горизонтальную, так и вертикальную панель и поддерживает до 4 уровней вложенности, которые открываются с различными эффектами. Довольно легкий и быстрый плагин, использующий CSS3 и jQuery.
Web Slide – Responsive Mega Menu for Bootstrap 3+
CSS3 и немного JS-кода творят чудеса. Шикарное мегаменю для Bootstrap 3, стильное, современное и адаптивное. Off-canvas меню, accordion меню, верхнее фиксированное, форма контактов и множество других элементов позволят воплотить любой ваш замысел.Стоимость: $10
Созданный с помощью чистого HTML5 и CSS3, этот компонент для навигации прекрасно работает на всех современных устройствах, нетребователен к системным ресурсам и позволяет размещать на нем практически все элементы Bootstrap.
Стоимость: $5
TT Menu
TT меню — это уже профессиональный компонент премиум-класса с широчайшими возможностями: горизонтальным, вертикальным и фиксированным расположением панели, 8 цветовыми схемами и собственным конструктором. Все это позволяет создавать уникальные и эргономичные элементы интерфейса для вашего сайта.Стоимость: $19
