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

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;

}

Вот и получилась наше навигационное меню:

html

Надеюсь, урок будет полезен. С вами был Андрей. Спасибо за внимание. До встречи в очередных уроках!

Автор: Андрей Бернацкий.

E-mail:contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

Верстка сайта для начинающих

Прямо сейчас научитесь верстать сайты с нуля.

Смотреть курс

Метки: , , , , ,

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

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

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

  1. Denis

    спасибо,реально помог!!!!!

  2. MrMoo

    Неплохой урок, и CSS свойства грамотно описаны но в WEB 2.0 фишка использовать JavaScript, советую для этого фреймверк MooTools и плагин написанный под него, этот плагин позволяет организовать постраничную навигацию для сайта, будь то просто html или PHP, все описано и скачать можите — cleverscript.ru/index.php/javascript/mootools/15-pagemooslider

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

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