Създайте отзивчиво меню с приставка Responsive-Nav.js

Има няколко начина за създаване на навигационни менюта с отзивчива функция, тоест, която отговаря с всички устройства, на които уебсайтът може да се разглежда.
Но проблемът е, че много от тези форми не са напълно съвместими с някои браузъри, ако CSS3 се използва за тази задача.
Благодарение на Javascript можем да направим този тип ефекти и анимации много по -съвместими с браузърите и по този начин да им предоставим необходимата подкрепа.
В този урок ще видим как да направим напълно отзивчива лента за навигация с помощта на приставката Javascript Responsive Nav.
Този плъгин е с отворен код и можем да го използваме във всеки проект, той идва със своя стилов лист, за да може да го персонализира и е напълно зависим от други библиотеки на Javascript, като jQuery.
В HTML ще трябва само да създадем списък, за да използваме менюто и да му дадем идентификатор, за да можем да го изберем чрез скрипта, който се изисква от приставката.
Ние също така свързваме приставката Responsive Nav и я свързваме с документа, това може да бъде изтеглено от официалната му страница или директно в Github, можем да изтеглим само .js файла или ако искате можете да изтеглите целия .zip файл, за това урок Ще използвам само файла responsive-nav.min.js.
Създаваме демонстрационен уебсайт, който наричаме responsive.html

 Отзивчива навигация

Старт
относно
Услуги
Блог
Контакт

Lorem ipsum болка седи amet, посветен adipiscing.

Бъдете egestas, ante et vulputate volutpat

След това ще добавим css във файл styles.css със следния код

 тяло {марж: 0; подложка: 0; фон: # 3d3d3d; семейство шрифтове: Arial, sans-serif; } img {max-width: 100%; } #content {background-color: # E6E6FA; марж: 20px автоматично 0; подплата: 20px; ширина: 80%; } #nav {background-color: # 4C76AE; } #nav ul {margin: 0; подложка: 0; ширина: 100%; дисплей: блок; списък-стил: няма; } #nav ul li {ширина: 100%; дисплей: блок; списък-стил: няма; } #nav ul li a {display: block; подложка: 10px 9px; ширина: 100%; размер на шрифта: 1.1em; тегло на шрифта: нормално; фон: # 4c76ae; цвят: # cad7ea; декорация на текст: няма; } #nav ul li a: hover {background: # 00567f; } .js #nav {clip: rect (0 0 0 0); max-височина: 0; позиция: абсолютна; дисплей: блок; преливане: скрито; увеличение: 1; } # nav.opened {max-height: 9999px; } # nav-toggle {font-size: 1.2em; тегло на шрифта: удебелен; подложка: 3px 9px; марж-ляво: 15px; декорация на текст: няма; рамка-радиус: 3px; цвят: #fefefe; фон: # 4c7ab6; margin-bottom: 15px; }

До тук ще бъде общата таблица със стилове, сега ще създадем таблица със стилове, която ще адаптира менюто, ако екранът е намален до 640px или по -малко, за това ние прилагаме някои стилове в свойството Media Queries на css3, които ще бъдат приложени на устройства с минимална разделителна способност при 640px. Ако разделителната способност е по -висока, ще се използва дефинираният общ css.

 @media screen и (min-width: 640px) {.js #nav {position: relative; } .js # nav.closed {max-height: none; } # nav-toggle {display: none; } #nav ul li a {border-right: 1px solid # 5E88BF; дисплей: блок; поплавък: ляво; ширина: авто; фон: няма; подложка: 11px 15px; тегло на шрифта: нормално; декорация на текст: няма; цвят: # E6E6FA; } #nav ul li a: hover {background: # 00567f; цвят: # cad7ea; } h1 {цвят: # 90b9a0; размер на шрифта: 2.5em; подравняване на текст: център; }}

Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка