С помощта на добър HTML код и прости CSS правила можете да създадете приятно изскачащо меню, което може лесно да бъде модифицирано и допълнено. Използвайки езика за маркиране и каскадни таблици със стилове, можете да се уверите, че менютата работят правилно във всички браузъри.
Инструкции
Етап 1
Първо, изградете основната структура на менюто си. Отворете текстов редактор и създайте номериран списък с подменю, което действа като родителски елемент от списъка. Например:
-
Първи елемент
- Падащ елемент
- Падащо меню 2.
Стъпка 2
Запазете генерирания списък в отделен html файл. След това създайте файл с разширение.css и въведете всички параметри на таблицата със стилове.
Стъпка 3
Премахнете всички подложки и символи, които се прилагат в списъка с маркери и задайте ширината на менюто, като използвате CSS инструменти: ul {list-style: none;
ширина: 200px; }
Стъпка 4
Задайте относителната позиция на всички елементи в списъка, като използвате атрибута позиция: ul li {позиция: относителна; }
Стъпка 5
След това трябва да проектирате подменю, всеки от елементите на който ще се появи вдясно от родителското меню в момента, когато показалецът на мишката е върху елемента: li ul {position: absolute;
вляво: 199px;
отгоре: 0;
дисплей: няма; } Левият атрибут е с един пиксел по-малък от ширината на самото меню. Това позволява изскачащите елементи да бъдат позиционирани интелигентно, без да се създават двойни граници. Атрибутът display се използва за скриване на подменюто при отваряне на страницата.
Стъпка 6
Оформете връзките по желание, като използвате подходящите опции за css. Включете параметъра display: block, така че всяка връзка да заема цялото пространство, което е запазила за нея.
Стъпка 7
За да се появи менюто в момента, в който курсорът е над него (задръжте курсора), трябва да въведете кода: li: hover ul {display: block; }
Стъпка 8
Задайте допълнителни опции за показване на връзки и елементи от списъка, както желаете.
Стъпка 9
Изскачащото меню е готово. Сега остава да включите атрибута в.html файла: Изскачащо меню
