Навигация с визуальным выделением: просто и эффектно

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

Разметка HTML

В качестве основы для навигации будет использоваться неупорядоченный список, пункты которого содержат название и краткое описание:

		<ul class="navigation">
			<li>
				<h2>Главная</h2>
				<p>Добро пожаловать!</p>
			</li>
			<li>
				<h2>Материалы</h2>
				<p>Уроки/Файлы/Видео</p>
			</li>
			<li>
				<h2>О нас</h2>
				<p>Наша команда</p>
			</li>
			<li>
				<h2>Контакты</h2>
				<p>Как с нами связаться?</p>
			</li>
		</ul>

 

CSS

Для начала формируем внешний вид нашей панели.

* {margin: 0; padding: 0;}

body {
	font-family: 'Lucida Grande', helvetica, arial, sans-serif;
	font-size: 12px;
	background: #eff;
}

.navigation {
	margin: 200px 20px;
	background: #fff;
	overflow: hidden;
	width: 840px;
	
	box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}

.navigation li {
	width: 140px;
	border-left: 5px solid #666;
	float: left;
	cursor: pointer;
	list-style-type: none;
	
	padding: 10px 50px 10px 15px;
	
}

.navigation li h2 {
	font-family: georgia;
	font-weight: normal;
	font-style: italic;
	font-size: 14px;
	margin-bottom: 5px;
	line-height: 16px;
}

.navigation li p{
	font-size: 11px;
	color: #999;
	
}


А затем добавляем изменения для состояния hover. Также используем переходы CSS3 для формирования привлекательного визуального эффекта.

.navigation li {
	width: 120px; border-left: 5px solid #666;
	float: left;
	cursor: pointer;
	list-style-type: none;
	
	padding: 10px 50px 10px 15px;
	
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
}

.navigation li p{
	font-size: 11px;
	color: #999;
	
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
}

.navigation li:hover {
	background: #333;
	border-left: 5px solid #000;
}

.navigation li:hover h2 {
	font-weight: bold;
	color: #fff;
}

.navigation li:hover p {
	color: #ccc;
	padding-left: 5px;
}

Готово!

Все просто, но эффектно. И никакой лишней разметки и JavaScript кода.


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

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

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



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

Навигация с визуальным выделением: просто и эффектно | | 2012-08-22 20:43:24 | | Статьи Web-мастеру | | В данном уроке сделаем простую, но эффектную навигацию с визуальным выделением пункта при навдении курсора мыши.Разметка HTMLВ качестве основы для навигации будет использоваться неупорядоченный | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: