Компютри, Софтуер
Как да си направите падащо CSS менюта
Днес ще разгледаме въпроса за "Как да създам падащо CSS менюта?". Трябва да кажа веднага, че тази позиция ще бъде направено, без да свързвате допълнителни средства. Това означава, че менюто ще бъдат създадени само с CSS и HTML.
обучение
За да се разбере напълно това, което е в него, в статията, трябва малко да се запознаят с теоретичната материал. Но ако сте запознати с псевдо-класовете, можете да пропуснете тази точка. Така че, за да се създаде вертикална падащото CSS менюта, ние се нуждаем елемент като «: навъртам». псевдо The «: навъртам» могат да бъдат давани на HTML тагове. Тя ви позволява да се определи моментът, когато даден елемент Задръжте курсора на мишката. Например, ние сме назначени имот: «по-: навъртам {цвят: червен;}». Този пост означава, че когато движите мишката, тя се оцвети в червено за съдържанието на който и да е маркер . Заслужава да се отбележи, че тази псевдо-елемент също се инактивира. Между другото, «: навъртам» е свързана подобни елементи. Но от това ние ще създадем падащото меню псевдо CSS.
инструкция
Първо, нека да се разбере какво е падащо меню. В рамките на тази дефиниция получава много различни методи за конструиране на различни оформления. В този случай, ние ще анализираме структура, състояща се от няколко постоянно видими елементи и няколко допълнителни (скрита). Нека да завърша с теорията и да започне да практикува.
- Ние създаваме оформлението на нашето меню. За да направите това, етикетиране на HTML код. Създаване на вложените списък: <ул> <Ли> <Ли> <ул> <Ли> <Ли> <Ли> < / ул>. Нещо като това трябва да изглежда вашия падащото меню. CSS да се намеси по-късно. В този случай основния списък се състои от три основни области и два затворени.
- Скриване на подменюто. За това ние използваме стилове, се определят следните свойства: ул ул {дисплей: няма;} Това ще премахне елементи на втория списък от екрана.
- Създаване на CSS меню, падащото от основния списък. листове със стилове пишат следното правило: ул Ли: мишката ул {дисплей: блок;}. Този пост означава, че когато мишката е над Ли елемент, който се намира в ул списък се появява на екрана на UL (приложен). На пръв поглед такава схема може да изглежда сложен и объркващ. Но в действителност, всичко е много просто.
- Използвайте това оформление себе си чрез поставяне на етикетите
- си съдържание. Можете да промените броя на списък елементи.
декоративни промени
В момента, в оформлението на главното меню е готов, можете да продължите с регистрацията. Вероятно мнозина, на първо място готови да се отърват от маркери, показващи елемента от списъка. Това се прави с помощта на един CSS имот, а именно списък стил тип. Трябва да добавите следната позиция: Ли {списък стил тип: няма;}. След това можете да поставите на рамката и да направи на заден план. Границата и фона да ви помогне с това. Може би някои няма да се хареса на падащото меню ще се появи като допълнителен списък, бутане на едни и същи основни елементи. За да поправите това, можете да го поставите. За да направите това, Cascading Style Sheets пишат следното вписване: ул ул {позиция: абсолютни; лява: 15px; дясно: 15px; отгоре: 15px; надолу: 15px;}. Разбира се, стойностите, които ще използват своя собствена. В зависимост от мястото, където искате да видите менютата падащите, CSS ще предлага много повече функции, които могат да се добавят различни ефекти и украсяват нашите списъци.
заключение
За пореден път да се отбележи, изграждането на оформлението на менюто. За да зададете правила за CSS, използвани в този случай вградена стойност, например, ул ул. Ако сте в документа, за да се срещне друга подобна конструкция, може да има големи проблеми. В тези случаи е необходимо да използвате конкретна цел, например, селектори или лична-документи за самоличност. Горната падащото меню статия оформление е предназначена да запознае широката дизайн. Останалата част от работата се основава на раменете си.
Similar articles
Trending Now