Верстка меню сайта

Практически ни один современный сайт не обходится без навигации, если только это не сайт-одностраничник. В статье мы подготовим семантичный, грамотный html код нашего меню, далее стилизуем его с помощью новых фишек на CSS3 (box-shadow, gradient, @font-face и т.д. присутствуют), и в конце немного усложним нашу навигацию, добавив выпадающие подпункты простенькой jQuery-анимацией. Полученное меню можно будет использовать в качестве шаблона для ваших собственных разработок.

Содержание статьи

  1. Разметка
  2. Стилизуем меню
  3. Выпадающие подпункты на jQuery

Разметка

Подготовим семантичный HTML код нашего меню. Что же представляет из себя меню в плане кода? Как правило, это неупорядоченный список ссылок, обернутый тегом <nav>:

<nav>
  <ul>
    <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>
</nav>

Однако это слишком простое меню, давайте добавим несколько дополнительных подпунктов, которые позже будут появляться при наведении курсора мыши и проставим классы:

<nav class="navigation">
  <ul class="nav-list">
    <li class="item-1"><a href="#">Главная</a></li>
    <li class="item-2"><a href="#">О нас</a></li>
    <li class="item-3">
      <span>Наши работы</span> <!-- неактивные пункты оборачиваем в span для семантики -->
      <ul class="dropdown-menu"> <!-- выпадающее меню при наведении курсора мыши -->
        <li><a href="#">Сложный проект</a></li>
        <li><a href="#">Первый проект</a></li>
      </ul>
    </li>
    <li class="item-4">
      <span>Блог</span>
      <ul class="dropdown-menu">
        <li><a href="#">Новые записи</a></li>
        <li><a href="#">Популярное</a></li>
        <li><a href="#">Архив статей</a></li>
      </ul>
    </li>
    <li class="item-5"><a href="#">Контакты</a></li>
  </ul>
</nav>

Для старых IE не забываем подключить все необходимые костыли: html5shiv, PIE для последующей работой с CSS3 свойствами и т.д. Не забываем про подключение jQuery. Как видите, с разметкой все достаточно просто, поехали дальше.

Стилизуем меню

Возьмем за основу мой готовый код горизонтального меню с выпадающими подпунктами:

Смотреть готовый пример

Во-первых, центрируем по горизонтали навигацию на странице:

.navigation {
  text-align: center;
}
.nav-list {
  display: inline-block;
}

Теги <li> выстраиваем в ряд для получения горизонтальных пунктов. Стоит заметить, что выстроить нам нужно только прямые дочерние элементы — подпункты должны остаться в вертикальном положении.

.nav-list > li {
  float: left;
}

Займемся оформлением пунктов навигации, для начала сделаем градиенты. Раньше (да и до сих пор это актуально) для этого вырезали однопиксельную полоску и заполняли ей весь элемент, в CSS3 появились свойства linear-gradient и radial-gradient, которые создают линейный и радиальный градиент соответственно. Можно воспользоваться каким-нибудь онлайн-генератором градиентов, чтобы не забивать все вручную и сразу получить готовые стили. Я пользуюсь сервисом ColorZilla, такой код там получается мгновенно:

.navigation a,
.navigation span {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}

Зададим меню небольшое скругление углов, которое раньше делалось позиционированием картинок по углам и множеством лишних несемантических блоков, теперь же используют свойство border-radius + костыль PIE для старых IE или graceful degradation:

