e-User InterfaceStyle
Svg Based
Wrapper
Bars Items
Modal
Backgund image
Menu Config
Close design
Hamburger Offcanvas Menu
This widget has a full panel and rich in configurations that allow you to fully manage it.
Our HOCM widget consists of several parts:
- hamburger icon
- modal panel
- menu
- template
- side image
- close icon
8 hamburger styles
For each burger it is possible to define the parameters for: size, thickness, position and color.
Bars
Dots
Dots 4
Dots 9
Arrow
Plus
Wave
CircleBars
DEMO
Hamburger styles
burger styles are:
- Bars
- Dots
- Grid 4
- Grid 9
- Plus
- Arrow
- Wave
- Circle 2Bars
WAVE is a dynamic svg that you can configure: the amount of curves and the height of the curve.
It can be animated.
Transform items
in case of BARS it is possible to have 3 different shapes for each line and animate them on roll-over.
SVG params
Round
Square
Butt
Dashed
Some native svg parameters can help you customize the burger look.
- Borders style (Stroke Linecap)
- The amount of the hatch (Dasharray)
Options
Pulse
Wrapper
Styles
More Styles
Among the features of the hamburber you can configure:
- wrapper shape
- pulse effect for attention
- many style parameters
Menu Configuration
In the pop-up modal you can insert both or just one of menu and Elementor template which could contain anything.
Menu configurations in the style tab allow you to define:
- Typography
- Color for each state (normal-hover-active)
- Alignment
- Spacings
- Drop-down icon
- Submenu
Modal in-out
In the modal you can insert a side image.
This can be positioned in the 4 alignments:
- Left
- Right
- Top
- Bottom
But only if you need it!
Left
Right
Top
Bottom
None
Close button design
The close button can be set according to 4 types of items.
This allows you to further customize your modal.
- Parametric X
- Icon
- Image
- Text