Как да направите падащо меню на CSS

Днес ще разгледаме въпроса "Как да създадем падащо меню на CSS?". Трябва да се каже веднага, че този елемент ще бъде направен без връзка с каквито и да било допълнителни средства. Това означава, че менюто ще бъде създадено само с CSS и HTML.

Подготовка на

За да разберете напълно какво се случва в статията, е необходимо да се запознаете малко с теоретичния материал. Но ако сте запознати с псевдокласите, можете да пропуснете този параграф. Така че, за да създадем вертикално падащо меню за CSS, се нуждаем от елемент като "hover". Псевдоклас ": hover" може да бъде присвоен на всеки HTML таг. Тя ви позволява да определите кога курсорът на мишката сочи към елемент. Например, присвоихме собственост: "a: hover {color: red-}". Този запис означава, че когато се движите курсора на мишката към всеки маркер съдържанието му става червено. Струва си да се отбележи, че този псевдоклас означава все още неактивен елемент. Между другото, ": hover" има подобни сродни елементи. Но с тази псевдокласа ще създадем падащо меню на CSS.

• Създайте оформление на нашето меню. За да направите това, ще направим HTML маркировката. Създаване на вложен списък :. Това трябва да изглежда като падащото меню. CSS ще влезе в действие малко по-късно. В този случай главният списък се състои от три основни елемента и два вложени.
• Скриване на допълнителното меню. За да направите това, ние използваме стилови листове, дефинирайте следната собственост: ul ul {display: none;} Това ще премахне елементите от втория списък от екрана.
• Създайте меню от падащото меню CSS от основния списък. В каскадни стилови листове напишете следното правило: ul li: hover ul {display: block-}. Този запис означава, че когато поставите курсора на мишката над елемента li в списъка ul, на екрана се появява ul (вложено). На пръв поглед такава схема може да изглежда твърде сложна и объркваща. Но всъщност всичко е много просто.
• Използвайте сами това оформление, като вмъквате между маркерите
• вашето съдържание. Можете да промените броя на елементите в списъка.

Декоративни промени

Щом оформлението на главното меню е готово, можете да продължите с неговия дизайн. Вероятно мнозина на първо място искат да се отърват от маркерите, които определят елемента на списъка. Това се прави, като се използва само една собственост на CSS, а именно тип стил на списък. Трябва да добавите този запис: li {list-style-type: none;}. След това можете да поставите рамка и да направите фон. Функциите на границата и фон ще ви помогнат. Може би някои от тях няма да харесат, че падащото меню се появява като допълнителен списък, докато се разширяват основните елементи. За да поправите това, можете да го позиционирате. За да направите това, в каскадни стилови листа напишете следното записване: ul ul {position: absolute-left: 15px; дясно: 15px; горе: 15px; долу: 15px;}. Естествено, стойностите, които ще използвате сами. В зависимост от това, къде искате да видите падащото меню, CSS ще предложи много повече имоти, които могат да добавят различни ефекти и да украсяват нашите списъци.

заключение

За пореден път струва да се отбележи дизайна на оформлението на менюто. За да зададете CSS правила в този случай, използвате вложени стойности, например ul ul. Ако имате други подобни проекти в документа, тогава може да има големи проблеми. В тези ситуации трябва да използвате по-конкретна цел, например селектори или идентификатори на идентификатори. Оформлението на падащото меню в статията е предназначено за запознаване с общия дизайн. Останалата част от работата е на раменете ви.