Hit enter after type your search item

A pure CSS off-canvas menu with 2 demos

The off-canvas menu using pure CSS

The off-canvas menu is the one that slides and overlaps the main content with the navigation links.

Generally, you may need to use the JavaScript for creating this type of menu. In this post, an off-canvas menu is shared with pure CSS.

This menu type can particularly be useful for mobile websites where a user may navigate easily to the other sections of the website.

A demo of flying CSS menu

The menu uses font-awesome based icons, so the CSS file of that library is included in the <head> section. You may use some other or design your own icons.

As you bring the mouse over the black bar with icons, the menu will open with navigation links in flying manner. Have a look by clicking the image or link below:

CSS off canvas menu

See online demo and code

The CSS:


The markup:


A demo of menu with different style

Using the same menu as in above demo, in this example, I have played with a few CSS properties for different elements of the menu. For example, the background color is changed along with text color and shadow. The transition is changed to linear from ease value that occurs as you bring the mouse over any item. Have a look:

CSS menu off-canvas

See online demo and code

The CSS in this demo:


Get the complete code from the demo page.

This div height required for enabling the sticky sidebar