Създаване на менюта с помощта на CSS и HTML

Предишен ◈ Следващото

Ако вашият уеб сайт не се ограничава до една единствена уеб страница, трябва да помислите за добавяне на лентата за навигация (меню). Меню - раздел на уебсайта, предназначени да помогнат на посетителите да навигирате през сайта. Всеки меню е даден списък с линкове, водещи към вътрешни страници на сайта. Най-лесният начин да добавите лента за навигация на сайта е да се създаде меню с CSS и HTML.







вертикално меню

Първата стъпка в създаването на създаването на списък с водещи символи е вертикалното меню. Също така, ние трябва да бъдем в състояние да се идентифицират в списъка, така че ние да добавите към него на атрибут за идентификатор с "навигационната лента с" идентификатор. всеки елемент

  • Нашият списък ще съдържа един линк:

    Следващата ни задача е да нулирате списъка със стилове, създадена по подразбиране. Ние трябва да се премахне външна и вътрешна облицовка на самия списък, както и маркери в списъка с елементи. След това ще създаде желаната ширина:

    Сега е време да оформите самата връзка. Ние ще добавим към него цвета на фона, да променяте теглото на цвета на текста, размера и шрифта, извадете подчертаване, добавете малко уплътнение и предефиниране елемент на дисплея с линията на блока. В допълнение, лявото и долното рамки да се изброят са добавени елементи.

    Най-важната част от нашите промени е предефиниране на линейните елементи в блока. Сега нашите връзки на всички налични пространство списък на елементите, които трябва да следвате връзката, вече не е необходимо да се движи мишката, точно върху текста.

    Ние сме се комбинира целият код, както е описано по-горе, в един пример, сега опитайте да кликнете върху бутона, можете да преминете към страницата и вижте пример за резултата:







    Когато задържите курсора на мишката върху менюто на външния вид може да се променя, да привлече вниманието на потребителя. Създаване на такъв ефект, можете да използвате псевдо-класа: мишката.

    Нека се върнем към горния пример с вертикално меню и да добавите към листа стил следното правило:

    хоризонтално меню

    Можете да създавате хоризонтално меню от стайлинг обикновен списък. Имоти за показване на елементи

  • което трябва да се придаде стойност инлайн, да се изброят елементи, разположени един зад друг.

    Напиши за няколко нашия списък с правила, които изхвърлят стил се използва за списъците по подразбиране, и списък продукти за предефиниране на блока в малки букви:

    Сега остава само да се определи стила на нашия хоризонтално меню:

    Падащо меню

    Менюто, което ще създадем ще има основните навигационни връзки, разположени в хоризонтална лента за навигация, както и алинеи, които се показват само когато курсора на мишката, за да опцията в менюто, които се прилагат алинеи.

    Първо трябва да се създаде HTML-структура на нашето меню. Основните връзки за навигация ще се постави в списък с водещи символи:

    Подточки ще поставят в отделен списък, го поставят в клетка

  • , който съдържа линк към родителя по отношение на букви. Сега имаме ясна структура за нашето бъдеще лента за навигация:

    Тогава ние трябва да се уверим, че нашата падащото подменю не превключва на съдържанието под лентата за навигация надолу. За да направите това, което искаме положение списък точки: роднина. и избор на под-позиция: абсолютното; и добавяне на горния имот на стойност от 100% до абсолютно позициониран подменю показва точно под линка.

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

    Сега ние трябва да стилизирам двете от нашия списък, както и от падащото меню ще бъде готов:







    • Предишен ◈ Следващото