Горизонтальное меню для сайта. Создание горизонтального анимированного меню с фиксированной позицией на странице средствами CSS и jQuery

wordpress seo

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

Средствами CSS можно создать навигационное меню, которое будет иметь фиксированное положение в окне браузера, независимо от прокрутки содержимого документа. Этот обучающий материал шаг за шагом показывает процесс создания такого меню. Итак, давайте создадим горизонтальное меню для сайта.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг1. Разметка HTML

Для начала определимся, что мы хотим видеть на навигационной панели, и как она будет работать. Пусть в левой части окна, прямо возле края страницы, будет располагаться что-то вроде закрепленного «ярлычка», который будет плавно «выезжать» когда пользователь будет наводить на него курсор.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

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

<div id="main_menu">
 <ul id="navigation">
 <li><a href="#">Главная</a></li>
 <li><a href="#">Галерея</a></li>
 <li><a href="#">Статьи</a></li>
 <li><a href="#">Новости</a></li>
 <li><a href="#">О нас</a></li>
 <li><a href="#">Контакты</a></li>
 </ul>
 <div id="searchbar">
 <form id="searchform" >
 <input type="text" name="search" />
 <input type="submit" value="" />
 </form>
 </div>
 <span id="menu_label" >МЕНЮ</span>
 </div>

Все должно выглядеть приблизительно так:

Как видим, пункты навигационного меню собраны в неупорядоченный (маркированный) список. Далее идет простая форма поиска с одной кнопкой и одним полем для ввода текста (форма «упакована» в дополнительный блок div – это может понадобиться для CSS). В конце идет элемент span, который содержит текст для «ярлыка». Все это заключено в «контейнер» <div id="main_menu"> с целью более удобного позиционирования.

Шаг 2. CSS

Стили начнем прописывать, начиная с главного «контейнера» навигационной панели <div id="main_menu">:

#main_menu {
 
 float: left;
 position: fixed;
 left: 0px;
 top: 30px;
 
 padding-right: 10px;
 background: #454545;
 background: -moz-linear-gradient(top, #454545, #737373);
 background: -webkit-gradient(linear, center top, center bottom from(#454545,), to(#737373));
 opacity: 0.9;
 
 -moz-border-radius: 0px 10px 10px 0px;
 -webkit-border-bottom-right-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 border-radius: 0px 10px 10px 0px;
 border: 1px solid #eee;
 -moz-box-shadow: 0px 0px 2px #444;
 -webkit-box-shadow: 0px 0px 2px #444;
 box-shadow: 0px 0px 2px #444;
}

Сначала мы задаем фиксированную позицию контейнера position: fixed; – это ключевой момент для всей конструкции. Теперь меню будет на одном месте, несмотря на прокручивание страницы. Свойства left и top задают жесткое позиционирование контейнера относительно краев клиенской области браузера. Два свойства background: -moz-linear-gradient(top, #454545, #737373); и background: -webkit-gradient(linear, center top, center bottom from(#454545,), to(#737373)); позволяют сделать задний фон панели градиентным, перед этим мы определяем свойство background: #454545; чтобы обеспечить совместимость с браузерами без поддержки CSS3. Следующее свойство CSS3 – border-radius. С его помощью мы делаем нижний и верхний правые углы закругленными с радиусом закругления 10 пикселей. Определив при помощи свойства border внешнюю границу (рамку) толщиной 1 пиксель, далее при помощи CSS3-свойств box-shadow создам внешнюю тень от панели – таким образом, достигая более эффектного обрамления.

Далее прописываем свойства для списка элементов навигационной панели <ul id="navigation">

#navigation {
 
 list-style: none;
 margin: 0;
 padding: 0;
 float: left;
 margin-left: 80px;
 border-left: 1px solid #333;

}
#navigation li {
 float: left;
}

Тот, кто хотя бы раз в жизни превращал маркированный HTML-список в горизонтальное навигационное меню при помощи CSS, должен понять предназначение этих определений стилей. Свойство margin-left носит «подстроечный» характер – с его помощью можно «подгонять» левый край первого элемента меню к левой границе области содержимого страницы. Использование border-left в данном конкретном случае носит спорный характер – о нем мы поговорим немного позже.

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

#navigation li a {
 
 float: left;
 padding: 20px 0px;
 width: 100px;
 text-decoration: none;
 font-size: 18px;
 font-family: Arial, Helvetica, sans-serif;
 border-right: 1px solid #333;
 border-left: 1px solid #888;
 text-align: center;
 color: #dede5d;
 text-shadow: 3px 1px 3px #111;
}

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

