Создаем навигацию.
20.09.2009 Рубрика: Обучение \ HTML&CSS
Привет, Уважаемые подписчики!
Только закончил работу над очередным проектом. В нем помимо основного меню, присутствовала так же и навигация. И я решил, что неплохо было бы показать вам, как подобные вещи делаются буквально в несколько строк кода. Причем делается это исключительно средствами html и css.
Такая навигация ставится обычно слева на сайте. Ничего сложного при ее разработке нет. Каждый пункт навигации заключаем в тег <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;
}
Далее нам нужно вырезать картинки, которые поставим фоном для ссылок.
Вырезаем фон для обычной ссылки:
И для ссылки в наведенном состоянии:
Картинки вырезаны, принимаемся писать 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;
}
И что ж мы увидим?
Почему так? Дело в том, что фоновая картинка расположилась в ссылке ровно на столько, сколько ей позволяет это сделать текст. То есть ширина и высота ссылки определяется лежащим в ней текстом. Это кстати явный признак строчных тегов. Давайте укажем ширину и высоту:
.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. Добавим это свойство:
.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;
}
Вроде начинает навигация принимать нужный нам вид:
Добавляем отступ снизу у каждой из ссылок. Так же добавляем 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;
}
Получаем то, что нужно:
Доделываем ссылку в состоянии 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;
}
Вот и получилась наше навигационное меню:
Надеюсь, урок будет полезен. С вами был Андрей. Спасибо за внимание. До встречи в очередных уроках!
Автор: Андрей Бернацкий.
E-mail:contact@webformyself.com
Проект webformyself.com – Как создать свой сайт. Основы самостоятельного сайтостроения
| Подписаться |
|
Поделиться |
|
Метки: css, display, height, html, padding, навигация
Популярные записи
Монетизация сайта с помощью ссылочных бирж.
Как создать свой первый профессиональный дизайн сайта с нуля.
На пути к монетизации сайта: увеличиваем рейтинг сайта через наращивание ссылочной массы.
Загибающийся флеш-уголок для сайта.
Создание шаблона для отдельной страницы WordPress.
Похожие записи
Создайте легкую анимированную навигацию при помощи CSS и jQuery.
Как спроектировать и кодировать гибкий сайт.
Из PSD в HTML, создание дизайна вебсайта шаг за шагом.
Пуленепробиваемый обозреватель.
Анимация с jQuery: 7-шаговая программа.
6 способов улучшить свою web типографику.
30 рецептов правильной верстки для новичка HTML.
Кроссбраузерные отражения, свечения и размытия CSS.
Создаем навигационную панель-липучку с помощью Waypoints от jQuery.
Создаем веб-дизайн на тему комиксов, Photoshop и HTML+CSS (Часть 2).
спасибо,реально помог!!!!!
Нравится или не нравится:
0 
0
Неплохой урок, и CSS свойства грамотно описаны но в WEB 2.0 фишка использовать JavaScript, советую для этого фреймверк MooTools и плагин написанный под него, этот плагин позволяет организовать постраничную навигацию для сайта, будь то просто html или PHP, все описано и скачать можите –
Нравится или не нравится:
0 
0