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