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

Відео - Меню, що випадає на css

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

Поділися в соц мережах:

Увага, тільки СЬОГОДНІ!
Схожі
» » Як зробити вертикальне меню, що випадає