Мобильное меню

Скачать CSS фрагмент компонента Скачать JS фрагмент компонента

Примеры

Открыть меню слева

<button class="button" onclick="$('#left_menu').AverinSwipeMenu('open');">Открыть меню слева</button>

<div id="left_menu" class="swipe_menu">...</div> 

Открыть меню справа

<button class="button" onclick="$('#right_menu').AverinSwipeMenu('open',{ 'id' : 'right_menu', 'side' : 'right' });">Открыть меню справа</button>

<div id="right_menu" class="swipe_menu">...</div> 

Вызов, события и свойства

Вызов меню

$('#right_menu').AverinSwipeMenu(); 

События

open - Открытие меню. Стандартное свойство вызова

<button class="button" onclick="$('#left_menu').AverinSwipeMenu();">Меню слева</button> 

или

<button class="button" onclick="$('#left_menu').AverinSwipeMenu('open');">Меню слева</button> 

close - Закрытие меню

$('.swipemenu_overlay').AverinSwipeMenu('close'); 

Свойства

id - ID блока меню имеющего класс .swipe_menu

<div id="left_menu" class="swipe_menu">...</div> 

Стиль класса .swipe_menu

.swipe_menu {
    display: none; 
    position: fixed; 
    overflow-y: auto;
    z-index: 200; 
    height: 100%; 
    width: 250px; 
    padding: 1em 1.5em;
    background: #111;
    font-size: .9375em;
    color: #fff;
} 

side - Сторона открытия меню. Стандартное свойство установлено на значение "left", то есть открытие слева. Варианты left/right

<button class="button" onclick="$('#left_menu').AverinSwipeMenu('open');">Открыть меню слева</button> 

или

<button class="button" onclick="$('#left_menu').AverinSwipeMenu('open',{ 'side' : 'left' });">Открыть меню слева</button> 

или

<button class="button" onclick="$('#right_menu').AverinSwipeMenu('open',{ 'side' : 'right' });">Открыть меню справа</button> 

Сборка

<script src="averin.framework.js"></script>

<style>
.swipe_menu {
    display: none; 
    position: fixed; 
    overflow-y: auto;
    z-index: 200; 
    height: 100%; 
    width: 250px; 
    padding: 1em 1.5em;
    overlay-color: #111;
    font-size: .9375em;
    color: #fff;
}
.swipe_menu_overlay { 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 100; 
    position: fixed; 
}
</style>

<button class="button" onclick="$('#left_menu').AverinSwipeMenu('open');">Открыть меню слева</button>

<div id="left_menu" class="swipe_menu">
    Содержимое блока меню
</div>