Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Многоуровневая боковая навигация для мобильных устройств - jQuery zeynepjs
Дата добавления: 27.09.2020 - 19:02
Категория: Хаки / Дополнения, Переключатели / Навигация
Добавил: Buger
Количество просмотров: 630
Количество комментариев: 0
Размер файла: 73.1 Kb
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Плагин jQuery zeynepjs позволяет создавать многоуровневые push-меню вне холста из вложенных списков HTML для вашего мобильного веб-приложения.
Система навигации позволяет пользователю перемещаться между подменю, нажимая кнопку возврата в меню, как и в раскрывающемся меню.
Основное содержимое будет сдвинуто вправо при переключении навигации, чтобы обеспечить лучший пользовательский интерфейс.
1. Создайте вложенные списки HTML для системы навигации.
2. Создайте кнопку для переключения навигации.
3. Создайте HTML-код для наложения фона.
4. Вставьте в документ необходимые файлы JavaScript и CSS.
5. Инициализируйте плагин jQuery zeynepjs.
6. Закройте панель навигации, щелкнув наложение фона.
7. Включите кнопку для переключения навигации.
Система навигации позволяет пользователю перемещаться между подменю, нажимая кнопку возврата в меню, как и в раскрывающемся меню.
Основное содержимое будет сдвинуто вправо при переключении навигации, чтобы обеспечить лучший пользовательский интерфейс.
Как это использовать:
1. Создайте вложенные списки HTML для системы навигации.
Код
<div class="zeynep">
<ul>
<li>
<a href="#">Home</a>
</li>
<li class="has-submenu">
<a href="#" data-submenu="stores">Stores</a>
<div id="stores" class="submenu">
<div class="submenu-header" data-submenu-close="stores">
<a href="#">Main</a>
</div>
<label>Stores</label>
<ul>
<li>
<a href="#">Istanbul</a>
</li>
<li>
<a href="#">Mardin</a>
</li>
<li>
<a href="#">Amed</a>
</li>
</ul>
</div>
</li>
<li class="has-submenu">
<a href="#" data-submenu="categories">Categories</a>
<div id="categories" class="submenu">
<div class="submenu-header" data-submenu-close="categories">
<a href="#">Main Menu</a>
</div>
<label>Categories</label>
<ul>
<li class="has-submenu">
<a href="#" data-submenu="electronics">Electronics</a>
<div id="electronics" class="submenu">
<div class="submenu-header" data-submenu-close="electronics">
<a href="#">Categories</a>
</div>
<label>Electronics</label>
<ul>
<li>
<a href="#">Camera & Photo</a>
</li>
<li>
<a href="#">Home Audio</a>
</li>
<li>
<a href="#">Tv & Video</a>
</li>
<li>
<a href="#">Computers & Accessories</a>
</li>
<li>
<a href="#">Car & Vehicle Electronics</a>
</li>
<li>
<a href="#">Portable Audio & Video</a>
</li>
<li>
<a href="#">Headphones</a>
</li>
<li>
<a href="#">Accessories & Supplies</a>
</li>
<li>
<a href="#">Video Projectors</a>
</li>
<li>
<a href="#">Office Electronics</a>
</li>
<li>
<a href="#">Wearable Technology</a>
</li>
<li>
<a href="#">Service Plans</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Books</a>
</li>
<li>
<a href="#">Video Games</a>
</li>
<li>
<a href="#">Computers</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</div>
<ul>
<li>
<a href="#">Home</a>
</li>
<li class="has-submenu">
<a href="#" data-submenu="stores">Stores</a>
<div id="stores" class="submenu">
<div class="submenu-header" data-submenu-close="stores">
<a href="#">Main</a>
</div>
<label>Stores</label>
<ul>
<li>
<a href="#">Istanbul</a>
</li>
<li>
<a href="#">Mardin</a>
</li>
<li>
<a href="#">Amed</a>
</li>
</ul>
</div>
</li>
<li class="has-submenu">
<a href="#" data-submenu="categories">Categories</a>
<div id="categories" class="submenu">
<div class="submenu-header" data-submenu-close="categories">
<a href="#">Main Menu</a>
</div>
<label>Categories</label>
<ul>
<li class="has-submenu">
<a href="#" data-submenu="electronics">Electronics</a>
<div id="electronics" class="submenu">
<div class="submenu-header" data-submenu-close="electronics">
<a href="#">Categories</a>
</div>
<label>Electronics</label>
<ul>
<li>
<a href="#">Camera & Photo</a>
</li>
<li>
<a href="#">Home Audio</a>
</li>
<li>
<a href="#">Tv & Video</a>
</li>
<li>
<a href="#">Computers & Accessories</a>
</li>
<li>
<a href="#">Car & Vehicle Electronics</a>
</li>
<li>
<a href="#">Portable Audio & Video</a>
</li>
<li>
<a href="#">Headphones</a>
</li>
<li>
<a href="#">Accessories & Supplies</a>
</li>
<li>
<a href="#">Video Projectors</a>
</li>
<li>
<a href="#">Office Electronics</a>
</li>
<li>
<a href="#">Wearable Technology</a>
</li>
<li>
<a href="#">Service Plans</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Books</a>
</li>
<li>
<a href="#">Video Games</a>
</li>
<li>
<a href="#">Computers</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
</div>
2. Создайте кнопку для переключения навигации.
Код
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-toggler-icon"></span>
</button>
3. Создайте HTML-код для наложения фона.
Код
<div class="zeynep-overlay"></div>
4. Вставьте в документ необходимые файлы JavaScript и CSS.
Код
<link href="./css/custom.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./dist/jquery.zeynep.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./dist/jquery.zeynep.min.js"></script>
5. Инициализируйте плагин jQuery zeynepjs.
Код
var zeynep = $('.zeynep').zeynep({
onClosed: function () {
// enable main wrapper element clicks on any its children element
$("body main").attr("style", "");
console.log('the is closed.');
},
onOpened: function () {
// отключить щелчки основного элемента оболочки на любом его дочернем элементе
$("body main").attr("style", "pointer-events: none;");
console.log('the side menu is opened.');
}
});
onClosed: function () {
// enable main wrapper element clicks on any its children element
$("body main").attr("style", "");
console.log('the is closed.');
},
onOpened: function () {
// отключить щелчки основного элемента оболочки на любом его дочернем элементе
$("body main").attr("style", "pointer-events: none;");
console.log('the side menu is opened.');
}
});
6. Закройте панель навигации, щелкнув наложение фона.
Код
$(".zeynep-overlay").click(function () {
zeynep.close();
});
zeynep.close();
});
7. Включите кнопку для переключения навигации.
Код
$("nav .navbar-toggler").click(function () {
if ($("html").hasClass("zeynep-opened")) {
zeynep.close();
} else {
zeynep.open();
}
});
if ($("html").hasClass("zeynep-opened")) {
zeynep.close();
} else {
zeynep.open();
}
});
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: