The best websites out there will always follow the best trends and standards.
One thing which is usually a given nowadays is responsiveness: making the website work on any device and screen size.
One design element of a responsive website is a mobile menu – and these mobile menus can come in many forms.
A popular choice is to use a slide-out menu that is usually triggered by a hamburger menu button.
Check out our collection of more than 10 Responsive Hamburger Menu CSS Examples!
What Is a Slide Menu?
A slide menu is a menu which is usually hidden off-screen and activated to open and close via a trigger. This trigger is usually a button, mostly referred to as a hamburger menu.
Slide menus are a great way to bunch together all the links into one place and optimise the content for a smaller screen.
They come in all shapes and sizes, you can get slide down menus and they can be either built using pure CSS or you can get slide menus in JavaScript.
Even though slide menus are mostly used for converting a website’s header navigation into a responsive form, they can be used just like normal menus for full-screen websites as well.
13 Slide Menus With CSS and JavaScript
Sliding menus can be made using just CSS but when you add a little JavaScript, more advanced menus can be built, so expect a range of different solutions in this article.
1. Vertical Slide Out Menu
As I stated in the introduction, not all slide menus need to only be used to create a responsive design, this menu can be used as the main menu for any website, it saves space and the design looks clean and minimal.
The actual menu that slides out uses a smooth animation to pop out from the left side, each menu item has its own hover effect which is subtle and not overpowering – so do the main menu items, they have an icon and a hover effect.
If you are looking to have a menu like this, it allows you to make maximum use of the screen for other elements and save space but still keep quick access to navigation.
2. Pure CSS Slide Out Menu
A pure HTML and CSS only example of how you can build slide menus with no need for any JavaScript.
The animation is simple and smooth, it takes up the whole screen with a transparent background, however, you could easily change this to a solid colour. Each menu item has a subtle hover effect, and the menu is infinitely expandable to add more menu items.
3. Expandable Slide Down Menu
Slide down menus are a great way to show a list of links, in this example, the menu slides down smoothly from the top and presents us with navigational links.
This kind of view works really well for mobile devices as they take up the whole screen and scale well no matter the screen size.
4. Right Side Slide out Menu
An off-screen drawer style menu with a transparent background and hover effects on menu links.
The animation is simple, works well and is not overpowering. The menu itself looks modern and sleek with its transparent background but you could easily change this to a solid colour if you needed. And the whole menu is simple as it only uses HTML and CSS, no JavaScript in this one.
5. Hover Slide Out Menu with Javascript
Another way to make a non-mobile slide-out menu more part of the main UI is the add a hover trigger so that a user can access the slide menu without having to click on it.
The hover trigger is quick and snappy, making access a breeze for website navigation, and it is just super easy to use.
6. Left Slide Menu With Icons
Here we have a modern and minimalist left side menu in which the slide-out menu is triggered by a click of the hamburger icon using some javascript.
The menu zooms out from the bottom into view and each item has its own hover effect. Just a simple and effective menu which looks great.
7. 3D Fold Out Sliding Menu
Slide menus triggered by Javascript can have many effects, this one uses a 3D folding out effect to display and close the menu – very eye-catching and the animation is smooth.
It feels very slick and the menu is kept modern and minimal, each menu item has a hover effect and a right side indicator to show which page you are currently on.
If you are open to another kind of menus using JavaScript, check out our selection of JavaScript menus. You’ll love them.
8. CSS Side Menu
Here we have a great example of a simple but extremely functional slide-out menu, the animation is subtle and not overpowering. The menu itself is evenly distributed between each menu link/button.
The example is using a gradient display but the menu could be altered to use a solid colour. The hamburger icon is animated to form a cross when the menu is open, which is a nice touch.
9. Hover Side Sliding Menu
Another cool auto-sliding menu based on a hover trigger, the menu uses icons to keep space to a minimum but is still super accessible once you hover over them.
The menu quickly slides out and the whole animation is very snappy. It reveals a multi-layers menu with subcategories and it even scrolls down to show more links, so the menu can accommodate lots of links and icons.
10. Pro SideBar Menu Template
If you are looking for a more advanced slide-out menu, this one is for you – it comes with a lot of fancy features and subtle effects that give it its name, the Pro Sidebar.
This sliding menu uses a fully responsive layout, it is collapsable, supports multi-level menus and you can customise it yourself. Each icon has a hover effect and multi-level menus auto-close when you open another.
11. Full-Screen Slide Menu
Most slide menus will usually slide from the left or right and only take up a portion of the screen – however, sometimes it is useful to take advantage of the whole screen if you have a lot of content to show, just as this example demonstrates to us.
It is useful because the slide-out menu just displays the content on the main website area, so once closed, the user can just continue where they were.
Being able to display a new page above the main body is super powerful.
Also, the animation is smooth and the icon changes in open and closed states.
12. Pure CSS Side Reveal Menu
A pure HTML and CSS only example which uses a side reveal effect, the menu slides out smoothly and pushes the website’s main body to one side to make room for the menu.
This effect does not slide over the main body content, so it will be pushed to one side, just keep that in mind, but sometimes this effect looks good. The menu itself is simple but very effective and you can add your own icons to make it more engaging.
13. Multi Level CSS Push Menu
This menu is super unique and impressive as it does not use any JavaScript but the menu itself is quite complicated. It allows you to display multi-layers menus on the left side, great for subcategories and deeper links.
The animation effect is a simple smooth slide to open and close menus and open subcategory menus.
