Еще одно меню на CSS3

Создаем простое меню с использованием только CSS3.

Можно найти много различных вариантов меню, но хороших наработок чрезмерно не бывает.

 

Разметка HTML

Код простой и очевидный:

<nav>
	<ul>
		<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>
</nav>

Также нужно добавить следующий скрипт для обратной совместимости тегов HTML5, таких как nav:

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->	

 

CSS

Следующий код не содержит префиксов производителей браузеров (например, -moz- или -webkit-) для лучшей наглядности.

Шаг 1

Сбрасываем поля и отступы для неупорядоченного списка, а также центрируем элемент списка inline-block:

nav{
        width: 960px;
        margin: 80px auto;
        text-align: center;
}

nav ul{
        margin: 0;
        padding: 0;
}

Шаг 2

Для элементов меню используется вариант организации с использованием inline-block.

nav li{
        margin: 0 10px; /* Добавляем поле по горизонтали */
        display: inline-block;
        *display: inline;  /* IE7 и хуже */
        zoom: 1;
}

Шаг 3

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

nav a{
        display: inline-block;
        position: relative;
        padding: 8px 15px;
        border: 2px solid #fff;
        text-decoration: none;
        color: #999;
        font: bold 14px 'Lucida sans', Arial, Helvetica;
        background-color: #eaeaea;
        background-image: linear-gradient(top, #eaeaea, #fff);
        border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
                                0 0 1px 0 rgba(0, 0, 0, .2),
                                0 2px 2px rgba(0, 0, 0, .3),
                                0 10px 10px -5px rgba(0, 0, 0, .2);
}

nav a:hover{
        background-color: #eee;
        background-image: linear-gradient(top, #eee, #fff);
}       

nav a:active{
        top: 1px; /* Имитируем нажатие кнопки */
        background: #f5f5f5;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
                                0 0 1px 0px rgba(0, 0, 0, .2),
                                0 1px 2px rgba(0, 0, 0, .3);
}

Шаг 4

Теперь без дополнительной разметки с помощью псевдо-элементов получаем отличный эффект:

nav a::before{
        content: '';
        position: absolute;
        top: -10px;
        right: -10px;
        bottom: -10px;
        left: -10px;
        z-index: -1;
        background-color: #e3e3e3;
        background-image: linear-gradient(top, #e3e3e3, #f7f7f7);
        border-radius: 2px;
        box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
}

nav a:active::before{
        top: -11px; /* Не двигаться! */
}


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/_Im_9CHLAyE/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Еще одно меню на CSS3 | | 2012-06-19 11:59:53 | | Статьи Web-мастеру | | Создаем простое меню с использованием только CSS3.Можно найти много различных вариантов меню, но хороших наработок чрезмерно не бывает. Разметка HTMLКод простой и очевидный: Главная Категории О нас | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: