Collection of free jQuery sliding menu examples from codepen and other resources. Update of November 2019 collection. 4 new items.

Related Articles

  1. jQuery Menus
  2. jQuery Context Menus
  3. jQuery Fullscreen Menus
  4. jQuery Mega Menus
  5. jQuery Off-Canvas Menus
  6. jQuery Scrolling Menus
  7. React Menus
  8. CSS Menus

Author

  • Jordan

Links

Made with

  • HTML / CSS / JS

About a code

Side Menu Animation

Side menu animation in jQuery.

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

Responsive: yes

Dependencies: jquery.js

Author

  • Romain Chemartin

Links

Made with

  • HTML / CSS / JS

About a code

Simple Sliding Menu

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

Responsive: yes

Dependencies: jquery.js

Author

  • ahmed beheiry

Links

Made with

  • HTML / CSS / JS

About a code

Sliding Menu

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

Author

  • Keith Light

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Angled Menu

Off canvas jQuery angled menu.

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

Responsive: yes

Dependencies: -

Author

  • Alex Coven

Links

Made with

  • HTML / CSS / JS

About a code

Menu Shelf and Logo to Hamburger Animation

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

Responsive: yes

Dependencies: -

Author

  • Ophelia Fournier-Laflamme

Links

Made with

  • HTML / CSS (PostCSS) / JS

About a code

Side and Down Sliding Menu

Side slide & drop down fullscreen menu.

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

Responsive: yes

Dependencies: jquery.js

Demo image: SVG Gooey Hover Menu Concept

Author

  • Michael Leonard

Links

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

About the code

SVG Gooey Hover Menu Concept

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

Author

  • Aleh Isakau

Links

Made with

  • HTML / CSS / JS

About a code

Sliding Menu

Off canvas navigation menu is hidden by default.

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

Responsive: no

Dependencies: jquery.js

Author

  • Iulian Savin

Links

Made with

  • HTML / CSS / JS

About a code

Sliding Menu

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

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

Responsive: yes

Dependencies: jquery.js

Author

  • creotip

Links

Made with

  • HTML / CSS / JS

About a code

Slide In Navigation

Slide in panel - off canvas navigation.

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

Responsive: yes

Dependencies: jquery.js

Author

  • Nick Spiel

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Multi-Layer Sliding Navigation

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

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

Responsive: no

Dependencies: jquery.js

Author

  • LukyVJ

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Small Menu Slide-In

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

Responsive: yes

Dependencies: jquery.js