Адаптивное меню для сайта - Меню - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Меню


Адаптивное меню незаменимо любому современному сайту, который следует тенденциям и развивает свой продукт. К сожалению, многие видят процесс создания мобильного меню очень сложным и прибегают к помощи специалистов. Специально для вас я подготовил отличное адаптивное меню, которое легко установить на сайт.

Адаптивное меню решает многие технические моменты даже при сложном многоуровневой навигации. Мобильное меню позволяет упростить навигацию на сайте, даже если в ней 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>


Строка 2 — задаём мета-тег, обеспечивающий корректное отображение на 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, с которым создание адаптивного меню будет сплошное удовольствие!

Важно!

При копировании материала указывать ссылку на источник.

- 1423
- 05-Мая-2017
- 6
- 0
Материал разместил:

Похожий материал
Статьи сайта