CSS хоризонтално падащо меню - CSS уроци
За да създадете хоризонтално падащо меню, менюто от този урок ще бъде взето като основа.
Цветовата схема за падащите елементи ще бъде избрана така, че да е подобна на главното меню.
Основни опции за падащото хоризонтално меню:
float: left;- благодарение на този параметър главното меню става хоризонтално;float: none;- определя, че допълнителни елементи ще изпадат вертикално;
margin-left: 12px;- параметър, който определя размера на отстъпа на падащите елементи от левия край на основния елемент (избран така, че краищата на основния и допълнителния елемент да съвпадат);
display: block;- този параметър задава свойствата на блока за елементите от менюто, с които можете да зададете външни и вътрешни отстъпи - тоест да зададете размера на елементите от менюто;display: none;- елементът е невидим (докато курсорът на мишката не бъде поставен върху него);позиция: абсолютна;- означава, че цялото съдържание ще бъде във фиксирана позиция спрямо под-елементи;
Стойността на останалите параметри трябва да ви е позната от предишни CSS уроци, както и от HTML уроци.
Създайте два файла:drop_gor_menu.cssиgor_menu.html. Предполага се, че тези файлове са в една и съща директория.
Съдържание на файлаdrop_gor_menu.css
Разбира се, можете да направите нещо по-интересно от това меню. Всичко, което трябва да направите, е да намерите менюта, които са приблизително подобни на тези, които имате в ума си, и да ги проучите, за да ги повторите по-късно.
Най-добрият начин за изучаване в този случай би бил „методът на мушкане“. Тоест виждате параметър, който задава цвета или размера -> променете този параметър на нещо друго и вижте какво ще се случи и т.н. И след няколко промени ще можете да го направите самостоятелно(без чужди примери) прави каквото трябва.