Складіть меню, визначте його структуру. Розмістіть елементи в зручному для майбутнього користувача порядку. Подумайте над зрозумілими і грамотними назвами розділів. Визначте пункти, які повинні бути випадають, і підпункти, які будуть в цих випадних списках.

Оформіть придуману структуру за допомогою html-тегів. Це буде виглядати приблизно так:

Помістіть всі меню в блок

Створіть списки, де

- сам список, а
• - кожна з його рядків. Додайте для всіх майбутніх ссилкок, які повинні створювати меню, що випадає, свій список з підпунктами. Перетворіть назви пунктів меню в посилання, уклавши їх в тег . Дайте його параметру href адреса сторінки, на яку буде вказувати посилання.

Задайте властивості списку через css, внісши їх у css-файл: #vmenu ul {margin: 0px; padding: 0px; list-style: none; width: 250px; }. Задайте рівними нулю відступи padding - відступ всередині і margin - відступ зовні елемента списку. Вкажіть list-style - стиль маркованого списку, за замовчуванням з точками, які при значенні none прибираються. Введіть ширину списку width.

Додайте властивості елемента списку: #vmenu ul li {position: relative-}. Вкажіть параметр позиціонування, тобто розташування елементів position. Дайте йому відносне значення relative, щоб визначати розташування меню, що випадає щодо початкового. Створюване меню буде вертикальним.

Вкажіть властивості для списку, розташованого в елементі іншого списку: #vmenu li ul {position: absolute- left: 250px; top: 0- display: none; }. Надайте параметру позиціонування position значення absolute, щоб здійснювати абсолютне позиціонування підміню щодо пункту меню. Задайте розташування за допомогою відступу простору зліва left і зверху top. Визначте параметр відображення елемента display як none, оскільки спочатку випадає не повинен бути видно.

Внесіть параметри для посилань: #vmenu ul li a {display: block- padding: 5px; text-decoration: none; color: # 606060- background: # d8d8d8-}. Надайте параметру відображення display значення block, що робить елемент блоковим. При цьому він видимий і поводиться, як блок. Задайте відступ padding, колір тексту посилання color, колір фону посилання background, стиль посилання text-decoration. Значним none прибирає підкреслення за замовчуванням.

Задайте дію при наведенні курсору: #vmenu li: hover ul {display: block-}. Вкажіть, що при наведенні курсору на рядок списку li, список ul, розташований в ньому, стає видимим.

Додайте за бажанням параметри кольору або зображення для фону, горизонтальні риси, шрифт посилань і інші властивості, що визначають зовнішній вигляд меню.

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