Collection of free jQuery sliding menu code examples from Codepen, Github and other resources. Update of November 2021 collection. 2 new items.

Related Articles

  1. CSS Sliding 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

Demo image: Slide And Swipe Menu
Made by
  • Joan Claret
Github activity
  • 96 stars
  • 12 watchers
Links
About the plugin

Slide And Swipe Menu

A sliding swipe menu that works with touchSwipe library.

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

  • mp_graphic

Links

Made with

  • HTML / CSS / JS

About a code

SlideDown Menu

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

Responsive: yes

Dependencies: -

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