Collection
Post cover

Best 12 jQuery Sliding Menus

Collection of free jQuery sliding menu examples from codepen and other resources.

Side Menu Animation

Author: Jordan

Links: demo and code

Made with: HTML / CSS / JS

Side menu animation in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Simple Sliding Menu

Author: Romain Chemartin

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Sliding Menu

Author: ahmed beheiry

Links: demo and code

Made with: HTML / CSS / JS

Hey there, check it out. Click on that menu button on the right and it'll appear. To close the menu you can click on the close(X) button or you can click anywhere on the document and it'll be closed.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Angled Menu

Author: Keith Light

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Off canvas jQuery angled menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Menu Shelf and Logo to Hamburger Animation

Author: Alex Coven

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Side and Down Sliding Menu

Author: Ophelia Fournier-Laflamme

Links: demo and code

Made with: HTML / CSS (PostCSS) / JS

Side slide & drop down fullscreen menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Post cover

SVG Gooey Hover Menu Concept

Author: Michael Leonard

Links: demo and code

Made with: HTML; CSS; JavaScript (jquery.js)

Uses SVG path manipulation based on mouse position to 'chase' the user's position.

Sliding Menu

Author: Aleh Isakau

Links: demo and code

Made with: HTML / CSS / JS

Off canvas navigation menu is hidden by default.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Sliding Menu

Author: Iulian Savin

Links: demo and code

Made with: HTML / CSS / JS

A sliding, transparent menu that shows/hides on click.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Slide In Navigation

Author: creotip

Links: demo and code

Made with: HTML / CSS / JS

Slide in panel - off canvas navigation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Multi-Layer Sliding Navigation

Author: Nick Spiel

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

The bare basics pieces you need to get a multi-layered sliding navigaton happening.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Small Menu Slide-In

Author: LukyVJ

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback