Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Navigation Design

Вертикальное меню Ормана Кларка: CSS3 версия

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Bringing Premium Pixels to Life.
Orman Clark's Chunky 3D Web Buttons: The CSS3 Version
Quick Tip: Give Orman's Navigation the :target Treatment

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

Далее в PSD серии Ормана Кларка его удивительное  вертикальное меню. Мы создадим его с помощью CSS3 и jQuery, используя минимальное количество изображений.

Единственные изображения, которые мы будем использовать это иконки - я создам спрайт, используя новый инструмент SpriteRight, но это необязательно. Кроме того, я буду использовать GradientApp для создания градиентов CSS3, но это также необязательно.


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

Начнем с того, что создадим базовую разметку, пустой документ HTML5:

А теперь разметка для нашего меню; неупорядоченный список в контейнере.

Наконец, мы создаем подменю, помещая неупорядоченный список, вложенный в каждый из существующих элементов списка.

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

Я также добавил класс к каждому элементу списка, так что он упростит процесс оформления. Наконец, для чисел мы создали тег span внутри каждого якоря. Если вы просмотрите его в своем браузере, он должен выглядеть так:

Basic markup

Шаг 2: Плавающие шрифты

Сначала убедитесь, что наше меню отображается правильно. Добавьте эти правила в файл css/styles.css, они задают внешние и внутренний отступы для всех наших списков и удалят стиль ul списка по-умолчанию.

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

Теперь я объясню, как работает размер шрифта контейнера. Мы должны выразить это как em; пропорционально к размеру его родительского шрифта. Мы стремимся к размеру 13px, поэтому при условии, что размер шрифта родительского элемента составляет 16px, наша результирующая em равна 13/16 = 0,8125. 13px - 0,8125 * 16 пикселей.

Использование для наших шрифтов (и других элементов) единиц em сделает их плавающими. Теперь, если мы изменим размер шрифта обертки (или наш размер по умолчанию в браузере), все меню будет настроено относительно этого. Пусть это вас не смущает, если вам нужна помощь в преобразовании шрифтов, я предлагаю вам посетить сайт pxtoem.com.

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


Шаг 3: CSS для главного меню

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

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

Мы добавим CSS3 градиент для фона, я забежал вперед и создал его с помощью GradientApp. Затем мы изменим шрифт, применим шрифт Helvetica Neue и белый цвет вместе с тенью для текста. Заметьте, что здесь мы не устанавливали размер шрифта. Это потому, что наш базовый шрифт составляет 13 пикселей для контейнера, который унаследовали наши якоря, поэтому нет необходимости добавлять его.

Отлично! Теперь всё начинает выглядеть лучше, и мы тоже получили структуру! Но как насчет того, чтобы добавить цвет фона, чтобы меню получилось лучше.

Step 2

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

Из CSS выше вы можете видеть, что легко забыть, что на самом деле означают ваши em-единицы. Это хорошая идея оставить комментарии к вашим первоначальным расчетам, так что, когда вы вернетесь к своему коду в будущем, вы сможете понять то, что происходит. Помните формулу: желаемые px / родительские px = результирующие em и используйте приблизительный символ (≈), если вы округляете результат.


Шаг 4: CSS для подменю

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

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

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

Теперь всё выглядит очень хорошо!

Step 3

Шаг 5: Наведение и активный стиль

Мы добавим стиль для наведения и активного состояний, это особенно важно когда меню развёрнуто! Мы также добавим нижнюю границу в активное меню. Теперь, если вы думаете, «почему мы не добавили активный класс?». Хорошо, мой друг, это то, что мы сделаем с помощью jQuery чуть позже.


Шаг 6: Иконки главного меню

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

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

Примечание: Я создал этот спрайт с помощью приложения SpriteRight, если вы хотите поиграть со спрайтом, я включил изображения и файлы проекта в исходные файлы.

Step 5

Шаг 7: Нумерация главного меню

Окажите, помните теги span, которые мы добавили? Они будут числами! 

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

И снова, чтобы сделать его плавающим, мы будем использовать отступы, чтобы создать ширину и высоту. Мы используем em даже для радиуса границ; нам нужно это для того, чтобы, если текст будет больше, они могут стать непропорциональным. Я также добавил еще один стиль, при наведении указателя и активного класса для ссылки.

Step 6

Шаг 8: Номера подменю и стрелки

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

Наконец, состояние наведения (спасибо участникам, которые указали на его отсутствие). Мы просто применяем более темный цвет (#32373D) к тегу якоря, псевдо-стрелке и числу в теге span.

Теперь всё выглядит довольно здорово? Я думаю, что пришло время добавить некоторые функциональные возможности!

Step 7

Шаг 9: время jQuery

Полагаю, вы давно ждали, чтобы дойти до этого раздела?! Ну, наконец, мы подобрались к jQuery. Сначала нам нужно будет установить ссылку на библиотеку jQuery, используя одну из них, размещенную Google. Последняя версия - 1.7.1. Добавьте в раздел заголовка своей HTML-страницы следующее:

Теперь добавьте в нижнюю часть вашего html-документа до закрытия тега </body>. Не волнуйтесь, если это выглядит слишком запутанным, я объясню это через минуту.

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

Этот код скроет все подменю при загрузке страницы

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

Здесь мы предотвращаем переход по ссылкам якорей или изменение адреса в строке. Например, если вы когда-либо создали тег якоря со ссылкой «#», когда вы его нажмете, он не появится в адресной строке. Якоря по-умолчанию отключены.

Теперь мы укажем, что если menu_a содержит класс 'active', его нужно удалить.

Здесь мы используем свойства '.filter' и ': visible'. Если меню открыто, необходимо выполнить анимацию в нормальном режиме.

Если меню закрыто, добавить класс «active» (чтобы мы могли получить доступ к оформлению CSS) и выполнить анимацию в нормальном режиме.

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

Примечание: Если вы хотите изменить скорость анимации, измените нормальный режим на, например. '500'. Это выполнит анимацию за 500 миллисекунд.

Если вам интересно изучить jQuery с нуля, будет полезно ознакомиться с бесплатным ресурсом Learn jQuery за 30 дней на tutsplus.com.


Заключение

Итак, мы сделали это до конца! Мы реализовали красивое вертикальное навигационное меню Ормана, используя CSS3 и jQuery! Узнайте, как создать этоже меню, используя только CSS3 с помощью псевдо селектора :target.

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

Надеюсь, вам понравился этот урок, спасибо за чтение!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.