e-addons

Share

ic Interface bwe-User Interface

Hamburger Offcanvas Menu

Discover Hamburger Offcanvas Menu! No more pop-ups used as menus! Finally, an off-canvas menu based on the truly original hamburger icon.

Several styles for your burger, all based on parameterized SVG. The opening modal consists of 2 parts: the first can contain both a menu and a custom template, the second an image to conceptualizes and communicates. The opening and position of the elements can be top, bottom, left, right.

Hamburger Offcanvas Menu
A wonderful off-canvas menu with many original burger styles and tons of customization possibilities.

Style

Svg Based

Wrapper

Bars Items

Modal

Backgund image

Menu Config

Close design

HamburgerOoffcanvasMenu

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

Bars

dots

Dots

grid4

Dots 4

grid9

Dots 9

arrow

Arrow

plus

Plus

wave

Wave

circle2bar

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
HamburgerOoffcanvasMenu Menu

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!

HamburgerOoffcanvasMenu Modal
HamburgerOoffcanvasMenu CloseBut

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

Parametric X

Icon

Image

Text