Mobile Menu Codes
Here are some codes for Mobile Menu.
Description | Code |
|---|---|
submenu example (right menu) | app.set({
'navigationItems.4.submenu': {
startOpen: true,
items: [
{
label: 'Hi',
icon: 'icon-heart',
action: 'alert("hi")',
tooltip: "adfadfadf"
},
{
icon: 'icon-document-edit',
label: 'Edit',
tooltip: "Hi i am tooltip"
},
{
label: 'Delete',
style: 'background: red',
icon: 'icon-cross',
}
]
},
'navigationItems.8.submenu': {
items: [
{
label: 'Dynamically',
icon: 'icon-export'
},
{
label: 'Sized'
},
]
}
}); |
Hover with colors | .glow-fin {
box-shadow: 0 0 1em #3488b2, 0 0 0.2em #3488b2;
}
.glow-hover-fin {
transition: box-shadow 0.3s ease;
}
.glow-hover-fin:hover {
box-shadow: 0 0 1em #3488b2, 0 0 0.2em #3488b2 !important;
}
.glow-ok {
box-shadow: 0 0 1em #5cb85c, 0 0 0.2em #5cb85c;
}
.glow-hover-ok {
transition: box-shadow 0.3s ease;
}
.glow-hover-ok:hover {
box-shadow: 0 0 1em #5cb85c, 0 0 0.2em #5cb85c !important;
}
.glow-overriden {
box-shadow: 0 0 1em #c241ff, 0 0 0.2em #c241ff;
}
.glow-hover-overriden {
transition: box-shadow 0.3s ease;
}
.glow-hover-overriden:hover {
box-shadow: 0 0 1em #c241ff, 0 0 0.2em #c241ff !important;
}
.glow-unacked {
box-shadow: 0 0 1em #b0b0b0, 0 0 0.2em #b0b0b0;
}
.glow-hover-unacked {
transition: box-shadow 0.3s ease;
}
.glow-hover-unacked:hover {
box-shadow: 0 0 1em #b0b0b0, 0 0 0.2em #b0b0b0 !important;
}
.glow-alarm {
box-shadow: 0 0 1em #d40000, 0 0 0.2em #d40000;
}
.glow-hover-alarm {
transition: box-shadow 0.3s ease;
}
.glow-hover-alarm:hover {
box-shadow: 0 0 1em #d40000, 0 0 0.2em #d40000 !important;
}
.glow-fault {
box-shadow: 0 0 1em #e79621, 0 0 0.2em #e79621;
}
.glow-hover-fault {
transition: box-shadow 0.3s ease;
}
.glow-hover-fault:hover {
box-shadow: 0 0 1em #e79621, 0 0 0.2em #e79621 !important;
}
.glow-stale {
box-shadow: 0 0 1em #d0d0d0, 0 0 0.2em #d0d0d0;
}
.glow-hover-stale {
transition: box-shadow 0.3s ease;
}
.glow-hover-stale:hover {
box-shadow: 0 0 1em #d0d0d0, 0 0 0.2em #d0d0d0 !important;
}
.glow-down {
box-shadow: 0 0 1em #d2d200, 0 0 0.2em #d2d200;
}
.glow-hover-down {
transition: box-shadow 0.3s ease;
}
.glow-hover-down:hover {
box-shadow: 0 0 1em #d2d200, 0 0 0.2em #d2d200 !important;
}
.glow-disabled {
box-shadow: 0 0 1em #c0c0c0, 0 0 0.2em #c0c0c0;
}
.glow-hover-disabled {
transition: box-shadow 0.3s ease;
}
.glow-hover-disabled:hover {
box-shadow: 0 0 1em #c0c0c0, 0 0 0.2em #c0c0c0 !important;
}
.glow-null {
box-shadow: 0 0 1em #cca797, 0 0 0.2em #cca797;
}
.glow-hover-null {
transition: box-shadow 0.3s ease;
}
.glow-hover-null:hover {
box-shadow: 0 0 1em #cca797, 0 0 0.2em #cca797 !important;
} |