Как сделать вертикальное меню для сайта?

Вертикальное меню для сайта - очень удобная функция, помогающая экономить место и легко ориентироваться на ресурсе. Сделать его можно на основе каскадных таблиц стилей CSS или при использовании специальных инструментов.
Создать сайт самостоятельно с Wix.com

Инструкция

Откройте сайт purecssmenu.com и зарегистрируйтесь на нем, иначе вы не сможете создавать и скачивать созданное меню. На левой стороне найдите кнопку Templates и нажмите на нее. Ниже появятся маленькие окошки с шаблонами вертикальных меню. Нажимайте на них поочередно и просматривайте в окошке Preview. Выберите шаблон, который наилучшим образом подходит для вашего сайта.

Установите шрифт и цвет меню, воспользовавшись вкладкой Parameters. Выбрать шрифт и его размер можно в поле Font. Если нужно, укажите подчеркивание и выделение жирным (underline/bold). Настройте фон (background) вертикального меню в поле Colors, установите цвет цвет шрифта и фона при наведении курсора (fonthover/backgroundhover).

Зайдите в меню Items для управления пунктами меню. При нажатии на кнопку Clear вы очистите примеры пунктов и сможете создать собственные. Достаточно кликнуть по клавише с плюсом AddItem, чтобы добавить пункт в конец меню. При помощи кнопки AddNextItem вы сможете добавить пункт, который будет следовать после выделенного в текущий момент времени. Кнопкой AddSubitem в меню создается вложенный пункт для выделенного. Для удаления какой-либо строки воспользуйтесь кнопкой RemoveItem.

Откройте параметры пункта (ItemParameters) внизу сайта. Укажите в строке Text название для пункта меню, а в Link – его веб-адрес. Строка Tip отвечает за описание пункта, демонстрируемое при наведении на ссылку курсора. Раздел Target определяет способ открытия страницы. Параметром _self страницу можно настроить для открытия в текущем окне браузера.

Скачайте готовое меню, нажав на кнопку Download внизу страницы. Скопируйте в файл шаблона CSS соответствующий код, расположенный в файле purecssmenu.html: в начале и в конце. Убедитесь, что вставили верный код, и сохраните файл.

Оцените статью!