👻 Sidebar inspired by Yalantis/Side-Menu.Android
<head>
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/sideside/dist/sideside.min.css">
</head>
<body>
<script src="https://unpkg.com/sideside"></script>
<script>
const sideside = SideSide.default
const Sidebar = sideside.Sidebar
const Item = sideside.Item
const sidebar = new Sidebar({
items: [
new Item({ icon: 'fas fa-tint' }),
new Item({ icon: 'fas fa-cube' }),
new Item({ icon: 'fas fa-leaf' }),
new Item({ icon: 'fas fa-paper-plane' }),
new Item({ icon: 'fas fa-rocket' })
]
})
</script>
</body>
Example: docs/index.js
Sidebar position (String):
'top'
|'right'
|'bottom'
|'left'
function setPosition(position) {
sidebar.position = position
console.log('Now position: ' + sidebar.position)
}
Sidebar visible (Boolean):
true
|false
, defaultfalse
function setVisible(visible) {
sidebar.visible = visible
console.log('Now visivle: ' + sidebar.visible)
}
If set
true
, sidebar will be close when click out of self, defaulttrue
If set
true
, sidebar will be close when click Item, defaultfalse
Custom a sidebar className
A item's font icon, now can use icons in https://fontawesome.com/
From now, not support img on item
Define a item click function
A true item dom element hook
MIT © g1eny0ung