Post thumbnail: 12 CSS Sidebar Menus

12 CSS Sidebar Menus

Collection of hand-picked free HTML and CSS sidebar menu code examples.

Related Articles

  1. CSS Menus
  2. CSS Dropdown Menus
  3. CSS Mobile Menus
  4. CSS Horizontal Menus
  5. CSS Fullscreen Menus

Demo image: CSS Only Navigation for Sidebar CSS Only Navigation for Sidebar - GIF Demo

Author

  • sean_codes

Links

Made with

  • HTML (Pug) / CSS

About the code

CSS Only Navigation for Sidebar

CSS only mirror like navigation for sidebar.

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

Dependencies: -

Demo image: CSS Sidebar Menu CSS Sidebar Menu - GIF Demo

Author

  • Milica

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Sidebar Menu

HTML and CSS navbar and sidebar mega menu.

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

Dependencies: bootstrap.css, font-awesome.css

Demo image: Purple Sidebar Menu

Author

  • Shawn Reisner

Links

Made with

  • HTML / CSS (SCSS)

About the code

Purple Sidebar Menu

This is a reverse engineering of the "Hyperspace" design from HTML5 Up! https://html5up.net/hyperspace

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

Dependencies: -

Demo image: Pure CSS Fly in Sidebar Navigation Pure CSS Fly in Sidebar Navigation - GIF Demo

Author

  • Stephen Scaff

Links

Made with

  • HTML / CSS (SCSS)

About the code

Pure CSS Fly in Sidebar Navigation

A simple, multi-level sidebar navigation. Features pure css "fly in" subnav, that leaves icons of parent nav visible. Nav items will scroll (overflow-y) if needed. Uses transforms and transitions.

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

Dependencies: ionicons.css

Demo image: Sidebar Navigation Animation

Author

  • magnificode

Links

Made with

  • HTML / CSS (SCSS)

About the code

Sidebar Navigation Animation

Nothing like a little trendy body pushin.

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

Dependencies: -

Demo image: Fixed Hover Navigation Fixed Hover Navigation - GIF Demo

Author

  • Vince Brown

Links

Made with

  • HTML / CSS (SCSS)

About the code

Fixed Hover Navigation

Fixed sidebar drawer navigation, that expands on hover.

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

Dependencies: -

Demo image: Fully Responsive CSS3 Sidebar Menu

Author

  • Claudio Holanda

Links

Made with

  • HTML / CSS (Less)

About the code

Fully Responsive CSS3 Sidebar Menu

A fully responsive sidebar menu without any need of JavaScript and using less than 200 lines of functional CSS code.

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

Dependencies: -

Demo image: Sidebar Sliding Menu CSS Sidebar Sliding Menu CSS - GIF Demo

Author

  • Eduard L.

Links

Made with

  • HTML / CSS

About the code

Sidebar Sliding Menu CSS

CSS sliding sidebar menu with scroll, no JS were used

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

Dependencies: font-awesome.css

Demo image: 3D Rotating Sidebar Navigation 3D Rotating Sidebar Navigation - GIF Demo

Author

  • Arjan Jassal

Links

Made with

  • HTML / CSS

About the code

3D Rotating Sidebar Navigation

A vertical navigation bar that switches from an icon to text with a cool animation.

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

Dependencies: -

Demo image: Pure CSS3 Sidebar Menu Pure CSS3 Sidebar Menu - GIF Demo

Author

  • Rizky Kurniawan Ritonga

Links

Made with

  • HTML / CSS

About the code

Pure CSS3 Sidebar Menu

Pure CSS3 mega dropdown sidebar menu with animation..

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

Dependencies: font-awesome.css

Demo image: Sidebar Menu CSS Sidebar Menu CSS - GIF Demo

Author

  • JFarrow

Links

Made with

  • HTML / CSS

About the code

Sidebar Menu CSS

CSS sidebar menu with hover show/hide.

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

Dependencies: font-awesome.css

Demo image: CSS Sidebar Menu CSS Sidebar Menu - GIF Demo

Author

  • Jon Ambas

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Sidebar Menu

Easy to use sidebar menu with HTML and CSS.

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

Dependencies: font-awesome.css

Demo image: Fixed Navigation Hover Effect Fixed Navigation Hover Effect - GIF Demo

Author

  • Terence Devine

Links

Made with

  • HTML / CSS (SCSS)

About the code

Fixed Navigation Hover Effect

Fixes sidebar menu concept with a pseudo element hover effect using CSS transition.

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

Dependencies: -

back to top