Как сделать вертикальное меню для сайта
- Как создать и установить вертикальное меню для сайта
- Шаг 1: Регистрация на сайте purecssmenu.com
- Шаг 2: Выбор шаблона и настройка параметров
- Шаг 3: Добавление и управление пунктами меню
- Шаг 4: Настройка параметров пунктов меню
- Шаг 5: Скачивание и установка меню
- Теперь у вас есть готовое вертикальное меню для вашего сайта.
Как создать и установить вертикальное меню для сайта
Вертикальное меню для сайта - очень удобная функция, помогающая экономить место и легко ориентироваться на ресурсе. Сделать его можно на основе каскадных таблиц стилей CSS или при использовании специальных инструментов.
Шаг 1: Регистрация на сайте purecssmenu.com
Для начала откройте сайт purecssmenu.com и зарегистрируйтесь на нем. Без регистрации вы не сможете создавать и скачивать созданное меню.
Шаг 2: Выбор шаблона и настройка параметров
На сайте найдите кнопку "Templates" и нажмите на нее. Вам будут предложены различные шаблоны вертикальных меню. Просматривайте их в окошке "Preview" и выберите шаблон, который наилучшим образом подходит для вашего сайта.
Далее, воспользуйтесь вкладкой "Parameters", чтобы установить шрифт и цвет меню. Выберите шрифт и его размер в поле "Font". Если нужно, укажите подчеркивание и выделение жирным. В поле "Colors" установите цвет фона вертикального меню и цвет шрифта и фона при наведении курсора.
Шаг 3: Добавление и управление пунктами меню
Зайдите в меню "Items" для управления пунктами меню. Нажмите кнопку "Clear", чтобы очистить примеры пунктов и создать свои собственные. Добавьте пункт в конец меню, кликнув на кнопку с плюсом "AddItem". Используйте кнопку "AddNextItem", чтобы добавить пункт, который будет следовать после выделенного в текущий момент времени. Кнопка "AddSubitem" создает вложенный пункт для выделенного. Для удаления пункта воспользуйтесь кнопкой "RemoveItem".
Шаг 4: Настройка параметров пунктов меню
Откройте параметры пункта (ItemParameters) внизу сайта. Укажите в строке "Text" название для пункта меню, а в "Link" – его веб-адрес. Строка "Tip" отвечает за описание пункта, которое будет отображаться при наведении на ссылку курсора. Раздел "Target" определяет способ открытия страницы. Параметром "_self" страницу можно настроить для открытия в текущем окне браузера.
Шаг 5: Скачивание и установка меню
Нажмите на кнопку "Download" внизу страницы, чтобы скачать готовое меню. Скопируйте соответствующий код из файла "purecssmenu.html" в файл шаблона CSS, вставив его в начале и в конце. Убедитесь, что вставили верный код, и сохраните файл.
