ЯК зробити вертикальне меню для сайту

Вертикальне меню для сайту - дуже зручна функція, яка допомагає економити місце і легко орієнтуватися на ресурсі. Зробити його можна на основі каскадних таблиць стилів CSS або при використанні спеціальних інструментів.

Інструкція

Відкрийте сайт 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: на початку і в кінці. Переконайтеся, що вставили вірний код, і збережіть файл.