.nav-list {
   -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

Далее я решил использовать нестандартный шрифт для текста ссылок, для примера взял шрифт DINMediumRegular. Подключаем его свойством @font-face. Есть отличный онлайн-генератор правил для @font-face, Font Squirrel, загружаем нужный шрифт и получаем на выходе архив с готовыми стилями, остается только подключить их к вашему проекту:

@font-face {
  font-family: 'DINMediumRegular';
  src: url('fonts/din-medium-webfont.eot');
  src: url('fonts/din-medium-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/din-medium-webfont.woff') format('woff'),
    url('fonts/din-medium-webfont.ttf') format('truetype'),
    url('fonts/din-medium-webfont.svg#DINMediumRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.navigation a,
.navigation span {
  font-family: DINMediumRegular;
}

И наконец, добавим к ссылкам небольшую тень, делается это при помощи text-shadow:

.navigation a,
.navigation span {
  text-shadow: 0 1px #fff;
}

Для старых Internet Explorer используем встроенные фильтры для тени либо упускаем из виду ее отсутствие и небольшое несоответствие с дизайном.

Остальная часть стилей не нуждается в тщательном рассмотрении, потому как там все очень просто и особых затруднений вызвать не должна.

Выпадающие подпункты на jQuery

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

$(function() {
  $('.dropdown-menu').hide().css({opacity: 0});
  $('#menu > li').hover(function() {
    $(this).children('.dropdown-menu').stop().animate({opacity: 1}, 500).show();
  }, function() {
    $(this).children('.dropdown-menu').stop().animate({opacity: 0}, 500).hide();
  })
})

Первой строкой скрываем наши подпункты с помощью метода hide() и задаем opacity: 0, т.е делаем элемент невидимым и прозрачным. В принципе можно было сделать это и при помощи CSS, однако при выключенном в браузере JavaScript подпункты меню не появятся. Поэтому чтобы у пользователя оставалась возможность беспрепятственно ходить по всем страницам сайта, выпадающие пункты скрываем jQuery.

Далее навешиваем обработчик на событие hover пунктов навигации. При наведении курсора мыши в текущем пункте находим элемент с классом .dropdown-menu, применяем animate() к opacity и показываем список ссылок при помощи метода show(). Затем навешиваем еще один обработчик, когда курсор покидает элемент. Делаем все в точности до наоборот — находим элемент, анимируем прозрачность до 0 и скрываем список в документе. Метод stop() в скрипте нужен для того чтобы запретить множественное срабатывание анимации при перемещении курсора мыши туда-сюда.

Итог

Вот таким образом на HTML, CSS и jQuery было сделано простое меню, которое может послужить каркасом для ваших разработок.

Меню сайта
Меню сайта

Проверено

  • Internet Explorer 9+
  • Opera
  • Firefox
  • Chrome
  • Safari

Рейтинг статьи

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

Комментарии читателей

  1. Alex:

    Отличная статья, все понятно и доходчиво. СПАСИБО !

  2. Виталий:

    Статья отличная. Только мне не понятно как jQuery подключить. Поэтапно можете написать?

    • Между тегами <head> документа поместите код <script src=»https://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js»></script>, где x.x.x — версия jQuery (например 1.9.1)

      • Виталий:

        $(function() {
        $(‘.dropdown-menu’).hide().css({opacity: 0});
        $(‘#menu > li’).hover(function() {
        $(this).children(‘.dropdown-menu’).stop().animate({opacity: 1}, 500).show();
        }, function() {
        $(this).children(‘.dropdown-menu’).stop().animate({opacity: 0}, 500).hide();
        })
        })

        Куда пишется?
        Я начинающий в этом деле и заранее извиняюсь за глупые ответы.

        • Ничего страшного. Между тегами <script></script>, далее вы можете поместить его в любое место документа, например между тегами <head>. Но сперва в документе должно идти подключение jQuery, затем этот код. Посмотрите как у меня в демо-примере (ctrl + u — исходный код).

          • Виталий:

            Ясно. Я понял. Я вот решил установить попроще меню. Ваша информация для меня была очень полезная. Все понятно написано. Благодарю Вас!!! А с Вами можно консультироваться по поводу других вопроссов касающихся разметки страницы? И где если можно это сделать? Знакомых людей нет с кем можно советоваться и по этому прошу Вас о помощи.

          • Можно, я не всегда свободен, но постараюсь помочь по мере возможности. Пишите мне на почту по возникшим вопросам.

  3. А можно ли так сделать по этому принципу вертикальное меню?

  4. Oleg:

    Меню получилось замечательное, только для чего здесь jQuery? Всё тоже можно сделать на CSS3

  5. Спасибо за помощь

  6. Хорошая статья. Только есть замечание к меню: хорошо бы еще сделать так, чтобы при наведении мыши ссылка выделялась, например, цветом.

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