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