Делаем вертикальное выпадающее меню

altДля того чтобы  сэкономить место на своей веб-странице, а также сделать на сайте легкий поиск информации, многие веб-мастера делают вертикальное выпадающее меню. Такой эффективный метод, может быть основан на  CSS - каскадных таблицах стилей. Но если вам не очень знакомо такое направление, то можно воспользоваться специальным сервисом под названием  purecssmenu.com. С помощью него вам нужно будет выбрать нужный тип меню и настроить внешний вид, а потом адаптировать его под собственный сайт. Сервис самостоятельно сгенерирует код, который вам потом будет необходимо вставить в файл у себя на сайте. 
 
Перед тем как приступить к созданию вертикального меню с использованием  этого сервиса, вам предстоит пройти регистрацию, для того чтобы вы могли скачать созданное вами меню. Затем вам потребуется нажать в левой странице сервиса кнопку Templates и перед вами появится несколько окошек с шаблонами, нажав на любое из них с правой стороны загрузиться их предпросмотр. Затем просмотрев их все, выберете подходящий шаблон.  Для того чтобы настроить цвет и шрифт меню, следует использовать вкладку   Parameters. Размер шрифта выбирается в  поле Font, при необходимости можно выбрать подчеркивание  underline либо жирные буквы - bold.  В поле Colors вы можете настроить фон меню и цвет букв.  Для управления пунктами меню, нужно воспользоваться вкладкой Items. Примеры пунктов можно очистить кнопкой Clear, тем самым вы сможете создать свои. Для этого нажмите  Add Item и новый пункт добавиться в конец меню. Для того чтобы создать в выделенном пункте, вложенную строку нужно нажать на  Add Subitem. Для удаления ранее созданного пункта используйте кнопку  Remove Item. Также, обратите свое внимание на поле «Параметры пункта», которое расположено внизу сервиса. В строке под названием Text укажите имя пункта меню, а в строчке Link - url страницы. В строке Tip можно ввести описание пункта, он будет появляться во время наведения на него курсором. Строка Target используется для выбора  способа открытия страницы.
 
После того, как вы произведете настройку своего меню, вы можете его скачать, используя для этого кнопку Download, которая находиться  внизу страницы. Затем выберете на своем жестком диске папку, в которую будет производиться сохранение созданного меню. После этого в ней будет создан архив, который вам потребуется распаковать.  Затем из файла  purecssmenu.html скопируйте код, который затем нужно будет вставить в   файл шаблона CSS  на вашем интернет ресурсе и сохранить его. 

©2007-2015, ya.kg.
При использовании материалов с сайта гиперссылка на источник обязательна.