ProfiPHPProfiPHP
Категория: jQuery

Плагин Superfish

Плагин Superfish позволяет использовать удобные многоуровневые раскрывающиеся меню. Полностью поддерживает сенсорные устройства и взаимодействие с клавиатурой.

Страница плагина - Superfish

После скачивания файлов плагина Superfish его необходимо подключить:
<script src="/js/superfish.min.js"></script>
Можно подключить и полную версию без приставки .min, которая позволит в читабельном виде просматривать и редактировать исходный код.

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

Также с помощью плагина Superfish можно создать красивое раскрывающее меню для мобильной версии сайта. Для этого необходимо выполнить следующий код:
jQuery(function( $ ) {
'use strict';
var $window = $( window );
var $body = $( 'body' );
var $mainNav = $( '.navigation_main' );
var $mobileToggle = $( '.mobile_toggle' );
if ( $window.width() > 1023 ) {
$mainNav.superfish({
delay: 300,
animation: { opacity: 'show', height: 'show' },
speed: 'fast',
dropShadows: false
});
}
$mobileToggle.click( function( e ) {
e.preventDefault();
$body.toggleClass( 'mobile_toggled_active' );
});
});
Также необходимо добавить нужные стили, например:
#mobileNav{ display: none; -webkit-text-size-adjust: 100%; position: relative; z-index: 99; top: 0; left: 0; overflow: auto; opacity: .99; background-color: rgba(38,146,194,0.8); color: #eaeff3; flex-direction: row; transform: translate3d(0, 0, 0) }
#mobileNav a{ text-decoration: none }
#mobileNav ul{ list-style-type: none; margin: 0; padding: 0; left: 0; right: 0 }
#mobileNav ul li{ border-bottom: 1px solid; position: relative; width: auto; float: none }
#mobileNav ul li a{ color: #eaeff3; padding: 0.75em 54px 0.8em 20px; text-decoration: none; display: block }
.mobile_toggle{ color: #ffffff; font-size: 20px; text-transform: uppercase; font-weight: bold; text-align: center; margin: 15px 0 0; display: none }
.mobile_toggle:hover,
.mobile_toggle:focus{ color: #ffffff }
.mobile_navicon{ display: inline-block; width: 24px; height: 19px }
.mobile_navicon b{ display: block; position: relative; width: 100%; height: 3px; top: 50%; margin-top: 0; background-color: #ffffff; transition: background-color .28s ease }
.mobile_navicon b::before,
.mobile_navicon b::after{ display: block; content: ''; width: 100%; height: inherit; position: absolute; bottom: 0; background-color: #ffffff; transition: all .35s ease }
.mobile_navicon b::before{ top: -7px }
.mobile_navicon b::after{ bottom: -7px }
.mobile_toggled_active .mobile_navicon b{ background-color: transparent }
.mobile_toggled_active .mobile_navicon b::before{ top: 0; transform: rotate(45deg) }
.mobile_toggled_active .mobile_navicon b::after{ bottom: 0; transform: rotate(-45deg) }
.sidebar_inner{ display: flex; flex-direction: column; justify-content: flex-start; flex: 1 1 auto }
@media (max-width: 1023px){
#mobileNav{ min-height: 0; padding: 5px 0 15px 0 }
.mobile_toggle{ display: block }
.sidebar_inner{ max-height: 0; overflow: hidden; transition: max-height .25s ease }
.mobile_toggled_active .sidebar_inner{ max-height: 2999px }
}
Код HTML при данной реализации выглядит следующим образом:
<div id="mobileNav">
<a href="/" class="mobile_toggle">
<span class="mobile_navicon"><b></b></span> <span>Меню</span>
</a>
<div class="sidebar_inner">
<nav>
<ul class="navigation_main">
<li><a href="/">Главная</a></li>
...
<li><a href="/contact.html">Контакты</a></li>
</ul>
</nav>
</div>
</div>

Добавить комментарий

Имя:
Текст комментария: