TheBestTutorials.css Side Navigation

Vertical Navigation Bar

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 the navigation pane, hiding the left part of the page content.
Open the navigation pane, hiding all of the page content.
Shift the page content to the right, when opening the navigation pane.
Display the navigation pane on the right side instead of the left side

Example: Always Display the Side Navigation

<nav class="subhodaya-sidenav subhodaya-white" style="width:25%">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>

<div style="margin-left:25%">
... page content ...
</div>

Try It Yourself »

Collapsible Responsive Sidenav

<nav class="subhodaya-sidenav subhodaya-collapse subhodaya-white" style="width:200px" id="mySidenav">
<a href="#" onclick="subhodaya_close()" class="subhodaya-closenav subhodaya-hide-large">Close ×</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav>

<div class="subhodaya-main" style="margin-left:200px">
<span class="subhodaya-opennav subhodaya-hide-large" onclick="subhodaya_open()">☰</span>
... page content ...
</div>

<script>
function subhodaya_open() {
document.getElementById("mySidenav").style.display = "block";
}
function subhodaya_close() {
document.getElementById("mySidenav").style.display = "none";
}
</script>

Try It Yourself »

Open the Navigation Pane Hiding a Part of the Content

function subhodaya_open() {
document.getElementById("mySidenav").style.display = "block";
}
function subhodaya_close() {
document.getElementById("mySidenav").style.display = "none";
}

Try It Yourself »

Open the Navigation Pane Hiding All of the Content

function subhodaya_open() {
    document.getElementById("mySidenav").style.width = "100%";
    document.getElementById("mySidenav").style.display = "block";
}
function subhodaya_close() {
    document.getElementById("mySidenav").style.display = "none";
}

Try It Yourself »

Shift the Content to the Right

function subhodaya_open() {
document.getElementById("main").style.marginLeft = "25%";
document.getElementById("mySidenav").style.width = "25%";
document.getElementById("mySidenav").style.display = "block";
document.getElementById("openNav").style.display = 'none';
}
function subhodaya_close() {
document.getElementById("main").style.marginLeft = "0%";
document.getElementById("mySidenav").style.display = "none";
document.getElementById("openNav").style.display = "inline-block";
}

Try It Yourself »

Example: Right-sided Side Navigation

<nav class="subhodaya-sidenav subhodaya-white" style="width:25%;right:0">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>

<div style="margin-right:25%">
... page content ...
</div>

Try It Yourself »

Example: Right-sided Collapsible Side Navigation

<nav class="subhodaya-sidenav subhodaya-collapse subhodaya-white" style="width:200px;right:0" id="mySidenav">
<a href="#" onclick="subhodaya_close()" class="subhodaya-closenav subhodaya-hide-large">Close ×</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav>

<div class="subhodaya-main" style="margin-right:200px">
<span class="subhodaya-opennav subhodaya-hide-large" onclick="subhodaya_open()">☰</span>
... page content ...
</div>

<script>
function subhodaya_open() {
document.getElementById("mySidenav").style.display = "block";
}
function subhodaya_close() {
document.getElementById("mySidenav").style.display = "none";
}
</script>

Try It Yourself »

Example: Left & Right Side Navigation

Try It Yourself »

Styling the Side Navigation

Add the TheBestTutorials-color class to the TheBestTutorials-sidenav 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 TheBestTutorials-color class to one of the links as well:

Example

Try It Yourself »

Bordered Side Navigation

Use the TheBestTutorials-border class to add a border around the sidenav:

Example

Try It Yourself »

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

Example

Try It Yourself »

Use the subhodaya-card class to display the sidenav as a card:

Example

Try It Yourself »

Hoverable Links

When you mouse over the links inside the sidenav, the background color will change to grey.

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

Example

Try It Yourself »

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

Example

Try It Yourself »

Side Navigation Sizes

Increased font-size (TheBestTutorials-large etc):

Increased padding (TheBestTutorials-padding etc):

Example

Try It Yourself »

Side Navigation with Icons

Example

Try It Yourself »

Side Navigation with Dropdown

Example

<nav class="subhodaya-sidenav subhodaya-light-grey">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<div class="subhodaya-dropdown-hover">
    <a href="#">Dropdown <i class="fa fa-caret-down"></i></a>
    <div class="subhodaya-dropdown-content subhodaya-white subhodaya-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</div>
<a href="#">Link 3</a>
</nav>

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 TheBestTutorials-hover-color class to both the "dropdown" <li> and <a>.

Side Navigation with Accordion

Example

<nav class="subhodaya-sidenav subhodaya-light-grey subhodaya-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="subhodaya-accordion">
    <a onclick="myAccFunc()" href="#">Accordion</a>
    <div id="demoAcc" class="subhodaya-accordion-content subhodaya-white subhodaya-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</div>
<div class="subhodaya-dropdown-click">
    <a onclick="myDropFunc()" href="#">Dropdown</a>
    <div id="demoDrop" class="subhodaya-dropdown-content subhodaya-white subhodaya-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>

Try it Yourself »

Animated Sidenav

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

Example

Try It Yourself »

Sidenav Overlay

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

Example

<nav class="subhodaya-sidenav subhodaya-white subhodaya-animate-left" style="display:none;z-index:4" id="mySidenav">
<a href="javascript:void(0)" onclick="subhodaya_close()" class="subhodaya-closenav">Close</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</nav>


<div class="subhodaya-overlay" onclick="subhodaya_close()" style="cursor:pointer"></div>


<div class="subhodaya-container">
<span class="subhodaya-opennav" onclick="subhodaya_open()">☰</span>
</div>


<script>
function subhodaya_open() {
document.getElementById("mySidenav").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}

function subhodaya_close() {
document.getElementById("mySidenav").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>

Try It Yourself »

Sidenav Content

Add whatever you like inside the side navigation:

Example

<nav class="subhodaya-sidenav subhodaya-light-grey" style="width:50%">
<div class="subhodaya-container subhodaya-dark-grey">
    <h4>Menu</h4>
</div>

<img src="img_fjords.jpg">

<a class="subhodaya-red" href="#">Home</a>
<a href="#">Projects
    <span class="subhodaya-tag subhodaya-red subhodaya-round subhodaya-right">8</span>
</a>
<a href="#">About</a>
<a href="#">Contact</a>

<div class="subhodaya-container">
    <div class="subhodaya-border subhodaya-round subhodaya-padding subhodaya-blue-grey">
      <span class="subhodaya-closebtn">x</span>
      <p>Lorem ipsum box...</p>
    </div>
</div>
</nav>

Try It Yourself »

« Previous

Next Chapter »