Верстаємо сайт самі

228
  • Меню для сайту CSS в онлайн сервісі
  • Створення горизонтального або вертикального меню
  • Вставка створеного меню в шаблон сайту
  • Переносимо стилі оформлення меню на свій сайт
  • Вставка Html тегів випадного меню шаблон
  • Вітаю вас, шановні читачі блогу . У цій статті я хочу розповісти про досить простому і необременительном способі створення горизонтальних і вертикальних випадаючих меню CSS без використання технології JavaScript.

    З моєї точки зору такий спосіб краще, оскільки у деяких користувачів в браузері може бути відключена підтримка JavaScript і, отже, меню на його основі відображатися не буде. Хоча, звичайно ж, зустрічається така ситуація досить рідко, але тим не менш варіант на чистому CSS буде більш універсальним.

    Верстаємо сайт самі

    Для створення випадаючого меню для сайту ми скористаємося послугами онлайн сервісу PureCSSMenu. Наші дії зведуться до вибору і налаштування його зовнішнього вигляду (з допомогою візуального редактора), створення структури, найменування його пунктів і прив’язки до них адрес сторінок свого сайту, на які повинні будуть ввести ці пункти.

    Після цих нехитрих операцій нам залишиться лише завантажити згенерований код, а потім вставити його у відповідні файли шаблону свого сайту. Але про все по порядку.

    Меню для сайту CSS в онлайн сервісі

    Зайшовши на онлайн сервіс PureCSSMenu потрібно буде в першу чергу визначитися з шаблоном. Вам пропонується вибір з п’яти горизонтальних і трьох вертикальних шаблонів. Для вибору ви повинні перейти на сторінку шаблонів, натиснувши на вкладку «Templates» в лівій колонці вікна майстра:

    Верстаємо сайт саміВерстаємо сайт самі

    Клацніть по будь-якому з шаблонів і ви побачите в області «Preview», як буде виглядати меню, створене на його основі з використанням лише одного CSS (каскадних таблиць стилів).

    Подивіться як воно працюють і прикиньте, який шаблон, на ваш погляд, найкращим чином підійде до дизайну вашого сайту. Врахуйте, що колірне оформлення, а так само розмір, тип і накреслення шрифту можна буде поміняти на вкладці «Parameters»:

    Верстаємо сайт саміВерстаємо сайт самі

    Потрібний колір для шрифту та фону ви можете ввести безпосередньо у вигляді Html-коду кольору ( читайте про палітри кольорів і їх код, де, наприклад, FFFFFF означає білий) або вибрати з випадає палітри при клацанні по прямокутника з налаштованим кольором.

    Отже, ви вибрали найбільш відповідний вам шаблон для майбутнього шедевра навігації, налаштували його колірне оформлення і вибрали потрібний тип, розмір та накреслення шрифту. Деякі нюанси відображення ви зможете поміняти вже безпосередньо в коді випадаючого меню (властивості CSS), який скачаєте після завершення роботи майстра.

    Створення горизонтального або вертикального меню

    Тепер можна переходити до створення структури, перейшовши на вкладку Items». У вікні майстра вам представиться можливість:

  • створювати нові пункти (як вкладені, так і не вкладені)
  • видаляти вже існуючі пункти випадаючого меню
  • видалити всі пункти одночасно (очищення)
  • визначити напис для кожного пункту
  • повісити посилання на кожен пункт
  • прописати для цього посилання атрибут Title (може стане в нагоді, якщо в якості анкора використовується зображення)
  • налаштувати спосіб відкриття сторінки при переході по даному пункту (в цьому ж вікні або в новому вікні браузера)
  • Верстаємо сайт саміВерстаємо сайт самі

    Для того, щоб видалити всі демонстраційні пункти меню, ви можете натиснути на кнопку під назвою «Clear» із зображенням сміттєвого бака.

    Верстаємо сайт саміВерстаємо сайт самі

    Для створення нового пункту служить кнопка «Add Item» з зображення великого плюса. У цьому випадку новий пункт випадаючого меню буде доданий в самий кінець списку вже наявних. Якщо ви натиснете на цю кнопку під назвою «Add Next Item», то новий пункт буде додано відразу після виділеного в поточний момент.

    Для додавання вкладеного пункту натисніть на кнопку під назвою «Add Subitem», при цьому повинен бути обраний у вікні майстра той пункт меню, в якому ви хочете створити вкладений. Ну, а кнопка під назвою «Remove Item» служить для видалення обраного в поточний момент.

    Для кожного створеного пункту ви повинні заповнити поля в області «Item Parameters».

    Верстаємо сайт саміВерстаємо сайт самі

  • у полі «Text» повинні вписати текст
  • у полі «Link» повинні вписати Url сторінки, на яку має здійснитися перехід
  • у полі «Tip» можете, при бажанні, вказати вміст атрибута TITLE тега посилання A . Вміст тега TITLE буде видно, якщо підвести покажчик миші до посилання
  • у полі «Target» з випадаючого списку ви можете вибрати спосіб відкриття сторінки, посилання на яку ви прописали для даного пункту горизонтального або вертикального меню. Якщо ви залишите значення за замовчуванням «_self», то при його виборі відвідувачем вашого сайту, сторінка відкриється у цьому ж вікні браузера. Якщо ви хочете, щоб сторінка відкривалася в новому вікні браузера, то потрібно буде вибрати з випадаючого списку варіант «_blank»
  • Вставка створеного меню в шаблон сайту

    Після того, як ви на онлайн сервісі PureCSSMenu повністю зробите меню з випадаючими фрагментами (за бажанням) і пропишіть значення для всіх його пунктів, вам потрібно буде натиснути на велику кнопку «Download» у нижньому правому куті сторінки, для того, щоб завантажити його код.

    Відкриється діалог завантаження, в якому ви повинні будете вибрати на своєму комп’ютері місце для збереження файлу архіву purecssmenu-com.zip. Після скачування коду горизонтального або вертикального меню розпакуйте це архів.

    Всередині буде папка images з картинками, які використовуються у вибраному вами шаблоні. А так само там буде лежати файл purecssmenu.html, в якому міститься код з описом стилів (його потрібно буде скопіювати в файл CSS використовуваного вами шаблон оформлення для вашого сайту) і код HTML з описом пунктів створеного меню, який потрібно буде вставити в потрібне місце файлу шаблону вашого ресурсу.

    Я пробував вставляти горизонтальне випадаюче меню на даний блог (https://), який працює на WordPress, але воно буде прекрасно працювати і на будь-якому іншому інтернет-проекті. Потрібно тільки правильно вибрати місце для вставки і прописати код стилів у файлі CCS використовуваного вами шаблона оформлення. Розповім на прикладі структури теми оформлення WordPress (читайте про теми та шаблони движка Вордпресс).

    Переносимо стилі оформлення меню на свій сайт

    Відкрийте файл з кодом purecssmenu.html та скопіюйте код CSS стилів, який укладено між Html-тегами Style, при цьому самі відкриваючий і закриваючий Html теги Style (тут про них і таблиці каскадних стилів читайте докладніше) копіювати не треба.

    CSS властивості c онлайн сервісу PureCSSMenu

    Вставте цей фрагмент у файл 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 тегів випадаючого меню в потрібне місце шаблону сайту

    Далі вам потрібно буде скопіювати з того ж файлу purecssmenu.html Html-код вставки в шаблон сайту. Даний фрагмент знаходиться в нижній частині файлу purecssmenu.html і укладений між коментарями:

    Сам фрагмент Html

    Я вставляв цей шматок в файл /wp-content/themes/текущая-тема-оформления/header.php в те місце, де у мене вже був код верхнього, але не випадаючого меню, що йде за замовчуванням в моїй темі оформлення для WordPress:

    Я замінив його, відповідно, на код з файлу purecssmenu.html:

    Верстаємо сайт саміВерстаємо сайт самі

    Якщо у вас сайт на Joomla, то ви можете вставити це меню в будь-яке місце вашого шаблону, призначене для вставки модуля. Вам потрібно буде зайти в адмінку Джумлы і вибрати з верхнього рядка «Розширення» — «Менеджер модулів».

    У верхньому правому куті відкритої сторінки натисніть на кнопку «Створити» і виберіть із запропонованих варіантів модулів «Довільний HTML-код». Вставити Html-фрагмент, створений на онлайн сервісі PureCSSMenu горизонтального або вертикального випадаючого меню для сайту, з файлу purecssmenu.html в область «Власний текст», а потім натисніть на кнопку «Зберегти» у верхньому правому куті вікна.

    Удачі вам! До зустрічей на сторінках блогу