Создаем эффектное вертикальное меню на HTML5 и CSS3

Всем привет! Сегодня мы рассмотрим пример по созданию красивого вертикального меню на jQuery и CSS3, которое было создано в PSD Орманом Кларком (скачать .psd).

Мы будем использовать минимально возможное количество изображений – только для иконок возле названия. При желании, изображения можно объединить в спрайт при помощи SpriteRight.

Шаг 1. Базовая HTML-разметка

Сначала давайте создадим пустой HTML5 документ:

А теперь – разметку самого меню; ненумерованный список, содержащийся внутри контейнера:

Наконец, мы добавим подпункты путем создания ненумерованного списка в каждом из пунктов меню:

На этом с HTML-разметкой закончено. Сейчас у нас есть ненумерованный список из пяти пунктов, с тремя подпунктами в каждом. Для каждого пункта и подпункта мы задали классы и анкоры, чтобы в дальнейшем прописать их в таблице стилей. Для чисел мы прописали тег span.

Шаг 2. Шрифты с изменяющимся размером

Для начала убедимся, что меню отображается правильно. Добавим следующие правла в файл css/styles.css. Они установят для списка отступы равные нулю, и удалят стиль списка:

Теперь, прежде чем начать прописывать стили для меню, давайте создадим контейнер с фиксированной шириной и размером шрифта 13px (переведенном в em). Сначала добавим правило для body, font-size:100%;. Теперь мы уверены, что наш стиль базируется на размере шрифта по-умолчанию в браузере (обычно это 16px).

Сейчас надо разобраться, как работает размер шрифта в контейнере. Нам надо указать его в em, пропорционально размеру шрифта-родителя. Мы хотим, чтобы он был равен 13px, и предполагая, что шрифт родителя равен 16px, размер в em будет равен 13 / 16 = 0.8125. 13px это 0.8125*16px.

Указание размера шрифтов (и элементов страницы) в em делает их “резиновыми”. Если мы изменим размер контейнера (или шрифта по-умолчанию в браузере), то размер меню будет к нему подстраиваться. Если вам нужна помощь в переводе из px в em, то я советую воспользоваться сервисом pxtoem.com.

Мы задали для контейнера фиксированную ширину 220px, и выровняли его с помощью margin:100px auto;.

Шаг 3. CSS стиль основного меню

Сейчас мы можем приступить к написанию стилей для меню. Мы установим ширину и высоту меню ul auto, и затем добавим тень. Благодаря автоматически устанавливаемой высоте, тень будет появляться, когда слайдер открывается.

Далее, для анкоров мы добавим ширину 100%; это будет означать, что их размер будет равен размеру контейнера (в нашем случае 220px). Для указания их высоты мы будем использовать em, для этого вернемся к нашему основному размеру шрифта, равному 13px. В .psd файле размер шрифта установлен в 36px, так что это будет нашей целью. Мы берем 36, и делим его на 13, получается примерно 2.75em (36 / 13 = 2.76923077). Поэтому мы укажем размер анкоров равным 2.75em, и такую же высоту строки, чтобы выровнять текст по вертикали по центру. Затем добавим небольшой отступ, чтобы оставить место для иконки.

Мы добавим CSS3 градиент для фона, потом поменяем шрифт (будем использовать Helvetica Neue) и добавим белую тень для шрифта. Обратите внимание, мы не используем font-size; так как мы установили размер шрифта для контейнера (в 13px), то он будет наследоваться.

Хорошо, теперь давайте изменим цвет фона страницы.

Совет: запоминаем EM

Наверное, вы уже подумали о том, что значения размеров шрифта, указанного в em, очень легко забыть. Поэтому давайте добавим комментарии в CSS, чтобы в будущем вы знали, какой размер в px использовался. Запомните формулу: желаемый размер в px / размер родителя в px = результат в em, и используйте символ приблизительного значения ≈ если результат был округлен.

Шаг 4. Стиль подпунктов

Пришло время написать стили подпунктов меню. Необходимо сделать фон белым, а границы серыми. Заметьте, что у последнего элемента нет нижней границы, поэтому мы будем использовать псевдо-селектор :last-child чтобы её удалить. У него должна быть темно-синяя граница, поэтому мы заменим серый на синий.

Следующий шаг будет похож на предыдущий, мы опять добавим высоту и ширину, и изменим фон на белый. Также нам необходимо изменить размер шрифта. Нам нужно получить 12px, и используя формулу желаемый размер в px / размер родителя в px = результат в em получаем 0.923em.

Давайте также поменяем цвет шрифта на серый. Обратите внимание, мы используем display:block. Если бы использовался float:left, меню не было бы анимированным и с тенью. Также обратите внимание, на то, что для последнего элемента в подпунктах был добавлен дополнительный стиль, чтобы изменить цвет его границ.

