Як зробити вертикальне меню, що випадає


 

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


Інструкція


  1. Як зробити вертикальне меню, що випадає

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

  2. Як зробити вертикальне меню, що випадає

                            Налаштуйте шрифт і колір меню: для використовуйте вкладку Parameters. В поле Font виберіть шрифт, розмір шрифту, якщо потрібно, — підкреслення (underline) і виділення жирним (bold). В поле Colors налаштуйте тло меню (background), колір шрифту (font), а також колір шрифту (font hover) і колір фону (background hover) при наведенні курсору.

  3. Як зробити вертикальне меню, що випадає

                            Відкрийте вкладку Items, щоб управляти пунктами меню. Якщо ви натиснете кнопку кошика Clear, приклади пунктів очистяться і ви зможете створити свої. Для цього натисніть кнопку з плюсом Add Item — пункт буде додано в кінець меню. Кнопка Add Next Item служить для того, щоб додати пункт, наступний після виділеного в даний момент часу. Кнопка Add Subitem створює вкладений пункт меню для виділеного. Відповідно, щоб видалити якийсь пункт, використовуйте кнопку Remove Item.

  4. Як зробити вертикальне меню, що випадає

                            Зверніть увагу на поле Item Parameters (Параметри пункту) внизу сайту. У рядку Text вкажіть назву пункту меню, в рядку Link — url сторінки, на яку буде вести даний пункт. У рядку Tip ви можете залишити опис пункту, яке буде показуватися при наведенні курсору на посилання. Рядок Target призначена для визначення способу відкриття сторінки, на яку веде посилання. Параметр _self в цьому рядку відкриває сторінку в тому ж вікні браузера, що і поточна.
  5. Закінчивши настройку меню, скачайте його — натисніть кнопку Download справа внизу сторінки (ця функція доступна після реєстрації на сайті). Виберіть папку на жорсткому диску, куди буде збережений файл архіву. Розпакуйте його. Потрібний код з файлу purecssmenu.html вам треба буде скопіювати в файл шаблону CSS вашого сайту. Відкрийте файл purecssmenu.html за допомогою текстового редактора і скопіюйте код, укладений між тегами

    , в CSS шаблон свого сайту (цей файл має розширення. Css і виглядає приблизно як file.css). Тепер вставте код у файл шаблону сайту (теми) — код з purecssmenu.html між коментарями і замість коду звичайного меню. Для цього вам потрібно хоча б трохи орієнтуватися в програмуванні. Переконайтеся, що вставили код в потрібний файл, і збережіть.

Зверніть увагу

перенастроювати пункти з адмінки свого сайту ви не зможете. Щоб щось поміняти, доведеться заново переробити меню в сервісі purecssmenu.com.