Доброго времени суток 🙂
Сьогодні поділюся з Вами одним із способів, як зробити адаптивне меню на сайті. Дане меню можна організувати для адаптивного сайту. Наприклад щоб воно з'являлося при певному розмірі екрану. У цій статті буде найпростіший приклад такого меню.
Дане меню я застосував і на своєму сайті і воно з'являється на мобільних пристроях, замість звичайного меню яке розташоване в шапці. Таке меню зручно використовувати на мобільних пристроях, тобто не потрібно напружуватися щоб потрапити по пунктам. Все працює від натискання, адже на мобільних пристроях немає наведення мишею.
У прикладі я покажу як приблизно буде виглядати меню, відображатися воно буде постійно, але потім я покажу як показувати його тільки на мобільних пристроях. Що ж, не будемо затягувати, приступимо до інструкції.
Наше меню буде використовувати jQuery тому на самому початку потрібно переконатися в тому що на сайті підключена ця бібліотека. Швидше за все, якщо Ви використовуєте якусь систему, то це вже зроблено, але все ж відкривши вихідний код сторінки подивіться чи є там рядок, яка схожа на таку:
Якщо такого рядка немає, то можете поки пропустити цей крок, але якщо у Вас в кінці меню не запрацює, додайте цей рядок шапку або підвал перед скриптом меню.
Для роботи нашого майбутнього меню, знадобиться невеликий скрипт, який можна підключити або у вигляді окремого файлу або просто як код. Якщо Ви підключаєте окремий файл то створіть його, наприклад script.js і всередину нього додайте код. Після підключіть його вказавши правильно шлях. Наприклад якщо він лежить в папці js, яка поруч з файлами шапки і підвалу, шлях буде таким - js / script.js
Якщо хочете вставити код просто в тіло сайту то укладіть його в теги:
Ну і нарешті то сам код:
Ця найпростіша функція зачіпає 2 блоки. Назва меню і тіло самого меню. Якщо захочете змінити імена класів, то слід їх змінювати і в скрипті.
Тепер додамо HTML код меню. Виглядати він буде приблизно так;
Розберемо код по порядку. Все меню укладено в загальний контейнер з ID - adapt. Далі виводимо блок з назвою нашого меню, який має клас - menu-title. Даний блок видно завжди, ну або при певному вирішенні, тут як Ви вкажете. Він виводить іконку і назва Меню. У нас це просто - МЕНЮ.
Далі вже йде блок з самим меню і має він клас - menu-body. Усередині цього блоку можете розмістити будь-яке меню, все що хочете. У нашому випадки, для прикладу я просто вивів звичайний ul-список.
Як згадав вище якщо захочете перейменувати класи, то робіть це і в скрипті вище.
Останнім штрихом у запуску меню - буде додавання стилів. Додати їх можна в будь-яке місце Вашого файлу стилів, який може називатися, наприклад - style.css.
У вигляді іконки з трьох смужок використовується просто картинка, її назва menu.png. Вкажіть правильний шлях, якщо картинка лежить в якійсь папці або окремо від файлу стилів. Можете скачати її, зберігши собі на комп'ютер. Зробити це можна правою кнопкою миші, натиснувши на неї і вибравши пункт - "Зберегти зображення". Так само ви можете додати свою картинку назвавши її menu.png або зовсім замість картинки використовувати іконку з шрифту. Як це зробити, можете прочитати в статті - Ікони з шрифту Font Awesome
Меню повинно працювати і відображатися постійно. Якщо це Вам і потрібно то це все. Щоб налаштувати його поява лише для мобільних пристроїв, то потрібно внести деякі зміни в CSS стилі.
Блоку з айди - adapt, потрібно додати властивість - display: none; Після цього меню зникне, щоб воно з'являлося при малому розмірі потрібно додати такі рядки до наших стилям.
Дані стилі вказують, що якщо дозвіл одно 480 пікселям і менше, показувати наше меню. Дозвіл можете змінювати під себе і вказувати що хочете. Якщо Ви виводите дане меню замість якогось іншого, яке відображається в звичайних обсягах сайту, як це роблю я у себе на сайті, то Вам потрібно додати схожі стилі і своєму меню, але навпаки.
Вийде що спочатку у Вашого звичайного меню властивість - display: block; а вже при 480 (або як ви задасте) пікселях навпаки вказати - display: none; Тобто при появі адаптивного меню, звичайне зникне.
Наприклад в звичайного меню айди - #menu. Тоді приблизні стилі будуть такими:
Думаю тут все зрозуміло. Зробивши все правильно, Ви отримаєте бажаний результат. Ви можете все підігнати під свої потреби і налаштувати ідеальне адаптивне меню для свого сайту. Я часто використовую цей спосіб і він мене ніколи не підводив.
На цьому все, спасибі за увагу. 🙂
Якщо Вам був корисним моя праця, можете підтримати сайт :)
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце