Collection of free jQuery sliding menu code examples from Codepen, Github and other resources. Update of November 2021 collection. 2 new items.
Related Articles
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
Links
Made with
- HTML / CSS / JS
About a code
Simple Sliding Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
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
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: -
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: -
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

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.
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
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

- 96 stars
- 12 watchers
Slide And Swipe Menu
A sliding swipe menu that works with touchSwipe library.
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
Links
Made with
- HTML / CSS / JS
About a code
SlideDown Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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
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