Importance of Menu(navigation) in site :

1. Helps user in faster navigation

2. Helps in keeping things arranged

3. Helps in search engine optimization through easy crawling

4. Good navigation can improve site’s user experience which may result in increase sales

Want to learn SVG animation : visit

Here’s the list of top 40+ sliding menus :

Menu Effect – 1

See the Pen Material Design Menu by Arjan Jassal (@arjancodes) on CodePen.

Menu by : Arjan Jassal          
Made with: HTML,SCSS,JavaScript 
Browser Compatibility : Chrome, Edge, Firefox, Opera, Safari 
Responsive: Yes
Dependencies: No

Menu Effect – 2

See the Pen Side Sliding Menu CSS by Eduard L. (@EduardL) on CodePen.

Menu by :  Eduard L        
Made with: HTML,CSS,JavaScript 
Browser Compatibility : Chrome, Edge, Firefox, Opera, Safari 
Responsive: Yes                 
Dependencies:FontAwesome.css,Googlefonts 

Menu Effect – 3

See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.

Menu by :  Mirko Zorić         
Made with: HTML,CSS,JavaScript(JQuery) 
Browser Compatibility : Chrome, Edge, Firefox, Opera, Safari 
Responsive: Yes                 
Dependencies:Googlefonts 

Menu Effect – 4

See the Pen Slide menu with drag and swipe by Reza Khan Mohammadi (@rezakhmf) on CodePen.

Menu by :  Reza Khan Mohammadi        
Made with: HTML,SCSS,JavaScript 
Browser Compatibility : Chrome, Edge, Firefox, Opera, Safari 
Responsive: No                 
Dependencies:Googlefonts,Compass

Menu Effect – 5

See the Pen Fly-Out Nav by Tiffany Rayside (@tmrDevelops) on CodePen.

Menu by :  Tiffany Rayside        
Made with: HTML,SCSS,JavaScript 
Browser Compatibility : Chrome, Edge, Firefox, Opera, Safari 
Responsive: No                 
Dependencies:Googlefonts,modernizr.min.js,font awesome

Menu Effect – 6

See the Pen Multi-level Side Nav Menu by Aaron Awad (@blindpiggy) on CodePen.

Menu by :   Aaron Awad       
Made with: HTML,CSS,JavaScript 
Browser Compatibility : Chrome, Edge, Firefox, Opera, Safari 
Responsive: Yes                 
Dependencies:Googlefonts,JQuery.min.js

Menu Effect – 7

See the Pen Full width menu & SVG animation by Brandon Ward (@brandondward) on CodePen.

Menu by : Brandon Ward       
Made with: HTML,SCSS,JavaScript 
Browser Compatibility : Chrome, Edge, Firefox, Opera, Safari 
Responsive: No                 
Dependencies:Googlefonts,Font-awesome.css

Menu Effect – 8

See the Pen CSS only Sliding menu (Hamburger menu) by Maxime Huylebroeck (@G_4s) on CodePen.

Menu by :  Maxime Huylebroeck       
Made with: HTML,CSS,JavaScript 
Browser Compatibility : Chrome, Edge, Firefox
Responsive: No                 
Dependencies:Googlefonts,Font-awesome.css

Menu Effect – 9

See the Pen Sliding Menu by Onsen & Monaca (@onsen) on CodePen.

Menu by : Onsen & Monaca      
Made with: HTML,JavaScript 
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: Yes                 
Dependencies:onsenui.min.js,angular.min.js

Menu Effect – 10

See the Pen CSS Side navigation & Hamburger Menu by CloudFrank (@CloudFrank) on CodePen.

Menu by : Cloudfrank     
Made with: HTML,SCSS 
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: Yes                 
Dependencies:Googlefonts

Menu Effect – 11

See the Pen Sidebar Nav Animation by magnificode (@magnificode) on CodePen.

Menu by : magnificode     
Made with: HTML,SCSS 
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: Yes                 
Dependencies:Googlefonts

Menu Effect – 12

See the Pen Offcanvas sidebar menu with a twist by Devilish Alchemist (@devilishalchemist) on CodePen.

Menu by : Devilish Alchemist   
Made with: HTML,SCSS ,Javascript(Jquery)
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: No                 
Dependencies:Jquery.min.js

Menu Effect – 13

See the Pen Off canvas menu by Mark Murray (@markmurray) on CodePen.

Menu by : Mark Murray   
Made with: HTML,SCSS ,Javascript(Jquery)
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: No                 
Dependencies:Googlefonts,jquery.min.js

Menu Effect – 14

See the Pen CSS3 side panel with menu by Darren Huskie (@Huskie) on CodePen.

Menu by : Darren Huskie   
Made with: HTML,SASS ,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: Yes                 
Dependencies:Googlefonts,ei.js

Menu Effect – 15

See the Pen Sidebar Animations by Angeal (@angeal185) on CodePen.

Menu by : Angeal   
Made with: Pug,Stylus,Coffeescript
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: No                
Dependencies:Googlefonts,Ei.js

Menu Effect – 16

See the Pen CSS sidebar toggle by Jorge C. S. Cardoso (@jorgecardoso) on CodePen.

Menu by : Jorge C. S. Cardoso  
Made with: Html,Css,JavaScript
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: Yes                
Dependencies:

Menu Effect – 17

See the Pen Left slide menu with icon by Roman (@ramzs) on CodePen.

Menu by : Roman  
Made with: Html,Css,JavaScript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes                
Dependencies:font-awesome.min.css,JQuery

Menu Effect – 18

See the Pen Multibox Menu by Hosea (@hosea-s) on CodePen.

