Приятно падащо меню може да бъде създадено не само в JavaScript, но и с помощта на стандартни HTML тагове. Този метод за създаване на падащо меню ще бъде полезен за тези, които тепърва започват първите си стъпки в създаването на сайтове и искат да опростят работата по създаването на менюта на страниците.
Инструкции
Етап 1
В HTML код такова меню е неуреден списък с вложени списъци вътре. За да започнете, създайте файл style.css и копирайте следния CSS код там, за да оформите и форматирате менюто:
#nav, #nav ul {
стил на списък: няма;
марж: 0;
подплата: 0;
граница: 1px плътен # 000;
фон: # 515151;
плувка: ляво;
ширина: 100%;
}
#nav li {
плувка: ляво;
позиция: относителна;
фон-цвят: # 003366;
назад / земя: няма;
}
#nav li ul {
дисплей: няма;
позиция: абсолютна;
фон-цвят: # 003366;
подплата: 8px 0;
ширина: 138px;
}
Стъпка 2
Сега трябва да добавим малко украса към елементите от менюто. Определете ширината и височината за тях, премахнете линиите за подчертаване, задайте ясна ширина за всяка връзка и посочете желаните цветове на фона.
Стъпка 3
За всички тези промени добавете следния код към файла:
#nav a {
цвят: #fff;
декорация на текст: няма;
дисплей: блок;
ширина: 120px;
подложка: 4px 10px;
фон-цвят: # 003366 повторение-y вдясно;
}
#nav a: hover {
цвят: # 000;
фон-цвят: # 0033FF;
}
#nav li: hover {
фон-цвят: # 333333;
}
След това добавете следната част от кода, за да завършите менюто:
#nav li: hover li ul {
дисплей: няма;
ширина: 138px;
отгоре: -9px;
вляво: 133px;
}
#nav li: hover li: hover ul {
дисплей: блок;
}
Стъпка 4
В HTML версията общият неподреден списък с менюта изглежда така - на негова основа се създава менюто, което беше споменато в статията.
- У дома
-
Каталог
-
Всички продукти
- По дата
- Производители
- Други
-
