Side navigation bar css

16 CSS Sidebar Menus

Collection of hand-picked free HTML and CSS sidebar menu code examples from codepen and other resources. Update of July 2018 collection. 3 new items.

Related Articles

Author

Links

Made with

About a code

App Admin Menus

App admin menus. light/dark modes.

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

Author

Links

Made with

About a code

Menu Hover Slide Fill

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

Author

Links

Made with

About a code

Pure CSS Single Page Application

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

Author

Links

Made with

About the code

Menu Effect

Reverse text color menu effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Only Navigation for Sidebar

CSS only mirror like navigation for sidebar.

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

Author

Links

Made with

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

Author

Links

Made with

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

Author

Links

Made with

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 transform s and transition s.

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

Author

Links

Made with

About the code

Sidebar Navigation Animation

Nothing like a little trendy body pushin.

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

Author

Links

Made with

About the code

Fixed Hover Navigation

Fixed sidebar drawer navigation, that expands on hover.

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

Author

Links

Made with

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

Author

Links

Made with

About the code

Sidebar Sliding Menu CSS

CSS sliding sidebar menu with scroll, no JS were used

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

Author

Links

Made with

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

Author

Links

Made with

About the code

Pure CSS3 Sidebar Menu

Pure CSS3 mega dropdown sidebar menu with animation..

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

Author

Links

Made with

About the code

Sidebar Menu CSS

CSS sidebar menu with hover show/hide.

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

Author

Links

Made with

About the code

CSS Sidebar Menu

Easy to use sidebar menu with HTML and CSS.

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

Author

Источник

35 CSS Sidebar Menu Examples

An agglomeration of the top free HTML and CSS sidebar menu code examples. These carefully selected CSS sidebar navigation menus are practical and utilize good color schemes ideal for web design. Moreover, many are responsive sidebars making them great for both desktop and mobile applications.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A Stylish CSS sidebar menu with excellent transition effects on hover over the menu items. It is created using HTML and SCSS. The menu items are highlighted with black bar and gives a smooth transition effect.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A modern and stylish sidebar menu with rounded corner in classic blue background created using pure HTML and CSS. On hover, it will change the background color to white to show the selection giving a very dignified look to the web page.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A decorous, collapsible, responsive sidebar menu created using pure HTML and CSS. On click, it opens a menu with a smooth transition and on hovering of menu items, it shows gradient background.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A sophisticated, alluring side menu in black created with the slide effect on the sub menu items is created using HTML and CSS. When you hover over the side menu icons, menu items appears on the side in a block. When you hover over the menu items it gives a beautiful effect.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic collapsible sidebar menu with icons that has a smooth transition effects on hover. It is created using pure HTML and CSS. On hover over the menu, it expands the menu. When you hover over the menu item, it is highlighted with the light blue bar.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Code description:

An awesome triangular mobile CSS sidebar menu with amazing animation effects. It was created using HTML, SCSS, and JQuery. On click, the main page fades out to the right showing triangular sidebar items with nice animations.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A cool CSS sidebar menu with a 3D transition. It is created using HTML, SCSS, and Javascript. When the menu button is clicked, a 3D transition occurs on the main page reviling the sidebar menu to the left. The menu item is highlighted with a white background when you hover over them.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A beautiful, collapsible sidebar created using HTML, SCSS and JS(Babel). When you click on the menu bar, it expands covering the whole page with the different menu items listed on it and a close button to collapse the menu. When you hover over the menu items, it changes the text color to yellow.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic, sophisticated bootstrap sidebar menu with smooth transition effects created using HTML, CSS, and jQuery. It highlights the menu items when you you hover over them. It has used font awesome icons to show icons which gives a descent look to the web page.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing, vertical navigation bar that switches from an icon to text with a cool animation. It is created using HTML5 and CSS3. When you hover over the icons, it will change its face with smooth animation to show text giving a 3D look to the menu.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing sidebar menu for the medium screen with the sliding effect created using HTML, CSS, and Javascript. On click, it will expand the menu and push the main page right.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic, sophisticated sidebar with the menu icons created using HTML and CSS. When you hover over the icon on the menu, it highlights the menu with a beautiful purple color to give a decent look. This menu bar can be expanded and collapsed using the arrow on the top of menu. It also has a button to switch between dark mode and light mode in the web page.

Источник