Створюємо навігацію

13

Привіт, Шановні передплатники!

Тільки закінчив роботу над черговим проектом. У ньому, крім основного меню, присутня так само і навігація. І я вирішив, що непогано було б показати вам, як подібні речі робляться буквально кілька рядків коду. Причому робиться це виключно засобами html та css.


Створюємо навігацію

Така навігація ставиться зазвичай зліва на сайті. Нічого складного при її розробці немає. Кожен пункт навігації укладаємо в тег

. У нього ставиться посилання.

PSD макет даної речі для тренування можна завантажити тут.

Так само даний урок доступний у відео версії, яку можна скачати тут:

Качаємо вигляді версію уроку.

Ну, загалом все! Давайте подивимося на код, і все стане ясно остаточно.

ПРО ЦЕНТР

ФОТОГАЛЕРЕЯ

ПРЕЙСКУРАНТ ЦІН

КОНТАКТИ

Все інше будемо робити за допомогою стилів.

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

.bar-menu{

width:190px;

}

Оскільки текст розташовується по центру, то найпростіше його відцентрувати, задавши для тега

вирівнювання тексту по центру.

.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:[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування