От автора: Часто бывает так, что на одной странице необходимо разместить текст большого объема – какую-нибудь научную статью или что-то в этом роде. При этом может возникнуть требование отказаться от разделения статьи на страницы в силу технических ограничений или специфики текста. Казалось бы – и что в этом такого? Небольшой дискомфорт вызывает необходимость постоянно возвращаться (прокручивать) вверх страницы для того, чтобы добраться до навигации сайта и перейти в интересующий раздел. Попробуем решить эту проблему. Создадим горизонтальное анимированное меню с фиксированной позицией на странице средствами CSS и jQuery.
Средствами CSS можно создать навигационное меню, которое будет иметь фиксированное положение в окне браузера, независимо от прокрутки содержимого документа. Этот обучающий материал шаг за шагом показывает процесс создания такого меню. Итак, давайте создадим горизонтальное меню для сайта.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.
Также скачайте исходники себе на компьютер!
Шаг1. Разметка HTML
Для начала определимся, что мы хотим видеть на навигационной панели, и как она будет работать. Пусть в левой части окна, прямо возле края страницы, будет располагаться что-то вроде закрепленного «ярлычка», который будет плавно «выезжать» когда пользователь будет наводить на него курсор.
На навигационной панели будет стандартный набор: ссылки на основные разделы сайта, выполненные в виде пунктов меню и простая форма для поиска по сайту. Разметка для всего этого будет приблизительно следующей:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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">:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#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">
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#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 в данном конкретном случае носит спорный характер – о нем мы поговорим немного позже.
Далее задаем стили для ссылок внутри элементов навигационного меню – грубо говоря, делаем из ссылок кнопки на навигационной панели:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#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 создаем эффект визуального выделения пункта меню при наведении на него курсора:
|
1 2 3 4 5 6 7 8 9 |
#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; } |
Вот что получается при наведении курсора на пункт меню:
Далее прописываем стили для формы поиска:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#searchbar { float: left; padding: 15px 10px; border-left: 1px solid #888; } #searchform { float: left; } #searchform input { float: left; } |
Приемы, знакомые из предыдущих шагов. Как видим из скриншота, форма поиска теперь стала в один ряд с пунктами меню. Для задания стилей кнопке и текстовому полю используем контекстные селекторы по значению атрибута HTML-тега:
|
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 |
#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, при помощи которого можно сделать тень внутренней (по умолчанию тень отображается снаружи элемента).
Ну и в конце определяем свойства для текстового ярлычка. Мы хотим, чтобы текст отображался вертикально:
|
1 2 3 4 5 6 7 8 9 10 11 |
#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:
|
1 |
<script type="text/javascript" src="jquery-1.5.js"></script> |
Использовать новые «фишки» из последней версии этой библиотеки мы не будем, поэтому можно использовать более ранние версии. Перед закрывающим тегом </body> добавляем следующее:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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 мы в качестве параметров передаем две функции – первая запускается, когда пользователь наводит курсор на ярлык, вторая – когда пользователь убирает курсор с навигационной панели. Рассмотрим подробнее первую из этих функций, а именно часть.
|
1 2 3 4 5 6 |
$(this).stop().animate({'margin-left':'0px', 'opacity':'0.9'}, 500, 'linear', function(){ $("#menu_label").css({'display':'none'}); }); |
Метод stop() прекращает любую анимацию с текущим объектом, после чего запускается метод animate(). Первый параметр – это карта CSS-свойств анимации, второй параметр (500) – это время длительности анимации. Далее идет параметр ‘linear’ – это имя функции, которая вычисляет параметры анимации, ‘linear’ используется по умолчанию, поэтому без него можно было обойтись. Затем следует последний параметр – это функция обратного вызова. Данная функция срабатывает тогда, когда анимация полностью завершилась. В данном случае мы просто убираем текстовый ярлычок с левого края панели. Во второй функции мы возвращаем этот ярлычок на место, когда панель полностью задвинута вправо:
|
1 2 3 4 5 6 7 |
$(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"> с каким-либо текстовым содержимым, пусть это будет стандартный текст «пустышка». Блоку с содержимым пропишем следующие стили:
|
1 2 3 4 5 6 |
#content { margin-left: 80px; margin-right: 300px; margin-top: 95px; text-align: justify; } |
При помощи свойств margin-left и margin-right можно «подровнять» края текста с краями нашей навигационной панели.
Теперь, если прокрутить страницу вниз, то увидим следующее:
Как мы и планировали – меню «прячется» за левый край окна браузера, при этом не мешает читать текст, и доступно в любую секунду – достаточно только навести курсор на ярлычок «МЕНЮ»:
Заключение
Итак, мы создали довольно необычное меню, которое не мешает читать длинный текст на странице, и в то же время доступно в любой момент без необходимости прокрутки страницы вверх. На решение самым смышленым читателям можно оставить одну из проблем данного меню, а именно – изначальное «скрывание» его сразу же после загрузки страницы. Каждый может предложить вариант – как можно убрать меню при начале прокрутки страницы вниз, или же при начале «наползания» навигационной панели на содержимое страницы. Удачи!
Автор: Карабило Павел
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
E-mail: contact@webformyself.com
Комментарии (3)