Menu by : Hosea   
Made with: Html,Css,JavaScript
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: Yes                
Dependencies:TweenMax.min.js

Menu Effect – 19

See the Pen Pure CSS Hamburger fold-out menu (right side) by Joan Clarke (@Joanc) on CodePen.

Menu by : Joan Clarke  
Made with: Html,Css
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes                
Dependencies:

Menu Effect – 20

See the Pen Pure CSS Hamburger fold-out menu (right side) by Joan Clarke (@Joanc) on CodePen.

Menu by : Joan Clarke  
Made with: Html,Css
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes                
Dependencies:

Menu Effect – 21

Menu by : CodeGrid(youtube channel)  
Made with: Html,Css,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive:                 
Dependencies:Gsap, Jquery

Menu Effect – 22

See the Pen hamburger slide accordion menu by Anya Melnyk (@slyka85) on CodePen.

Menu by : Anya Melnyk
Made with: Html,Css,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive:                 
Dependencies:Gsap, jquery.min.js

Menu Effect – 23

Menu by : codedrops(svg animation)
Made with: Html,Css,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: yes                
Dependencies:Draggabily js,modernizer js,snap.svg-min.js

Menu Effect – 24

See the Pen Another CSS Morphing Menu Toggle by Matt Soria (@poopsplat) on CodePen.

Menu by : Matt Soria 
Made with: Html,Scss,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: yes                
Dependencies:

Menu Effect – 25

Menu by : CodeGrid(youtube channel)
Made with: Html,css,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive:                 
Dependencies:Gsap js

Menu Effect – 26

See the Pen Responsive sidebar revealed on click and key press by Antonija Šimić (@tonkec) on CodePen.

Menu by :Antonija Šimić
Made with: Html,css,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: Yes               
Dependencies:fonts.googleapis,JQuery

Menu Effect – 27

See the Pen pure css drawer by Brady Hullopeter (@bradyhullopeter) on CodePen.

Menu by : Brady Hullopeter
Made with: Html,Scss,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: Yes               
Dependencies:fonts.googleapis

Menu Effect – 28

See the Pen PURE CSS SIDEBAR TOGGLE MENU by Jelena Jovanovic (@plavookac) on CodePen.

Menu by : Jelena Jovanovic
Made with: Html,css
Browser Compatibility : Chrome, Edge, Firefox,Safari
Responsive: Yes               
Dependencies:fonts.googleapis

Menu Effect – 29

See the Pen Off-Canvas Menu (final) by Mojtaba Seyedi (@seyedi) on CodePen.

Menu by : Mojtaba Seyedi
Made with: Html,css
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies:fonts.googleapis

Menu Effect – 30

See the Pen CSS & JS Toggle Sidebar Nav by Paul (@illpill) on CodePen.

Menu by : Paul
Made with: Html,css,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies:fonts.googleapis,font-awesome.min.css

Menu Effect – 31

See the Pen Side Menu Animation by Jordan (@flyingcar) on CodePen.

Menu by : Jordan
Made with: Html,css,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies:fonts.googleapis,Jquery.min.js

Menu Effect – 32

See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.

Menu by : Michael Leonard
Made with: Html,css,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies:Jquery.min.js

Menu Effect – 33

See the Pen Slide out / hamburger / club sandwich menu by Jonno Witts (@jonnowitts) on CodePen.

Menu by : Jonno Witts
Made with: Html,Scss,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies:Jquery.min.js

Menu Effect – 34

See the Pen Sidebar Interaction by Siddharth Parmar (@Siddharth11) on CodePen.

Menu by : Siddharth Parmar
Made with: Html,Scss,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies:Jquery.min.js,Babel

Menu Effect – 35

See the Pen Responsive Multilevel Menu by Davidson (@davilotus) on CodePen.

Menu by : Davidson 
Made with: Html,Scss,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies:fonts.googleapis,font-awesome,bootstrap.min.css ,jquery.min.js

Menu Effect – 36

See the Pen 3D Rotating Navigation by Ivan (@ivn) on CodePen.

Menu by : Ivan 
Made with: Html,css,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies: modernizr.min.js, jquery.min.js

Menu Effect – 37

See the Pen ANIMATED SIDEBAR by [email protected]!LhaNy (@Qqshare) on CodePen.

Menu by : [email protected]!LhaNy
Made with: Html,Scss,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: No               
Dependencies: fonts.googleapis, jquery.min.js

Menu Effect – 38

See the Pen CSS3 Only Menu by Ragnar Þór Valgeirsson (@rthor) on CodePen.

Menu by : Ragnar Þór Valgeirsson
Made with: Html(Pug),Less,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies: modernizr.min.js, jquery.min.js

Menu Effect – 39

See the Pen CSS sidebar toggle by Silvestar Bistrović (@CiTA) on CodePen.

Menu by : Silvestar Bistrović
Made with: Html,Scss,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies: Babel

Menu Effect – 40

See the Pen Left Side Toggle Menu – Pure Javascript by Lucas Ruy (@LucasRuy) on CodePen.

Menu by : LucasRuy
Made with: Html(Pug),Scss,Javascript
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies: 

Menu Effect – 41

See the Pen Sidebar template by Azouaoui Mohamed (@azouaoui-med) on CodePen.

Menu Effect – 42

See the Pen transparency by Brady Hullopeter (@bradyhullopeter) on CodePen.

Menu by : Brady Hullopeter
Made with: Html,Scss
Browser Compatibility : Chrome, Edge, Firefox,Safari,Opera
Responsive: Yes               
Dependencies: fonts.googleapis

Thanks for reading my article . Comment down below which was your menu

by- JatinRaj