Адаптивное меню незаменимо любому современному сайту, который следует тенденциям и развивает свой продукт. К сожалению, многие видят процесс создания мобильного меню очень сложным и прибегают к помощи специалистов. Специально для вас я подготовил отличное адаптивное меню, которое легко установить на сайт.
Адаптивное меню решает многие технические моменты даже при сложном многоуровневой навигации. Мобильное меню позволяет упростить навигацию на сайте, даже если в ней
3-4 уровня. При том вся необходимая информация будет находится в пределах
2 кликов — никаких горизонтальных прокруток. Именно этот вариант повышает юзабилити в разы, обеспечив пользователю удобную навигацию.
Однако, как я уже говорил, у многих процесс создания мобильного меню связан с сложностями и продолжительной работой. Действительно, для создания качественного адаптивного меню следует приложить немало усилий. Но не стоит переживать, сегодня я расскажу как можно достаточно просто и быстро создать мобильное меню для своего сайта на готовом примере.
Для начала давайте посмотрим на
пример адаптивного меню:
Как создать адаптивное меню Первым делом рассмотрим структуру
HTML-файла, а в частности блок
head:
Код
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/modernizr.js"></script>
</head>
— задаём мета-тег, обеспечивающий корректное отображение на
Iphone. Я уже писал о нём в статье про мета-запросы.
Строка 3 — подключаем стили, позволяющие сделать сброс параметров, установленных браузером по умолчанию. Для тех, кто не знал — да, каждый браузер устанавливает свои параметры стилей по умолчанию.
Строка 4 — подключаем файл с правилами для нашего меню.
Строка 5 — подключаем
JS-файл, для корректной работы адаптивного меню.
Теперь рассмотрим структуру меню в
body:
Код
<body>
<header>
<nav class="cd-main-nav-wrapper">
<ul class="cd-main-nav">
<li><a href="#ankor">О нас</a></li>
<li><a href="#ankor">Каталог</a></li>
<li><a href="#ankor">Портфолио</a></li>
<li><a href="#ankor">Контакты</a></li>
<li>
<a href="#ankor" class="cd-subnav-trigger"><span>Список</span></a>
<ul>
<li class="go-back"><a href="#ankor">Меню</a></li>
<li><a href="#ankor">Пункт №1</a></li>
<li><a href="#ankor">Пункт №2</a></li>
<li><a href="#ankor">Пункт №3</a></li>
<li><a href="#ankor">Пункт №4</a></li>
<li><a href="#ankor">Пункт №5</a></li>
<li><a href="#ankor" class="placeholder">Placeholder</a></li>
</ul>
</li>
</ul> <!-- .cd-main-nav -->
</nav> <!-- .cd-main-nav-wrapper -->
<a href="#ankor" class="cd-nav-trigger">Menu<span></span></a>
</header>
</body>
Думаю, здесь нечего прокомментировать, за исключением строки
23 — в ней мы прописываем элемент навигации для мобильного меню.
После того, как мы составили структуру, необходимо добавить до закрывающего тега
/body ещё
2 JS-файла:
Код
<body>
...
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script>
</body>
Если
jQuery библиотека у вас уже была подключена ранее, то нет смысла делать это ещё раз.
Итого
После небольших изменений в коде «
под себя» мы получаем отличное адаптивное меню, в котором содержится 2 типа навигации:
стандартная;
мобильная.
Адаптивное меню обеспечит удобство навигации по сайту и его непременно оценят посетители вашего ресурса. К тому же, это отличное дополнение в создании качественного адаптивного сайта, в котором все элементы должны быть на своих местах.
Немного позже я расскажу об интересном плагине для WordPress, с которым создание адаптивного меню будет сплошное удовольствие!
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
