Адаптивне меню без дублювання посилань за допомогою jQuery

Розглянемо робочий приклад використання адаптивного меню без дублювання посилань за допомогою jQuery.

Це рішення дуже корисне, оскільки дозволяє вирішити проблему дублювання посилань меню. Також не завжди можна реалізувати адаптивне меню за допомогою таблиць стилів для одного блоку списку.

Головна перевага даної реалізації полягає в тому, що немає необхідності переробляти шаблон, оскільки мобільне меню з'явиться в самому топі сторінки, а сам список буде засобами Jquery скопійований з існуючого десктопного меню. Даний спосіб дозволяє просто додати мобільне меню на свій сайт.

Допустимо, на сайті маємо наступний список меню:

<nav class="header-menu">
    <ul>
        <li><a href="/">Головна</a></li>
        <li><a href="/news">Новини</a></li>
        <li><a href="/contact">Контакти</a></li>
    </ul>
</nav>

Це меню відображається на десктопній версії, відповідно його необхідно сховати для мобільної версії. Для цього в таблиці стилів додаємо правило:

@media only screen and (max-width: 767px) {
 .header-menu{display: none}
}

Тепер, коли ширина екрана буде меншою за 767 пікселів, декстопне меню зникне з екрана.

Наступним кроком необхідно показати мобільне меню. Для цього після тега body відразу додаємо HTML код:

<div id="menu_navigazione_mobile">
    <a id="show_menu_ist" title="Меню" href="#">Меню</a>
    <div id="mobile-menu-wrapper">
        <div id="mobile-menu"></div>
    </div>
</div>

Після підключення бібліотеки jQuery необхідно додати JS код:

<script>
$(function(){
    $("#show_menu_ist").click(function(e){
        e.preventDefault();
        $(this).toggleClass("active");
        $("#mobile-menu").html($(".header-menu").html());
        $("#mobile-menu-wrapper").toggle();
    });
});
</script>

Даний скрипт виконує дію по натисканні блоку з ID - show_menu_ist, і, відповідно, без перезавантаження сторінки, додає до блоку mobile-menu значення списку .header-menu і робить mobile-menu-wrapper видимим. При повторному натисканні блок ховається. Для візуалізації стилю меню необхідно додати до таблиці стилів кілька правил:

#menu_navigazione_mobile{display: none}
@media only screen and (max-width: 767px) {
 #menu_navigazione_mobile{position: relative; z-index: 2; display: block; height: 40px; border-bottom: solid 1px #DCDCDC}
 #menu_navigazione_mobile ul{margin: 0; padding: 0}
 #menu_navigazione_mobile li{list-style-type: none}
 #menu_navigazione_mobile li a{text-decoration: none; display: block; position: relative; color: #676666; border-bottom: solid 1px #E5E5E5; padding: 8px 30px 8px 10px}
 #menu_navigazione_mobile li:last-child a{border-bottom: none}
 #menu_navigazione_mobile li a:hover{text-decoration: underline}
 #show_menu_ist{display: block; float: left; padding: 12px 15px}
 #mobile-menu-wrapper{display: none; position: absolute; top: 40px; left: 0; z-index: 2; width: 100%; background-color: #F2F2F2}
}