CSS графично меню

На повечето сайтове менюто за навигация е проектирано с помощта на обикновени текстови връзки. Първо, такива връзки са добре индексирани от търсачките, и второ, това е най-лесният начин. Но какво да направите, когато дизайнът изисква нестандартно решение? В тази статия ще споделя опита си и ще покажа с пример как да създам навигационно меню с помощта на изображения, но все пак да спестя.

Ето и менюто:

Ето такова просто, но много атрактивно меню. Графичното решение за това меню е направено само защото използва нестандартен шрифт. Ако се използва общ шрифт, например Arial - не бих написал тази статия.

Отбелязвам, че решението да се направи меню с помощта на списък е само специален случай. В тази ситуация тагът LI е елементът от менюто.

Парче по парче

Да, това е фоновото изображение на цялото меню, към което ще има връзка. Менюто има строго фиксиран размер, съответстващ на размера на този фон: 536 пиксела на ширина и 93 на височина. Разбира се, този подход налага някои ограничения върху създаването на нов елемент от менюто. Например, за да добавите допълнителен елемент към менюто, в допълнение към създаването на самото изображение с текст, трябва ръчно да редактирате фона. Същото важи и за изтриването на някой от елементите.

Менюто има идентификатор на навигационната лента, чрез който може да бъде безопасно достъпено чрез CSS:

В резултат на това браузърът извежда следния резултат:

Използвайки същия CSS, е лесно да почистите самите елементи (LI):

Трябва да отбележа, че резултатът вече е по-скоро реален:

Обяснения към кода:

list-style: none - премахва маркера от елементите на списъка;
float: left - принуждава елемента да се подравни вляво;
position: relative - това свойство е необходимо, за да можете да позиционирате абсолютно различни елементи вътре в LI тага (спрямо местоположението му на страницата). До този момент ще се върна повече от веднъж.

Всеки LI има свой собствен клас (относно, съоръжение, портфолио, свободно място и често задавани въпроси). Така на всеки елемент се дава определена ширина:

#navbar li.about < ширина: 110px >#navbar li.facility < ширина: 101px; >#navbar li.portfolio < ширина: 108px; >#navbar li.vacancy < ширина: 103px; >#navbar li.faq

Предимството на въпросното меню е, че не използва графични линкове в буквалния смисъл, а самите линкове се състоят от текст, върху който са насложени елементи със съответното фоново изображение. Ето как текстовият изглед на връзките е стилизиран с помощта на CSS:

Обяснения към кода:

Както споменахме няколко реда по-горе, можете да зададете координати за показване на блокове. ВАЖНО е да разберете спрямо какво са тези координати! В този случай няма да е излишно да припомним, че относителното позициониране е зададено за елементите LI. По този начин позиционирането на връзка вътре в елемент LI се извършва спрямо границите на този елемент. Например, top: 0 означава, че горната част на връзка A е съседна на горната част на елемента LI, в който се намира.

Наслагване на текст

Честно казано, половината битка на този етап може да се счита за завършена. Сега си струва да обърнете внимание на самите снимки, които ще бъдат ПОКРИТИ върху текста. Като пример ще използвам параграфа в примерите.

Искам да отбележа, че всички елементи от менюто имат еднаква височина, но различни ширини. Например, въпросният елемент е с размери 110 на 29 пиксела.

Забележка,че под символи 2, 3 и 5 картинките са затъмнени. Това се прави за визуално възприятие, за да имате представа за реалния размер на изображението.

И така, всичко в ред: Като начало ще бъде полезно да си припомните фрагмент от HTML код:

Във всеки параграф се използва вмъкване преди затваряне на връзката. Както можете да видите, етикетът SPAN не съдържа никаква информация, освен интервал, представен под формата на знаци (само така, че валидаторът да не ругае). Но именно в този таг изображенията ще се зареждат и наслагват върху текста!

Заслужава да се отбележи веднага, че SPAN се намира вътре в елемента LI, по аналогия с местоположението на връзките. а именно:

Позиция: абсолютна, отгоре: 0 и отляво: 0 бяха обяснени по-горе, когато се говори за позиционирането на връзки в рамките на LI елемент. Тук тези свойства играят подобна роля. Трябва да се обърне внимание на други свойства, като например:

А сега си струва да погледнете отново илюстрацията по-горе или по-скоро символите 2 и 3. Височината на фоновото изображение е 58 пиксела, което е два пъти повече от височината на елемента от менюто. По този начин се показва само половината от фоновото изображение. Е, какво да правим с втората половина - описано по-долу.

Свойството background-position: 0 -29px се използва за анимиране на фона при задържане на курсора на мишката върху връзка. Казва, че фоновото изображение трябва да се премести нагоре с 29 пиксела. С други думи, долната половина на фоновото изображение ще бъде в обхвата.

Честно казано, правилно е, че този резултат не се различава от предишния. Факт е, че на този етап всичко е подготвено за зареждане на фонови изображения в съответните елементи (точки). За по-голяма яснота нека заредим фоновото изображение в елемент (и по-специално в тага SPAN):

Сега можете да погледнете отново резултата:

Тук, когато задържите курсора на мишката върху елемент, фоновото изображение се измества нагоре с 29 пиксела и етикетът става оранжев. Фоновите изображения се зареждат в останалите параграфи по същия начин.

След свършената работа остава една малка подробност - това е да се маркира активната връзка (която съвпада със секцията на сайта, в която се намира посетителят). За да направите това, запомнете отново HTML кода:

В този случай първият ред е от особен интерес. Както можете да видите, на етикета LI е даден не един клас, а два: съоръжение и активен. Вторият клас просто показва, че посетителят на сайта е на съответната връзка към страницата и че тази връзка трябва да бъде разграничена от останалите. По-точно, както при задържането на мишката, преместете фоновото изображение вътре в елемента с 29 пиксела нагоре.

Сега менюто е готово и можете да го използвате.

Вижте работещ пример тук. Изтегляне в архив [ZIP; 97,1 Kb]