<head>
<link href="https://superzombi.github.io/SwipeMenu_JS/swipe_menu.css" rel="stylesheet">
<script src="https://superzombi.github.io/SwipeMenu_JS/swipe_menu.js"></script>
</head>
<div class="swipe-menu">
</div>
<div class="swipe-menu">
<div class="back_button">
Back
</div>
</div>
4) Create ul
with main menu
. You can also create a menu title
inside of it and provide links to submenu
.
<div class="swipe-menu">
<div class="back_button">Back</div>
<ul class="menu">
<li class="menu_title">
Menu
</li>
<li submenu="language">
Language
</li>
<li submenu="theme">
Theme
</li>
</ul>
</div>
<div class="swipe-menu">
...
<ul class="submenu" name="theme">
<li class="menu_title">
Theme:
</li>
<li value="light">
Light
</li>
<li value="dark">
Dark
</li>
</ul>
</div>
var myMenu = document.getElementById("myMenu")
swipeMenu(myMenu)
If you want the menu to be swiped from the right, specify this.
var myMenu = document.getElementById("myMenu")
swipeMenu(myMenu, 'right')
myMenu.init('language', 'en')
You can also track the value change and call the callback.
myMenu.init('theme', 'dark', onchange=(target, old_element)=>{
document.body.classList.remove(old_element.getAttribute("value"))
document.body.classList.add(target.getAttribute("value"))
})
myMenu.update('language', 'ru')
myMenu.exitAllSubMenus()
<li href="#account">
Account
</li>
You can also add target="_blank"
.
<li name="account">
Account
</li>
<div class="swipe-menu space-between">
</div>
Donatello | |
Donation Alerts |
(But now it's better to email me and I'll send you the details)