Вертикальне випадає меню дуже зручно - воно дозволяє заощадити місце на веб-сторінці, в той же час допомагає легко орієнтуватися на сайті. Спробуйте зробити випадає меню на основі CSS - каскадних таблиць стилів. Якщо ви поки не фахівець у створенні коду CSS, то скористайтеся сервісом purecssmenu.com. Від вас вимагається вибрати тип меню, налаштувати його зовнішній вигляд, а потім адаптувати до власного сайту. Сервіс сам згенерує необхідний код, який ви потім вставите у файли свого сайту.
Інструкція
Зареєструйтеся на сайті purecssmenu.com, інакше не зможете завантажити створене меню. Натисніть кнопку Templates в лівій стороні сторінки. Нижче ви побачите кілька маленьких віконець з шаблонами випадають меню, натиснувши на які, завантажиться предпросмотр праворуч у віконці Preview. Виберіть шаблон, відповідний для вашого сайту.
Налаштуйте шрифт і колір меню: Для використовуйте вкладку Parameters. У полі Font виберіть шрифт, розмір шрифту, якщо потрібно, - підкреслення (underline) і виділення жирним (bold). У полі Colors налаштуйте фон меню (Background), колір шрифту (font), а також колір шрифту (font hover) і колір фону (background hover) при наведенні курсору.
Відкрийте вкладку Items, щоб управляти пунктами меню. Якщо ви натиснете кнопку кошика Clear, приклади пунктів очистяться і ви зможете створити свої. Для цього натисніть кнопку з плюсом Add Item - пункт буде додано в кінець меню. Кнопка Add Next Item служить для того, щоб додати пункт, наступний після виділеного в даний момент часу. Кнопка Add Subitem створює вкладений пункт меню для виділеного. Відповідно, щоб видалити якийсь пункт, використовуйте кнопку Remove Item.
Зверніть увагу на поле Item Parameters (параметри пункту) внизу сайту. У рядку Text вкажіть назву пункту меню, в рядку Link - url сторінки, на яку буде вести даний пункт. У рядку Tip ви можете залишити опис пункту, яке буде показуватися при наведенні курсору на посилання. Рядок Target призначена для визначення способу відкриття сторінки, на яку веде посилання. Параметр _self в цьому рядку відкриває сторінку в тому ж вікні браузера, що і поточна.
Закінчивши налаштування меню, скачайте його - натисніть кнопку Download справа внизу сторінки (ця функція доступна після реєстрації на сайті). Виберіть папку на жорсткому диску, куди буде збережений файл архіву. Розпакуйте його. Потрібний код з файлу purecssmenu.html вам треба буде скопіювати в файл шаблону CSS вашого сайту. Відкрийте файл purecssmenu.html за допомогою текстового редактора і скопіюйте код, укладений між тегами, в CSS шаблон свого сайту (цей файл має розширення .css і виглядає приблизно як file.css). Тепер вставте код у файл шаблону сайту (теми) - код з purecssmenu.html між коментарями і замість коду звичайного меню. Для цього вам потрібно хоча б трохи орієнтуватися в програмуванні. Переконайтеся, що вставили код в потрібний файл, і збережіть.