Mobile Menu Codes

Here are some codes for Mobile Menu.

Description	Code

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;
}