Як зробити горизонтальне або вертикальне меню, що випадає для сайтуна основі CSS та Html в онлайн
Після цих нехитрих операцій нам залишиться лише завантажити згенерований код, а потім вставити його у відповідні файли шаблону свого сайту. Але про все по порядку.
Зайшовши на онлайн сервіс PureCSSMenu, потрібно буде в першу чергу визначитися з шаблоном. Вам пропонується вибір із п'яти горизонтальних та трьох вертикальних шаблонів. Для вибору потрібно перейти на сторінку шаблонів, натиснувши на вкладку«Templates» у лівій колонці вікна майстра:
Клацніть на будь-якому з шаблонів і ви побачите в області «Preview», як виглядатиме меню, створене на його основі з використанням лише CSS (таблиць каскадних стилів).
Подивіться як воно працюють і прикиньте, який шаблон, на вашу думку, найкраще підійде до дизайну вашого сайту. Врахуйте, що колірне оформлення, а також розмір, тип і зображення шрифту можна буде поміняти на вкладці«Parameters» :
Отже, ви вибрали найбільш підходящий вам шаблон для майбутнього шедевра навігації, налаштували його колірне оформлення та вибрали потрібний тип, розмір та зображення шрифту. Деякі нюанси відображення ви зможете поміняти вже безпосередньо в коді меню, що випадає (у властивостях CSS), який завантажуєте після завершення роботи з майстром.
Створення горизонтального або вертикального меню
Тепер можна переходити до створення структури, перейшовши на вкладку Items. У вікні майстра вам представиться можливість:
- створювати нові пункти (як вкладені, і не вкладені)
- видаляти вже існуючі пункти меню
- видалити всі пункти одночасно (очищення)
- встановити напис для кожного пункту
- повісити посилання на кожний пункт
- прописати для цього посилання атрибут Title (можестане в нагоді, якщо в якості анкору використовується зображення)
- настроїти спосіб відкриття сторінки під час переходу по даному пункту (у тому ж вікні або в новому вікні браузера)
Для того, щоб видалити всі демонстраційні пункти меню, ви можете натиснути кнопку під назвою «Clear» із зображенням сміттєвого бака.
Для створення нового пункту служить кнопкаAdd Item з зображення великого плюсу. У цьому випадку новий пункт випадаючого меню буде доданий до кінця списку вже наявних. Якщо ви натиснете на наступну кнопку під назвою "Add Next Item", то новий пункт буде доданий відразу після виділеного в даний момент.
Для додавання вкладеного пункту натисніть кнопку під назвою «Add Subitem», при цьому має бути обраний у вікні майстра той пункт меню, в якому ви хочете створити вкладений. Ну, а кнопка під назвою "Remove Item" служить для видалення обраного в даний момент.
Для кожного створеного пункту потрібно заповнити поля в області «Item Parameters».
- у полі "Text" повинні вписати текст
- у полі «Link» повинні вписати Урл сторінки, на яку має здійснитися перехід
- у полі «Tip» можете за бажанням вказати вміст атрибуту TITLE тега посилання A . Вміст тега TITLE буде видно, якщо підвести покажчик миші до посилання
- у полі «Target» зі списку, що випадає, ви можете вибрати спосіб відкриття сторінки, посилання на яку ви прописали для даного пункту горизонтального або вертикального меню. Якщо ви залишите значення за замовчуванням «_self», то при його виборі відвідувачем вашого сайту сторінка відкриється в цьому ж вікні браузера. Якщо ви хочете, щоб сторінка відкривалася в новому вікні браузера, потрібно буде вибрати з випадаючогосписку варіант «_blank»
Вставка створеного меню у шаблон сайту
Після того, як ви на онлайн сервісі PureCSSMenu повністю зробите меню з фрагментами, що випадають (за бажанням) і пропишіть значення для всіх його пунктів, вам потрібно буде натиснути на велику кнопку«Download» в нижньому правому кутку сторінки, для завантажити його код.
Відкриється діалог завантаження, в якому ви повинні будете вибрати місце на своєму комп'ютері для збереження файлу архіву purecssmenu-com.zip . Після завантаження коду горизонтального або вертикального меню розпакуйте це архів.
Усередині буде папка images з картинками, які використовуються у вибраному шаблоні. А також там буде лежати файл purecssmenu.html , в якому знаходиться код з описом стилів (його потрібно буде скопіювати у файл CSS шаблону оформлення для вашого сайту) і код HTML з описом пунктів створеного меню, який потрібно буде вставити в потрібне місце файл шаблону вашого ресурсу.
Я пробував вставляти горизонтальне меню, що випадає на даний блог (https://ktonanovenkogo.ru), який працює на WordPress, але воно буде чудово працювати і на будь-якому іншому інтернет проекті. Потрібно буде тільки правильно вибрати місце для вставки і прописати код стилів у файлі CCS шаблону оформлення, який ви використовуєте. Розповім на прикладі структури теми оформлення WordPress (читайте про теми та шаблони двигуна Вордпрес).
Переносимо стилі оформлення меню на свій сайт
Вставте цей фрагмент у файл CSS вашого шаблону оформлення (зазвичай лежить у папці з темою оформлення, що використовується в даний момент).
У випадку з WordPress це буде файл /wp-content/themes/назва-вашої-теми-оформлення/style.css . Щоб дізнатися шлях до файлу, що використовується у вас на сайтіstyle.css, ви можете подивитися вихідний код сторінки вашого ресурсу і знайти у верхній частині (між відкриваючим і закриваючим Html тегом Head) рядок:
Подивитися вихідний код сторінки можна, клацнувши правою кнопкою миші по сторінці у вашому браузері і вибравши пункт "Вихідний код" (Opera), або "Вихідний код сторінки" (Firefox), або "Перегляд коду сторінки" (Google Chrome), або "Перегляд HTML-коду» (IE). Фрагмент стильового оформлення, взятий з файлу purecssmenu.html, можна вставити, наприклад, у кінець вашого файлу style.css.
У згенерованого в онлайн сервісі меню, що випадає, за умовчанням була біла рамка, яка не дуже добре виглядала у мене на блозі і так само я трохи змінив колір для того, щоб воно краще вписувалося в дизайн блогу. Для цього в першому блоці CSS властивостей я видалив кілька рядків і змінив код кольору в рядку з background-color.
Розмір і накреслення шрифту ви можете підкоригувати в рядках, що починаються з font. Подивитися значення основних властивостей, що використовуються в таблицях каскадних стилів, можна в рубриці Уроки CSS.
Вставка Html тегів меню, що випадає, в потрібне місце шаблону сайту
Я вставляв цей шматок у файл /wp-content/themes/поточна-тема-оформлення/header.php , в те місце, де я вже мав код верхнього, але не випадаючого меню, що йде за замовчуванням у моїй темі оформлення для WordPress:
Я замінив його, відповідно, на код із файлу purecssmenu.html :
Якщо у вас сайт на Joomla, ви можете вставити це меню в будь-яке місце вашого шаблону, призначене для вставки модуля. Вам потрібно буде зайти в адмінку Джумли і вибрати з верхнього рядка "Розширення" - "Менеджер модулів".