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

wordpress seo

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

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

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

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

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

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

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

<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;
    
}

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

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

#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

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

Посмотрите 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