Адаптивна навігація для меню

Відео: Адаптивна верстка # 4 | адаптивне меню

Відео: Уроки по Zurb Foundation # 3 Адаптивна навігація

Всім привіт!

Сьогодні хочу поділитися цікавим вирішенням для основного меню.Такой підхід може стати альтернативою стандартному випадає меню.Кроме того воно вже адаптивно.

дивитися прімерСкачать

Схожі статті на цю тему:

• Гарний випадає для сайту - робимо, що випадає
• Призначені для користувача стилі для форми на чистому CSS без javascript

Відео: Створюємо адаптивне меню

додаємо HTML

1234567891011121314151617181920212223

="Cd-main-nav-wrapper"gt;lt;ul class="Cd-main-nav"gt;lt;ligt; lt;a href="# 0"gt; Інформація про компаніюlt;/agt; lt;/ligt;lt;ligt; lt;a href="# 0"gt; Проектиlt;/agt; lt;/ligt;lt;ligt; lt;a href="# 0"gt; Блогlt;/agt; lt;/ligt;lt;ligt; lt;a href="# 0"gt; Контактиlt;/agt; lt;/ligt;lt;ligt;lt;a href="# 0" class="Cd-subnav-trigger"gt; lt;spangt; Категоріїlt;/spangt; lt;/agt;lt;ulgt;lt;li class="Go-back"gt; lt;a href="# 0"gt; Менюlt;/agt; lt;/ligt;lt;ligt; lt;a href="# 0"gt; Категорія 1lt;/agt; lt;/ligt;lt;ligt; lt;a href="# 0"gt; Категорія 2lt;/agt; lt;/ligt;lt;ligt; lt;a href="# 0"gt; Категорія 3lt;/agt; lt;/ligt;lt;ligt; lt;a href="# 0"gt; Категорія 4lt;/agt; lt;/ligt;lt;ligt; lt;a href="# 0"gt; Категорія 5lt;/agt; lt;/ligt;lt;ligt; lt;a href="# 0" class="Placeholder"gt; Placeholderlt;/agt; lt;/ligt;lt;/ulgt;lt;/ligt;lt;/ulgt; lt;/navgt; lt;a href="# 0" class="Cd-nav-trigger"gt; Menult;spangt; lt;/spangt; lt;/agt;lt;/headergt;

Вся навігації складається з двох неупорядкованих списків. Назви розділів і категорій меню ви, відповідно, міняєте на свої.

1

lt;a href="# 0" class="Cd-nav-trigger"gt; Menult;spangt; lt;/spangt; lt;/agt;

Останній рядок відповідає за навігацію при маленькому дозволі екрану.

додаємо CSS

Архів з прикладом містить файл style.css.
У ньому в розділі «Стилі для меню» знаходяться всі стилі оформлення меню в тому числі і медіазапроси.
Ви можете завантажити весь файл, або додати стилі тільки для самого меню. Якщо ви, завантажили в свій проект весь style.css, то не забудьте підключити його до свого html файл між тегами .

1

lt;link rel="Stylesheet" href="Css / style.css"gt;

додаємо JQuery

З архіву копіюємо папку js. І підключаємо скрипти в наш html документ.

123

lt;script src="Js / modernizr.js"gt; lt;/scriptgt;lt;script src="Js / jquery-2.1.1.js"gt; lt;/scriptgt;lt;script src="Js / main.js"gt; lt;/scriptgt;

Відео: Адаптивна верстка сайта.Часть 1. Шапка і навігація

Якщо у вашому проекті вже є modernizr.js і jquery-2.1.1.js, то другий раз підключати їх не потрібно. Меню готово!

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

Всім удачі!

джерело: оригінал

З повагою, Міхальов Валентин