С помощью этого свойства можно «выдрать» элемент из общего потока отображения HTML-страницы и заставить его вести себя так, как нужно нам. В данном случае нам надо, чтобы ссылки, которые являются по умолчанию строчными (inline) элементами вели себя как блочные элементы (block) чтобы мы могли задать для них ширину и высоту, а также внутренние поля и внешние отступы. Свойства border-right и border-left позволяют имитировать эффектную границу – она как будто выгравирована на панели; это достигается за счет разницы цветов границ соседних элементов. Но тут возникает проблема – крайние элементы меню слева и справа будут иметь только одну границу:

(обратите внимание на правую границу крайнего справа элемента меню)

Для крайней правой границы это можно решить просто – сразу за ней будет идти блок с формой поиска, для него можно задать левую границу как для элемента меню и на этом дело казалось бы в шляпе, но ведь крайний левый элемент первый в списке, до него нет ни одного элемента, которому можно было бы задать правую границу border-right: 1px solid #333; но границу можно задать для левого края самого списка – помните, для селектора #navigation мы задавали правило border-left: 1px solid #333; — теперь вам должно стать понятно его предназначение. Решение, как я уже говорил, спорное, но ничего не мешает нам его применить, пока список и его верхний (в меню – левый) элемент не имеют внешних отступов и внутренних полей. При помощи псевдокласса CSS :hover создаем эффект визуального выделения пункта меню при наведении на него курсора:

#navigation li a:hover{
 
 background: #555;
 background: -moz-linear-gradient(top, #555, #333 50%, #222 95%, #454545);
 background: -webkit-gradient(linear, center top, center bottom from(#333,), to(#454545));
 color: #ededed;
 text-shadow: -3px -1px 3px #555;
 
}

Вот что получается при наведении курсора на пункт меню:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

Далее прописываем стили для формы поиска:

#searchbar {
 float: left;
 padding: 15px 10px;
 border-left: 1px solid #888;
}

#searchform { 
 float: left;
}

#searchform input {
 float: left;
}

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

#searchform input[type='text'] {
 
 height: 24px;
 width: 200px;
 border: 1px solid #fff;
 border-right: none;
 background-color: #ccc;
 padding-left: 5px;
 font-family: Verdana, Helvetica, sans-serif;
 font-size: 18px;
 color: #999;
 -moz-border-radius: 5px 0px 0px 5px;
 -webkit-border-radius: 5px 0px 0px 5px;
 border-radius: 5px 0px 0px 5px;
 -moz-box-shadow: inset 0px 0px 1px #444;
 -webkit-box-shadow: inset 0px 0px 1px #444;
 box-shadow: inset 0px 0px 1px #444;
}

#searchform input[type='submit'] {
 border: 1px solid #fff;
 border-left: none;
 height: 28px;
 width: 28px;
 background: #999 url(search.png) no-repeat center center;
 -moz-border-radius: 0px 5px 5px 0px;
 -webkit-border-radius: 0px 5px 5px 0px;
 border-radius: 0px 5px 5px 0px;
}

Полная картина пока выглядит вот так:

При помощи этих правил, мы задаем четкие размеры элементов поиска. Для кнопки используется небольшая иконка. В определении box-shadow появилось значение inset, при помощи которого можно сделать тень внутренней (по умолчанию тень отображается снаружи элемента).

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

#menu_label {
 float: left;
 -moz-transform: rotate(270deg);
 -moz-transform-origin: 83% 60%;
 -webkit-transform: rotate(270deg);
 -webkit-transform-origin: 83% 60%;
 color: #fff;
 text-shadow: 0px 0px 3px #000;
 font-weight: bold;
 
}

При помощи определения свойства -moz-transform и -webkit-transform мы устанавливаем угол поворота элемента – 270 градусов (практически то же самое, что и -90) Свойство transform-origin позволяет задать позиционирование «трансформированного» элемента, грубо говоря для вращения это свойство задает точку поворота. Если задать transform-origin: 50% 50%; то вращение будет происходить вокруг центра элемента.

