Sidebar Css Template

Posted onby admin

W3.CSS Vertical Navigation Bars

With side navigation, you have several options:

  • Always display the navigation pane to the left of the page content
  • Use a collapsible, 'fully automatic' responsive side navigation
  • Open navigation pane over the left part of the page content
  • Open navigation pane over all of the page content
  • Slide the page content to the right when opening the navigation pane
  • Display the navigation pane on the right side instead of the left side

Always Display the Sidebar

Example

Web Templates Web Statistics Web Certificates Web Editor Web Development Test Your Typing Speed Play a Code Game. Learn how to create a fixed side navigation menu with CSS. /. The sidebar menu./.sidenav height: 100%; /. Full-height: remove this if you want 'auto' height./. Web Templates Web Statistics Web Certificates Web Editor Web Development Test Your Typing Speed Play a Code Game. Add CSS: Example. We created 2 different sidebar configurations, according to the screen size. On small devices, the sidebar has a 100% width, is in absolute position and hidden by default (visibility: hidden). When the user clicks/taps the.cd-nav-trigger, the sidebar visibility is changed to visible (using the.cd-side-nav.

<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
<div>
... page content ...
</div>
Try It Yourself »

Open the Sidebar Navigation Over a Part of the Content

Example

function w3_open() {
document.getElementById('mySidebar').style.display = 'block';
}
function w3_close() {
document.getElementById('mySidebar').style.display = 'none';
}

Create a sidebar with CSS flexbox. A browser extension to check browser compatibility without leaving your tab. Feb 22, 2021 Sidebar template by Azouaoui Mohamed can easily become the solution to all of your problems. It already has all the necessary elements that you need, starting with the logotype and ending with the social media icons and search. It is a fully-functional panel that looks great on both in mobile and desktop screens.

Try It Yourself »

Open the Sidebar Navigation Over the Content

Example

function w3_open() {
document.getElementById('mySidebar').style.width = '100%';
document.getElementById('mySidebar').style.display = 'block';
}
function w3_close() {
document.getElementById('mySidebar').style.display = 'none';
}
Try It Yourself »

Collapsible Responsive Side Navigation

Example

<div>
<button
>Close &times;</button>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
<div>
<div>
<button>&#9776;</button>
<div>
<h1>My Page</h1>
</div>
</div>
</div>
<script>
function w3_open() {
document.getElementById('mySidebar').style.display = 'block';
}
function w3_close() {
document.getElementById('mySidebar').style.display = 'none';
}
</script>
Try It Yourself »

Slide the Page Content to the Right

Example

function w3_open() {
document.getElementById('main').style.marginLeft = '25%';
document.getElementById('mySidebar').style.width = '25%';
document.getElementById('mySidebar').style.display = 'block';
document.getElementById('openNav').style.display = 'none';
}
function w3_close() {
document.getElementById('main').style.marginLeft = '0%';
document.getElementById('mySidebar').style.display = 'none';
document.getElementById('openNav').style.display = 'inline-block';
}
Try It Yourself »

Right-sided Side Navigation

Example

<div>
<h5>Menu</h5>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
<div>
... page content ...
</div>
Try It Yourself »

Right-sided Collapsible Navigation

Example

<div>
<button
>Close &times;</button>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
<div>
<div>
<button>&#9776;</button>
<div>
<h2>My Page</h2>
</div>
</div>
</div>
<script>
function w3_open() {
document.getElementById('mySidebar').style.display = 'block';
}
function w3_close() {
document.getElementById('mySidebar').style.display = 'none';
}
</script>
Try It Yourself »

Left & Right Side Navigation

Example

Try It Yourself »

Styling the Side Navigation

Add the w3-color class to the w3-sidebar to change the background color. If you want an active/current link, to let the user know which page he/she is on, add the w3-color class to one of the links as well:




Example

Try It Yourself »

Bordered Side Navigation

Use the w3-border class to add a border around the side navigation:

Example

Try It Yourself »

Add the w3-border-bottom class to the links to create link dividers:

Example

<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
Try It Yourself »

Use the w3-card class to display the side navigation as a card:

Example

Try It Yourself »

Sidebar Css Template Downloads

Hoverable Links

When you mouse over the links inside a bar block, the background color will change to grey.

If you want a different background color on hover, use any of the w3-hover-color classes:

Example

<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
Try It Yourself »

You can turn off the default hover effect with the w3-hover-none class. This is often used when you only want to highlight text color (and not background color) on hover:

Css Sidebar Template

Example

<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
Try It Yourself »

Side Navigation Sizes

Sidebar

Increased font-size (w3-large etc):

Increased padding (w3-padding etc):

Sidebar Css Templates

Example

<div>
<a href='#'>Link</a>
<a href='#'>Link</a>
<a href='#'>Link</a>
</div>
Try It Yourself »

Side Navigation with Icons

Example

<div>
<a href='#'><i></i></a>
<a href='#'><i></i></a>
<a href='#'><i></i></a>
<a href='#'><i></i></a>
</div>
Try It Yourself »

Sidebar with Dropdown

Example

<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<div>
<button>Dropdown <i></i></button>
<div>
<a href='#'>Link</a>
<a href='#'>Link</a>
</div>
</div>
<a href='#'>Link 3</a>
</div>
Try It Yourself »

Tip: When the dropdown menu is 'open', the dropdown link gets a grey background color to indicate that it is active. To override this, add a w3-hover-color class to both the 'dropdown' <div> and <a>.

Sidebar with Accordion

Example

<div>
<a href='#'>Link 1</a>
<button>Accordion</button>
<div>
<a href='#'>Link</a>
<a href='#'>Link</a>
</div>
<div>
<button>Dropdown</button>
<div>
<a href='#'>Link</a>
<a href='#'>Link</a>
</div>
</div>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>

Animated Sidebar

Use any of the w3-animate-classes to fade, zoom or slide in side navigation:

Example

Try It Yourself »

Sidebar Overlay

The w3-overlay class can be used to create an overlay effect when opening the sidebar. The w3-overlay class adds a black background with a 50% opacity to the 'page content' - this effect will 'highlight' the side navigation.

Sidebar Css Template

Example

<!-- Sidebar -->
<div>
<button>Close</button>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
<!-- Overlay -->
<div></div>
<!-- Page content -->
<button>&#9776;</button>
<div>
<h1>Sidebar Overlay</h1>
<p>Click on the 'hamburger' icon to slide in the side navigation.</p>
</div>
<!-- JS to open and close sidebar with overlay effect -->
<script>
function w3_open() {
document.getElementById('mySidebar').style.display = 'block';
document.getElementById('myOverlay').style.display = 'block';
}
function w3_close() {
document.getElementById('mySidebar').style.display = 'none';
document.getElementById('myOverlay').style.display = 'none';
}
</script>
Try It Yourself »

Sidebar Content

Sidebar css template

Add whatever you like inside the side navigation:

Example

<div>
<div>
<h4>Menu</h4>
</div>
<img src='img_snowtops.jpg'>
<a href='#'>Home</a>
<a href='#'>Projects
<span>8</span>
</a>
<a href='#'>About</a>
<a href='#'>Contact</a>
<div>
<span>X</span>
<p>Lorem ipsum box...</p>
</div>
</div>
Try It Yourself »