Создаем навигацию

Дата публикации: 2009-09-20

html

Привет, Уважаемые подписчики!

Только закончил работу над очередным проектом. В нем помимо основного меню, присутствовала так же и навигация. И я решил, что неплохо было бы показать вам, как подобные вещи делаются буквально в несколько строк кода. Причем делается это исключительно средствами html и css.

html

Такая навигация ставится обычно слева на сайте. Ничего сложного при ее разработке нет. Каждый пункт навигации заключаем в тег <h2>…</h2>. В него ставится ссылка.

PSD макет данной вещи для тренировки можно скачать тут.

Так же данный урок доступен в видео версии, которую можно скачать здесь:

Качаем виде версию урока.

Ну, в общем все! Давайте посмотрим на код, и все станет ясно окончательно.


<div class="bar-menu">

		<h2><a href="#">О ЦЕНТРЕ</a></h2>
		<h2><a href="#">ФОТОГАЛЕРЕЯ</a></h2>
		<h2><a href="#">ПРЕЙСКУРАНТ ЦЕН</a></h2>
		<h2><a href="#">КОНТАКТЫ</a></h2>

	</div>

Все остальное будем делать с помощью стилей.

Для класса .bar-menu назначаются стили, которые нужны исходя из расположения соседних блоков. У меня в примере ничего кроме этой навигации на странице нет, поэтому я просто задам ему ширину.


.bar-menu{

		width:190px; 

		}

Поскольку текст располагается по центу, то проще всего его отцентрировать, задав для тега <h2> выравнивание текста по центру.


.bar-menu h2{

			text-align:center;

			}

Далее нам нужно вырезать картинки, которые поставим фоном для ссылок.

Вырезаем фон для обычной ссылки:

img17-1

И для ссылки в наведенном состоянии:

html

Картинки вырезаны, принимаемся писать css код для навигации. Точнее для ссылок навигации! Остальные стили у нас уже есть.

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


.bar-menu h2 a{

	background:url(images/bg-menu-main.jpg) center center; 
font-family:Tahoma;
font-size:10px; 
color:#056e04; 
font-weight:bold; 

				}

И что ж мы увидим?

html

Почему так? Дело в том, что фоновая картинка расположилась в ссылке ровно на столько, сколько ей позволяет это сделать текст. То есть ширина и высота ссылки определяется лежащим в ней текстом. Это кстати явный признак строчных тегов. Давайте укажем ширину и высоту:


.bar-menu h2 a{

background:url(images/bg-menu-main.jpg) center center;
 font-family:Tahoma; 
font-size:10px; 
color:#056e04; 
font-weight:bold; 
width:190px; 
height:27px;

}

По-прежнему ничего не изменилось.

html

Мы не перевели ссылку из строчного типа в блочный. За это отвечает свойство display со значением block. Добавим это свойство:


.bar-menu h2 a{

background:url(images/bg-menu-main.jpg) center center; 
font-family:Tahoma; 
font-size:10px; 
color:#056e04; 
font-weight:bold; 
width:190px;
 height:27px; 
display:block;

				}

Вроде начинает навигация принимать нужный нам вид:

img17-1

Добавляем отступ снизу у каждой из ссылок. Так же добавляем padding-top для каждой из ссылок и незабываем его вычесть из высоты:


.bar-menu h2 a{

				background:url(images/bg-menu-main.jpg) center center; 
				font-family:Tahoma; 
				font-size:10px; color:#056e04; 
				font-weight:bold; 
				width:190px; 
				height:21px; 
				display:block; 
				margin-bottom:10px;
				padding-top:6px;

				}

Получаем то, что нужно:

html

Доделываем ссылку в состоянии hover. В общем, копируем код для обычной ссылки и меняем значение фона, цвета текста ссылки и делаем текст не подчеркнутым. Остальное оставляем без изменения:


.bar-menu h2 a:hover{

				background:url(images/bg-menu.jpg) center center; 
				font-family:Tahoma; 
				font-size:10px; 
				color:#ffffff; 
				font-weight:bold; 
				width:190px; 
				height:21px; 
				display:block; 
				margin-bottom:10px;
				padding-top:6px;
				text-decoration:none;

				}