Заметки
программиста
 
Популярные статьи
 
Полезные ссылки

Меню pushy

27.09.2019

Pushy - это адаптивное меню для навигации по вашему сайту.

Особенности Pushy

  • Использует CSS
  • Плавная работа на мобильных устройствах
  • Откат анимации jQuery для IE 7 - 9
  • Меню закрывается при выборе ссылки
  • Меню закрывается, когда выбран site-overlay сайта
  • Авторазборное подменю
  • Левая или правая позиция меню

Требования Pushy

  • jQuery 1.12+

Установка Pushy

  • Подключите соответствующие библиотеки на вашу страницу

      <link rel="stylesheet" href="css/pushy.css">
      <script src="js/pushy.min.js"></script>
    

    Скачать архив

    Подключение pushy.min.js работает в подвале страницы.

    При подключении скрипта в Битрикс-1С методом

     <?$APPLICATION->AddHeadScript( SITE_TEMPLATE_PATH.'/js/jquery-1.10.1.min.js');?>  
    
    Столкнулся с тем, что скрипт не работал, хотя он был подключен в подвале страницы. Это было связано с тем, что в административной панеле битрикса в настройках было указано объединять js и css, следовательно подключенный скрипт попадал в <head>. Тут у вас два выхода, это менять настройки сайта или поключать pushy.min.js в конце страницы, но уже другим способом.

      <script src="js/pushy.min.js"></script>
    

    В этом Случаи подключенная библиотека останется в нужнем месте

  • Вставить следующий html код

           
    <!-- Pushy Menu -->
    <nav class="pushy pushy-left">
        <div class="pushy-content">
            <ul>
                <!-- Submenu -->
                <li class="pushy-submenu">
                    <button>Submenu</button>
                    <ul>
                        <li class="pushy-link"><a href="#">Item 1</a></li>
                        <li class="pushy-link"><a href="#">Item 2</a></li>
                        <li class="pushy-link"><a href="#">Item 3</a></li>
                    </ul>
                </li>
                <li class="pushy-link"><a href="#">Item 1</a></li>
                <li class="pushy-link"><a href="#">Item 2</a></li>
            </ul>
        </div>
    </nav>
    
    <!-- Site Overlay -->
    <div class="site-overlay"></div>
    
    <!-- Your Content -->
    <div id="container">
        <!-- Menu Button -->
        <button class="menu-btn">☰ Menu</button>
    </div>        
    

Источник материала

 
Об этом блоге

Данный блог создан исключительно для записей своих заметок, скриптов и не претендует на звание "самого лучшего" сайта в интернете