Сейчас меню уже выглядит очень красиво!

Шаг 5. Стили при наведении и для активного пункта

Давайте укажем стили для элементов меню при наведении на них указателя мыши, и для открытого пункта. Также мы пропишем границу для активного пункта. Мы не добавили класс active, потому что это будет происходить при помощи jQuery.

Шаг 6. Иконки основного меню

Добавлять иконки мы будем при помощь псевдокласса :before. Сначала мы установим фон для всех ul в подпунктах, при помощи спрайта, и укажем, что он не должен повторяться. Мы задали размер 36px, хотя там нет текста, а т.к. мы используем 36px, то нам надо указать высоту и ширину равными 1em. Затем мы опустим элемент на 50% и отнимем .5em сверху чтобы выровнять его.

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

Шаг 7. Цифры в пунктах меню

Помните, что в начале мы добавляли теги span? Давайте теперь создадим стиль для цифр!

Сначала мы добавим размер шрифта 11px (0.857em). Зададим абсолютное позиционирование, и подвинем на 1em справа. Опустим на 50% сверху и отменим margin-top чтобы выровнять их по центру. Фон будет немного затемненным.

Снова, чтобы сделать его резиновым, мы будем использовать padding со значениями в em. Мы даже использовали em для указания border-radius (закругление углов), так как если текст будет больше, появится диспропорция.

Шаг 8. Стрелки и цифры в подпунктах меню

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

Наконец, мы сделаем цвет ссылки при наведении на нее указателя более темным.

Шаг 9. Добавляем jQuery

Мы подошли к последнему шагу по созданию меню. Сейчас необходимо создать ссылку на библиотеку jQuery, которая расположена на сервере Google. Ее последняя версия 1.7.1. Для этого надо добавить следующую строку в секцию head.

Сейчас в самый конец html-документа, перед закрывающимся тегом body, добавьте такой код:

Сначала мы помещаем пункты меню и подменю в разные переменные, чтобы потом было удобно к ним обращаться:

Затем сворачиваем все пункты меню, когда страница открывается:

Потом мы сообщаем, что необходимо что-то сделать при нажатии на анкор:

Сейчас мы предотвращаем привязку анкоров к следующим ссылкам или изменение в адресной строке. То есть, когда вы будете нажимать на пункты меню, # не будет появляться в адресной строке.

Далее укажем, что если у menu_a класс active, его надо удалить.

Тут мы используем .filter и :visible. Если меню открыто, то его надо сдвинуть вверх с нормальной скоростью.

Если меню открыто, то добавим класс active, и сдвинем его вниз с нормальной скоростью.

Теперь, используя оператор else, удаляем класс active, и двигаем меню вверх чтобы скрыть его.

Если вам необходимо изменить скорость меню, укажите вместо normal нужную скорость в миллисекундах.

Заключение

В итоге у нас получилось вот такое красивое меню. По нажатию на картинку вы перейдете на страницу-демонстрацию.

small

К тому же, это меню резиновое.

#wrapper {width: 440px; font-size: 1em}
#wrapper {width: 440px; font-size: 1em}

Кстати, ещё примеры использования jQuery вы можете почитать в новом, но уже полном очень интересных статей, блоге Евгения Деденко. Например, в одном из последних постов он рассказывает, как сделать выдвигающийся блок с просьбой о подписке.

Эта статья является моим вольным переводом с английского оригинала: Orman Clark’s Vertical Navigation Menu: The CSS3 Version.




7 комментариев к “Создаем эффектное вертикальное меню на HTML5 и CSS3”

  1. Евгений

    Спасибо что упомянула мой блог 😉 И перевод статьи впечатлил 😉

    Ответить
    • oriolo

      Не за что 🙂
      Нашла этот урок, он меня впечатлил, захотела перевести, тем более что он новый, и его точно никто больше не переводил :))

      Ответить
  2. Тони

    Интересное меню. Вот бы его в виде плагина оформить) для ленивых. И еще вопрос : цифры оно как считает?

    Ответить
    • oriolo

      Тони, это просто сверстанное меню, которое можно использовать так, как вам необходимо. Цифры оно пока никак не считает, для этого надо использовать php, например, запрос на вывод количества статей в рубрике, и вписать его в span.

      Ответить
  3. Сосновоборск

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

    Ответить
    • Sergei

      Это самая сложная задача – натянуть на cms. Приходится изощряться и нарушать некоторые правила, чтобы к чему-то, что-то подвесить. Но можно делать и правильно, если знаешь от и до php хотя бы для вордпресса.

      Ответить

Оставить комментарий