Шаг 3. JavaScript

Первым делом скачиваем и подключаем свежую библиотеку jquery-1.5.js:

 <script type="text/javascript" src="jquery-1.5.js"></script>

Использовать новые «фишки» из последней версии этой библиотеки мы не будем, поэтому можно использовать более ранние версии. Перед закрывающим тегом </body> добавляем следующее:

  <script type="text/javascript">
$(function(){
 $("#main_menu").stop().animate({'margin-left':'-960px', 'opacity':'0.4'},1000);
 $("#main_menu").hover(function(){
 $(this).stop().animate({'margin-left':'0px', 'opacity':'0.9'},
 500,
 'linear',
 function(){
 $("#menu_label").css({'display':'none'});
 });

 }, function(){
 $(this).stop()
 .animate({'margin-left':'-960px', 'opacity':'0.4'},
 500,
 'linear',
 function(){
 $("#menu_label").css({'display':'block'});
 });
 })
 })
</script>

Ничего сложного. Вместо привычного $(document).ready() мы используем $(function(){…}), что также замечательно работает. Первым делом мы при помощи метода animate() убираем панель сразу же после загрузки страницы и оставляем только один ярлычок с текстом «МЕНЮ». Далее методу-событию hover мы в качестве параметров передаем две функции – первая запускается, когда пользователь наводит курсор на ярлык, вторая – когда пользователь убирает курсор с навигационной панели. Рассмотрим подробнее первую из этих функций, а именно часть.

 $(this).stop().animate({'margin-left':'0px', 'opacity':'0.9'},
 500,
 'linear',
 function(){
 $("#menu_label").css({'display':'none'});
 });

Метод stop() прекращает любую анимацию с текущим объектом, после чего запускается метод animate(). Первый параметр – это карта CSS-свойств анимации, второй параметр (500) – это время длительности анимации. Далее идет параметр ‘linear’ – это имя функции, которая вычисляет параметры анимации, ‘linear’ используется по умолчанию, поэтому без него можно было обойтись. Затем следует последний параметр – это функция обратного вызова. Данная функция срабатывает тогда, когда анимация полностью завершилась. В данном случае мы просто убираем текстовый ярлычок с левого края панели. Во второй функции мы возвращаем этот ярлычок на место, когда панель полностью задвинута вправо:

 $(this).stop()
 .animate({'margin-left':'-960px', 'opacity':'0.4'},
 500,
 'linear',
 function(){
 $("#menu_label").css({'display':'block'});
 });

Шаг 4. Тест-драйв

Для проверки работоспособности меню можно добавить после закрывающего тега div id="main_menu" блок <div id="content"> с каким-либо текстовым содержимым, пусть это будет стандартный текст «пустышка». Блоку с содержимым пропишем следующие стили:

#content {
 margin-left: 80px;
 margin-right: 300px;
 margin-top: 95px;
 text-align: justify;
} 

При помощи свойств margin-left и margin-right можно «подровнять» края текста с краями нашей навигационной панели.

Теперь, если прокрутить страницу вниз, то увидим следующее:

Как мы и планировали – меню «прячется» за левый край окна браузера, при этом не мешает читать текст, и доступно в любую секунду – достаточно только навести курсор на ярлычок «МЕНЮ»:

Заключение

Итак, мы создали довольно необычное меню, которое не мешает читать длинный текст на странице, и в то же время доступно в любой момент без необходимости прокрутки страницы вверх. На решение самым смышленым читателям можно оставить одну из проблем данного меню, а именно – изначальное «скрывание» его сразу же после загрузки страницы. Каждый может предложить вариант – как можно убрать меню при начале прокрутки страницы вниз, или же при начале «наползания» навигационной панели на содержимое страницы. Удачи!

киберсант-вебмастер

Автор: Карабило Павел

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Хотите узнать, что необходимо для создания сайта?

Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Hunter200

    Доброго времени суток. А как сделать, чтобы в меню еще и выпадали подпункты?

  2. Отец Виктор

    Как всегда кстати! Огромное спасибо. Я было пробовал сделать это сам, но вот вставить свое творчество в виджет увы… exorcist.dp.ua/Download/pop%20up.htm

  3. Руслан

    как сделать так чтоб и в эксплорере было также?

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree