Красочное CSS3 навигационное меню с анимацией! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКрасочное CSS3 навигационное меню с анимацией!
Дата: 15.06.2013 в 23:22 | Просмотров: 9089

Красочное CSS3 навигационное меню с анимацией!

навигационное меню, красочное меню
Скачатьбесплатно с сервера
Демодемонстрация

В этом небольшом уроке мы будем создавать красочное навигационное меню, используя только CSS3 и шрифт Font Awesome со значками. Это вертикальное выпадающее меню отличается свое компактностью, не будет занимать много места на сайте, но при этом, смотриться довольно красиво и солидно. Предлагаю также посмотреть вращающееся меню на jquery, которое отличается своим эффектом вращения.

Как уже говорилось выше, мы используем шрифт иконок. Это означает, что Вы получаете довольно практичные, векторные значки, которые будут хорошо смотреться в любом браузере, который поддерживает HTML5 пользовательские шрифты (т.е. практически все из них).

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

HTML код

Вот работая html разметка кода:

Каждый пункт главного меню является потомком самого верхнего, неупорядоченного списка. Первая внутри – это ссылка с классом значка (см. полный список классов для иконок здесь), и другой неупорядоченный список, который будет отображаться в виде вертикально выпадающего меню при наведении курсора мыши.

Хорошо, перейдем с дизайну.

CSS стили

Как видите выше HTML код, мы имеем неупорядоченные списки li, вложенные в основные ul, поэтому нам необходимо писать стили грамотно и осторожно.

Это значение ограничивает ширину и отступ только первого неупорядоченного списка, который является прямым потомком нашего пункта #colorNav. Приняв это во внимание, давайте посмотрим что у нас получиться:

Мы задали стиль показа inline-block, так что элементы списка выстроены на одной линии, и мы присваиваем им относительное положение, чтобы можно было позиционировать выпадающие пункты меню правильно. Ссылки показывают иконки, заданные нами через шрифт Font Awesome.

Теперь мы можем идти дальше и разберемся с выпадающими пунктами меню. Здесь мы будет определять CSS3 переходы анимации. Мы будем устанавливать максимальную высоту maximum-height 0px, которая будет изначально скрывать выпадающее меню. При наведении, мы будем увеличивать значение maximum-height, что приведет к её постепенному показу:

И вот эффект анимации:

Значение 200px является произвольным, поэтому придется его увеличивать, если Ваш выпадающий список будет содержать больше пунктов. К сожалению, нет единственного CSS способа определения высоты, поэтому мы должны её запрограммировать.

Следующий шаг заключается в стилизации выпадающих пунктов:

И, конечно, мы проявим немного фантазии и творчества в цветовых оттенках! Вот 5 цветов главного меню:

Одно из преимуществ значков из шрифта, что Вы можете задать им цвет, применив значение color. Это означает, что все настройки совершенно “прозрачны”, и Вы можете без проблем исправить их в одиночку.

Готово!

Итак, мы имеем то, что запланировали – выпадающее меню. Шрифт иконок будет отличным дополнением к Вашему набору инструментов веб-разработки. Поскольку они являются обычным шрифтом, Вы можете применить для них размер, цвет и тень текста, что очень удобно.

В этом уроке, для созданию этого навигационного меню, мы не используем ни изображения, ни скрипты JS, поэтому оно достаточно простое легкое, несмотря на креативный дизайн! Вы со мной согласны? Буду рад услышать Ваши отзывы в комментариях! Спасибо! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tutorialzine.com
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Админка:
      @

      Здравствуйте, простите я не совсем понял как это все делается?
      Куда надо вводить все это именно?
      И можно ли это использовать на уже доступном сайте с его шаблоном?

      1. Влад Бондаренко:

        Здравствуйте! Да, конечно, Вы можете использовать это меню на своем сайте.
        Для этого Вам необходимо просто добавить html код в нужное место, а также подключить необходимые css стили.
        В зависимости от того, какая у Вас CMS (система управления сайтом), Вы можете внести изменения в шаблон Вашего сайта. Где именно Вы хотите добавить это меню?

        1. Админка:
          @

          Спасибо за то, что быстро откликнулись…

          Мой сайт будет стоять на WordPresse.
          И я новичок не знаю куда именно после каких строк надо вставлять эти html коды и куда в какую папку надо заливать этот сценарий, который скачал у вас.
          Заранее благодарен за ответ…

    1. Влад Бондаренко:

      Извините, за столь поздний ответ (был в отъезде).
      На счет меню – все зависит от конкретного шаблона WordPress, который Вы собираетесь использовать, его кода и дизайна. Возможно придется немного доработать меню (уменьшить или поменять другие его части).

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

      Если нужна будет конкретная помощь, обращайтесь в skype – vladmaxi1995.

    1. Артур:
      @

      А как прописать его из “правой стороны” сайта??)

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте! Это можно сделать. но в двух слоях не объяснить:) , могу сказать ,что там это можно сделать, изменив стили. А именно убрав отображение меню inline-block а также изменить width, и соответственно изменив стиль выпадающего списка, подтянув его к правой стороне меню.

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