Създаване на CSS меню - ръководство за начинаещи, CSS

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

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

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

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

На насипни сайтове, съдържащи повече от 50 страници, не е възможно да се постави пълно меню за достъп до всички секции.

В този случай, използвайте падащото меню в CSS, когато щракнете върху това, има допълнителни връзки към подсекции.

Разнообразие от меню в CSS

Има няколко вида и типа меню CSS:

1. В главното меню. Това е списък с конкретни препратки към основните раздели на сайта.
2. Допълнително меню. Това меню има йерархична структура и могат да бъдат три вида:
   
   • Падащо меню. Оказва се, когато задържите курсора на мишката върху елемента;
   • В контекстното меню на сайта. Разкрива един клик в определен момент;
   • Статично за допълнителни CSS менюта. Структурата на дърво е показано на вече развита форма.

Как да създадете меню в CSS?

Ето един пример за създаване на прост хоризонтални и вертикални CSS менюта с обяснения.

хоризонтална код меню предписано, както следва:

Крайният резултат е подобен на хоризонтално меню:

вертикално меню, кодът е писано, както следва:

Вертикално меню. получена с помощта на кода изглежда така:

Ръководейки се от всички по-горе принципи, ние носим кода за проста падащо меню:

Получаваме падащото меню:

Както можете да видите, съвсем прост HTML маркиране, и само на няколко линии на CSS код, който може да създаде един прост, но стилен меню, което със сигурност ще намери своето място във всеки уеб сайт. Не забравяйте да се опитат да въведат нещо подобно себе си.