Создаём стильное горизонтальное меню на CSS3

Мы будем создавать это стильное горизонтальное меню при помощи новых функций CSS3. Посмотреть demo.

HTML

<nav> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Categories</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Portfolio</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> </nav> Дальше вы увидите,почему мы использовали элемент span.

CSS

Демонстрационный пример содержит также заголовок и логотип (дополнительные стили), но я перечислю здесь только стили, используемые для этого меню. nav ul { padding: 0; margin: 0; list-style: none; } nav li { float: left; }

Основной стиль меню

Здесь мы будем использовать новые элементы CSS3 nav a { float: left; color: #eee; margin: 0 5px; padding: 3px; text-decoration: none; border: 1px solid #831608; font: bold 14px Arial, Helvetica; background-color: #831608; background-image: -moz-linear-gradient(#bb413b, #831608); background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608)); background-image: -webkit-linear-gradient(#bb413b, #831608); background-image: -o-linear-gradient(#bb413b, #831608); background-image: -ms-linear-gradient(#bb413b, #831608); background-image: linear-gradient(#bb413b, #831608); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 -1px 0 rgba(0,0,0,.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset; } nav a:hover { background-color: #bb413b; background-image: -moz-linear-gradient(#831608, #bb413b); background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b)); background-image: -webkit-linear-gradient(#831608, #bb413b); background-image: -o-linear-gradient(#831608, #bb413b); background-image: -ms-linear-gradient(#831608, #bb413b); background-image: linear-gradient(#831608, #bb413b); } nav a:active { background: #bb413b; position: relative; top: 2px; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; } Стиль элемента span nav span { border: 1px dashed #eba1a3; display: inline-block; padding: 4px 15px; cursor: pointer; background-color: #bb413b; background-image: -moz-linear-gradient(#d4463c, #aa2618); background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618)); background-image: -webkit-linear-gradient(#d4463c, #aa2618); background-image: -o-linear-gradient(#d4463c, #aa2618); background-image: -ms-linear-gradient(#d4463c, #aa2618); background-image: linear-gradient(#d4463c, #aa2618); } nav a:hover span { background-color: #bb413b; background-image: -moz-linear-gradient(#aa2618, #d4463c); background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c)); background-image: -webkit-linear-gradient(#aa2618, #d4463c); background-image: -o-linear-gradient(#aa2618, #d4463c); background-image: -ms-linear-gradient(#aa2618, #d4463c); background-image: linear-gradient(#aa2618, #d4463c); }

Преимущества

Масштабируемость.

Вы можете легко настроить размер,шрифт и другие свойства ссылок,изменяя код,который предоставлен ниже: font: bold 14px Arial, Helvetica;

Заключение

Меню,которое мы создали с помощью этого урока не является сложным.Основной целью этого урока было увидеть, насколько CSS3 может помочь нам добиться интересных эффектов, без необходимости вставки изображения. Источник: webinby.ru
Версия для печатиВерсия для печати

Рубрики: 

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 0
Заметили ошибку? Выделите ее мышкой и нажмите Ctrl+Enter!