Красивое меню на CSS без JavaScript

Красивое меню на CSS без JavaScript

От автора: меню — это элемент, который присутствует практически на каждом сайте. Красивое меню, безусловно, становится украшением сайта. В этом уроке мы с Вами создадим простое, но вместе с тем красивое меню. При этом мы не используем ни строчки JavaScript-кода.

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

скачать исходникискачать урок

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

Создадим список с несколькими элементами меню:

<ul class="menu">
	<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>

Теперь напишем несколько стилевых правил, которые простой список превратят в простое горизонтальное меню:

body{background: url(denim.png);}
.menu{list-style: none;}
.menu li{
	float: left;
	margin: 0 20px 0 0;
	background: #044fac;
	border-radius: 5px;
	width: 150px;
	text-align: center;
	line-height: 50px;
}
.menu a{
	color: #fff;
	display: block;
	height: 50px;
	font-size: 20px;
	text-decoration: none;
}
.menu a:hover{
	background: #b4145b;
	border-radius: 5px;
}

В итоге мы получили, на мой взгляд, симпатичное горизонтальное меню

Теперь давайте добавим к нему немного магии CSS3. Для этого мы воспользуемся всего одним свойством — transition. Как Вы видите, сейчас при наведении на любой пункт меню происходит изменения фонового цвета. Смена происходит мгновенно. Свойство transition позволяет сделать этот переход (смену фонового цвета) плавным.

Вообще, данное свойство (transition) можно применять не только к фоновому цвету, его можно применять к чему угодно — цвет, шрифт, размер, положение. Свойство transition позволяет назначать изменение значений всех этих свойств в течение определенного промежутка времени, т.е. позволяет добавить плавность.

Свойство transition имеет 4 возможных значения:

transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

transition-property — анимируемое свойство

transition-duration — продолжительность анимации

transition-timing-function — временная функция, используемая для анимации

transition-delay — задержка перед началом анимации

Два последних свойства являются необязательными. В нашем примере мы будем анимировать фон. На самом деле можно анимировать для одного и того же элемента сразу несколько свойств. При этом можно указывать для каждого свойства свои настройки анимации.

Если никаких особых настроек анимации для того или иного свойства не нужно, тогда вместо значения transition-property можно использовать ключевое слово all, т.е. мы анимируем все свойства с одинаковыми параметрами. В видео Вы можете найти несколько примеров использования свойства transition. Здесь же просто приведем конечный результат, который на практике используется чаще всего. Итак, добавим анимацию при наведении на пункт меню мыши:

.menu a:hover{
	background: #b4145b;
	border-radius: 5px;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

Здесь мы анимируем все свойства в течение 1 секунды. Также можно использовать вендорные префиксы для совместимости с браузерами старых версий.

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

Остается отметить, что сейчас мы анимируем свойства только при наведении на пункт меню. Когда мышь уходит с элемента меню — фоновый цвет принимает исходное значение без анимации. Если же Вы захотите сохранить анимацию для обоих действий (и при наведении мыши, и при уходе мыши с элемента), тогда просто перенесите свойство transition для элемента меню. Стили в таком случае будут следующими:

.menu a{
	color: #fff;
	display: block;
	height: 50px;
	font-size: 20px;
	text-decoration: none;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
.menu a:hover{
	background: #b4145b;
	border-radius: 5px;
}

На этом урок завершен. Удачи Вам и до новых встреч!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (20)

  1. Андрей

    Здравствуйте!

    1. Куда делся форум?

    2. Кто нибудь подскажите у меня есть WP я хочу в нем рубрики поменять Отображение чтобы

    отображались не по алфавиту а так как я поставлю.

    Буду благодарен!!!

    • Андрей Кудлай

      Здравствуйте, Андрей.
      1. Форум временно не работает по техническим причинам. Заработать должен со следующей недели.
      2. Для сортировки рубрик можно воспользоваться любым подходящим плагином My Category Order. После установки плагина в меню Записи появится новый пункт My Category Order, в котором порядок рубрик меняется простым перетаскиванием. Для вывода самих рубрик нужно воспользоваться виджетом My Category Order, который появится в соответствующем разделе после установки плагина.

  2. Андрей

    Андрей, Можно еще вопрос?

    1. Какой плагин лучше Akisment или WP-Spam-Free

    2. Можете посоветовать сайты по WP?

    • Андрей Кудлай

      1. Я бы отдал предпочтение второму — WP-Spam-Free
      2. Этот вопрос, честно говоря, не совсем понял… если имелась в виду документация по изучению WP, то здесь могу порекомендовать, конечно же, кодекс WP и еще один русскоязычный сайт. Также на нашем сайте есть бесплатный курс по созданию темы для WP — для начинающих изучение это самое то. Кроме того, в разделе Премиум публиковался целый цикл уроков по программной работе с WP.

  3. Виталий

    wp-kama.ru — Спасибо! Отличный сайт. + Ваш курс я смотрел — Он супер. Я весь прошел :)

  4. Евгений

    Здравствуйте.

    Можно вопрос? У меня на теме видно, Админ-панель , Как ее убрать из шаблона, Я не хочу чтобы это было на моем сайте видною

    • Андрей Кудлай

      Здравствуйте, Евгений.
      В настройках профиля уберите галочку в настройке Показывать верхнюю панель при просмотре сайта. После этого для Вас не будет выводиться эта панель.
      Если же нужно убрать ее абсолютно для всех пользователей, тогда в файл functions.php добавьте эту строку кода:
      show_admin_bar(false);

      • Евгений

        Спасибо. Я не правильно сформулировал вопрос.

        Админ панель у меня Блоком отображается Не в верху (Серая полоса), а блоком в теме ниже рубрик.

        • Андрей Кудлай

          Либо убрав виджет (если она устанавливается виджетом), либо же убрав ее из шаблона sidebar.php (если она находится там).

  5. Валерий

    Здравствуйте.

    У меня вопрос — а зачем нужно указывать еще свойство height: 50px; ?
    Ведь display: block; уже превращает ссылку в блочный элемент с наследуемыми от родителя высотой и шириной? По крайней мере, у меня в Chrome инспектор так и показывает.

    • Андрей Кудлай

      Здравствуйте, Валерий.
      Просто изначально я не указывал свойство line-height для элемента списка, поэтому для ссылки и указал нужную высоту.

  6. Валерий

    Да, теперь понятно. Спасибо.

  7. Илья

    Здравствуйте, скажите а как данный код центрировать, что б менюшка была по середине, спасибо

    • Андрей Кудлай

      Здравствуйте. Зависит от контекста страницы, в которую встраивается меню, но в общем случае достаточно задать ширину меню (width) и автоматические внешние отступы (margin).

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

Ваш 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