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

wordpress seo

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

Шаг 2. CSS

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

Сначала мы задаем фиксированную позицию контейнера 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">

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

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

Шаг 3. JavaScript

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

E-mail: contact@webformyself.com

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

Посмотрите 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree