Создание меню для сайта на jQuery, с эффектом наложения
От автора: В этом учебнике мы создадим простое меню для сайта на jQueru, которое будет выделяться каждый раз, когда мы проведем над ним мышью, затемняя все вокруг, за исключением меню. Меню останется белым, а область подменю расширится. Мы создадим этот эффект с помощью jQuery.
Перед тем, как мы приступим к созданию меню для сайта на jQuery, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Итак, давайте начнем!
Разметка
Структура HTML будет состоять из основного упаковщика меню div, содержащего наложение, и неупорядоченного списка для меню. Само меню получит ссылку и элемент div, как подменю в своих элементах списка. Каждый из элементов подменю будет содержать списки для колонок подменю, где каждый получит заголовок элемента списка:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
<div>
<div></div>
<ul>
<li>
<a href=»»>Collections</a>
<div>
<ul>
<li>
Summer 2011
</li>
<li><a href=»#»>Milano</a></li>
. ..
</ul>
<ul>
…
</ul>
<ul>
…
</ul>
</div>
</li>
<li>
<a href=»»>Projects</a>
<div>
…
</div>
</li>
<li>
<a href=»»>Fragrances</a>
<div>
<ul>
<li>
Fashion Fragrances
</li>
<li><a href=»#»>Deálure</a></li>
<li><a href=»#»>Violet Woman</a></li>
<li><a href=»#»>Deep Blue for Men</a></li>
<li><a href=»#»>New York, New York</a></li>
<li><a href=»#»>Illusion</a></li>
</ul>
</div>
</li>
<li><a href=»»>Events</a>
<div>
…
</div>
</li>
<li><a href=»»>Stores</a>
<div>
. ..
</div>
</li>
</ul>
</div>
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 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <div> <div></div> <ul> <li> <a href=»»>Collections</a> <div> <ul> <li> Summer 2011 </li> <li><a href=»#»>Milano</a></li> … </ul> <ul> … </ul> <ul> … </ul> </div> </li> <li> <a href=»»>Projects</a> <div> . .. </div> </li> <li> <a href=»»>Fragrances</a> <div> <ul> <li> Fashion Fragrances </li> <li><a href=»#»>Deálure</a></li> <li><a href=»#»>Violet Woman</a></li> <li><a href=»#»>Deep Blue for Men</a></li> <li><a href=»#»>New York, New York</a></li> <li><a href=»#»>Illusion</a></li> </ul> </div> </li> <li><a href=»»>Events</a> <div> … </div> </li> <li><a href=»»>Stores</a> <div> … </div> </li> </ul> </div> |
У каждого из div’ов подменю будут назначены inline-стили для позиций слева. Посмотрев на стиль, мы увидим, что нужно установить это значение, если хотим, чтобы подменю было абсолютно позиционировано, но внутри относительно позиционированного контейнера. Так что для позиционирования всех div’ов подменю вначале всего меню нам нужно «оттащить» каждый div побольше влево, следовательно, так мы получим отрицательное левое значение для каждого div’а (уменьшение на 112px).
Давайте посмотрим на стиль.
CSS
Убедитесь сначала, что вы сбросили все стили (нам для списка не нужно никаких отступов или полей, определенных браузером). Мы начнем с наложения в теле (body), которое является простым div’ом с исходной непрозрачностью, установленной на 0:
.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
.oe_overlay{ background:#000; opacity:0; position:fixed; top:0px; left:0px; width:100%; height:100%; } |
Position будет установлен на fixed, так как нам нужно, чтобы он всегда оставался в левом верхнем углу, заполняя весь экран.
Список основного меню получит следующий стиль:
ul.oe_menu{
list-style:none;
position:relative;
margin:30px 0px 0px 40px;
width:560px;
float:left;
clear:both;
}
ul.oe_menu{ list-style:none; position:relative; margin:30px 0px 0px 40px; width:560px; float:left; clear:both; } |
Вы, возможно, хотели бы применить его способность свободно перемещаться, если планируете его интегрировать куда-нибудь на свой сайт. Что действительно важно — так это расположение пунктов списка.
ul.oe_menu > li{
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
}
ul.oe_menu > li{ width:112px; height:101px; padding-bottom:2px; float:left; position:relative; } |
Они будут позиционированы относительно, так, чтобы у нас были абсолютно расположенные элементы подменю.
Гиперссылка меню верхнего слоя получит следующий стиль, формирующий блок:
ul.oe_menu > li > a{
display:block;
background-color:#101010;
color:#aaa;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:90px;
height:80px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | ul.oe_menu > li > a{ display:block; background-color:#101010; color:#aaa; text-decoration:none; font-weight:bold; font-size:12px; width:90px; height:80px; |
Адаптивное меню для сайта
Время чтения: < 1 мин.
Всем привет!
Сегодня хочу поделиться интересным решением для основного меню.Такой подход может стать альтернативой стандартному выпадающему меню.Кроме того оно уже адаптивно.
Смотреть примерСкачать
Похожие статьи на эту тему:
Добавляем HTML
HTML КОД
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <header> <nav> <ul> <li><a href="#0">О нас</a></li> <li><a href="#0">Проекты</a></li> <li><a href="#0">Блог</a></li> <li><a href="#0">Контакты</a></li> <li> <a href="#0"><span>Категории</span></a> <ul> <li><a href="#0">Меню</a></li> <li><a href="#0">Категория 1</a></li> <li><a href="#0">Категория 2</a></li> <li><a href="#0">Категория 3</a></li> <li><a href="#0">Категория 4</a></li> <li><a href="#0">Категория 5</a></li> <li><a href="#0">Placeholder</a></li> </ul> </li> </ul> <!-- . cd-main-nav --> </nav> <!-- .cd-main-nav-wrapper --> <a href="#0">Menu<span></span></a> </header> |
Вся навигации состоит из двух неупорядоченных списков. Названия разделов и категорий меню вы, соответственно, меняете на свои.
HTML КОД
1
<a href="#0">Menu<span></span></a>
Последняя строка отвечает за навигацию при маленьком разрешении экрана.
Добавляем CSS
Архив с примером содержит файл style.css.
В нем в разделе «Стили для меню» находятся все стили оформления меню в том числе и медиазапросы.
Вы можете скачать весь файл, или добавить стили только для самого меню. Если вы, скачали в свой проект весь style.css, то не забудьте подключить его в свой html файл между тегами <head>.
1
<link rel="stylesheet" href="css/style. css">
Добавляем JQuery
Из архива копируем папку js. И подключаем скрипты в наш html документ.
1
2
3
<script src="js/modernizr.js"></script>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script>
Если в вашем проекте уже есть modernizr.js и jquery-2.1.1.js, то второй раз подключать их не нужно. Меню готово!
Также такой вариант навигации можно использовать для поиска по сайту, формы входа или для ссылок на соц.сети.
Всем удачи!
Источник: Оригинал
С Уважением, Михалев Валентин
Создаем выезжающее меню с использованием 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, так как у ненумерованного списка есть для них значения по умолчанию. Меню также должно быть выше всех других элементов на странице. Поэтому мы устанавливаем значение z-index очень высоким.
Теперь давайте рассмотрим свойства элементов списка:
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
Перевод — Дежурка
Смотрите также:
jQuery Responsive Select Menu — плагин для WordPress
Описание
Считаете ли вы этот плагин полезным? Пожалуйста, оставьте 5-звездочный отзыв.
Идеальное решение, чтобы сделать ваш сайт адаптивным для мобильных устройств, таких как телефоны и планшеты. jQuery Responsive Select Menu позволяет сделать ваши меню WordPress адаптивными, превратив их в раскрывающихся элементов
1
<a href="#0">Menu<span></span></a>
В нем в разделе «Стили для меню» находятся все стили оформления меню в том числе и медиазапросы.
Вы можете скачать весь файл, или добавить стили только для самого меню. Если вы, скачали в свой проект весь style.css, то не забудьте подключить его в свой html файл между тегами <head>.
1
<link rel="stylesheet" href="css/style. css">
1 2 3
<script src="js/modernizr.js"></script> <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script>
раскрывающихся элементов