Вертикалното падащо меню е много удобно - спестява място на уеб страницата, като в същото време помага за лесно навигиране в сайта. Опитайте се да направите падащо меню въз основа на CSS - Каскадни таблици със стилове. Ако все още не сте експерт в създаването на CSS код, използвайте услугата purecssmenu.com. От вас се изисква да изберете тип меню, да персонализирате външния му вид и след това да го адаптирате към вашия собствен сайт. Самата услуга ще генерира необходимия код, който след това вмъквате във файловете на вашия сайт.
Инструкции
Етап 1
Регистрирайте се на уебсайта purecssmenu.com, в противен случай няма да можете да изтеглите създаденото меню. Щракнете върху бутона Шаблони в лявата част на страницата. По-долу ще видите няколко малки прозореца с шаблони от падащо меню, като щракнете върху който ще зареди визуализация отдясно в прозореца за предварителен преглед. Изберете шаблон, който отговаря на вашия сайт
Стъпка 2
Персонализирайте шрифта и цвета на менюто: използвайте раздела Параметри. В полето Шрифт изберете шрифт, размер на шрифта, ако е необходимо, подчертайте и получер. В полето Цветове задайте фона на менюто, цвета на шрифта и цветовете на курсора на мишката и на фона на курсора
Стъпка 3
Отворете раздела Елементи, за да управлявате елементите от менюто. Ако щракнете върху бутона Изчистване на кошчето, примерните елементи се изчистват и можете да създадете свои собствени. За да направите това, натиснете бутона Добавяне на елемент плюс - елементът ще бъде добавен в края на менюто. Бутонът "Добавяне на следващ елемент" се използва за добавяне на елемент след избраното в момента време. Бутонът Add Subitem създава елемент от подменюто за селекцията. Съответно, за да премахнете елемент, използвайте бутона Премахване на елемент
Стъпка 4
Обърнете внимание на полето Параметри на артикула в долната част на сайта. В реда Текст посочете името на елемента от менюто, в реда Свързване - URL адреса на страницата, към която ще води този елемент. В реда Съвет можете да оставите описание на елемента, което ще се покаже, когато задържите курсора на мишката върху връзката. Редът Target се използва за определяне на начина за отваряне на страницата, към която води връзката. Параметърът _self на този ред отваря страницата в същия прозорец на браузъра като текущия
Стъпка 5
След като приключите с настройката на менюто, изтеглете го - щракнете върху бутона Изтегляне в долния десен ъгъл на страницата (тази функция е достъпна след регистрация на сайта). Изберете папка на вашия твърд диск, където ще бъде запазен архивният файл. Разопаковайте го. Ще трябва да копирате необходимия код от файла purecssmenu.html в CSS файла на вашия сайт. Отворете файла purecssmenu.html с текстов редактор и копирайте кода между таговете и в CSS шаблона на вашия сайт (този файл има разширение.css и изглежда нещо като file.css). Сега поставете кода във файла на шаблона на вашия сайт (теми) - кода от purecssmenu.html между коментарите и вместо обикновения код на менюто. За да направите това, трябва поне малко да сте запознати с програмирането. Не забравяйте да поставите кода в правилния файл и да го запазите.
