Introduction
The chapter below demonstrates the W3CSS Side Navigation which display the navigation pane at right or left side and following are the concepts covered in this chapter.
- Vertical Navigation Bar
- Styling Side Navigation
- Hoverable Links
- Animated Sidenav
- Sidenav Overlay
Description
Side Navigation bar Consist several properties which display navigation pane at the left of the page and it is responsive and fully automatic. User can open the navigation pane and hide all the page content and user can shift the content to the right then the content should be displayed at right instead of left. The code below demonstrates the displaying the navigation bar as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<nav class="w3-sidenav w3-white w3-card-2" style="width:25%">
<br>
<a href="#">Java</a>
<a href="#">HTML</a>
<a href="#">HTML5</a>
<a href="#">CSS</a>
<a href="#">W#.CSS</a>
</nav>
<div style="margin-left:25%">
<header class="w3-container w3-blue">
<h1>SPLESSONS</h1>
</header>
<img src="splessons.jpg" alt="Car" style="width:50%">
<div class="w3-container">
<h2>Side Navigation</h2>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
<p>SPlessons to enhance our knowledge of programming by presenting several different articles to the viewers and by participating in knowledge enriching discussions on the website.</p>
</div>
<footer class="w3-container w3-blue">
<h5>Footer</h5>
<p> support@splessons.com</p>
</footer>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<nav class="w3-sidenav w3-white w3-card-2" style="width:25%">
<br>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>
<div style="margin-left:25%">
<header class="w3-container w3-blue">
<h1>My Header</h1>
</header>
<img src="splessons.jpg" alt="splessons" style="width:100%">
<div class="w3-container">
<h2>Side Navigation Example</h2>
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
<footer class="w3-container w3-blue">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
</div>
</body>
</html>
[/html]
User can hide the side navigation pane when the user required user need to click on the bar then it will open the code below demonstrates the hiding the navgation pane as shown below.
Description
User can style the SideNav by adding the W3-color class to the w3-sidenav when the color class will be applied the background color will be changed. If user want the active link to let the user know which page is on. The code below demonstrates the Styling Side Navogation as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<nav class="w3-sidenav w3-purple" style="width:25%">
<a class="w3-grey" href="#">splessons</a>
<a href="#">Java</a>
<a href="#">HTML</a>
<a href="#">HTML5</a>
<a href="#">CSS</a>
<a href="#">W#.CSS</a>
</nav>
<div style="margin-left:25%">
<header class="w3-container w3-purple">
<h1>My Header</h1>
</header>
<div class="w3-container">
<p>Use the w3-color class to change the background color of the side navigation.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also make the side nav links as Hoverable links by using the w3-hover-color classes Hoverble means when the user mouse over the links then the background colors of the links will change to another color. The code below demonstrates the Hoverable links inside SideNav as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<nav class="w3-sidenav w3-light-grey" style="width:25%">
<a href="#">Default</a>
<a class="w3-hover-green" href="#">Link 1</a>
<a class="w3-hover-black" href="#">Link 2</a>
<a class="w3-green w3-hover-white" href="#">Link 3</a>
<a class="w3-hover-blue" href="#">Link 4</a>
<a class="w3-hover-red" href="#">Link 5</a>
<a class="w3-hover-purple" href="#">Link 6</a>
<a class="w3-hover-indigo" href="#">Link 7</a>
<a class="w3-hover-grey" href="#">Link 8</a>
</nav>
<div style="margin-left:25%">
<header class="w3-container w3-blue">
<h1>SPLESSONS</h1>
</header>
<div class="w3-container">
<p>When user mouse over the links inside the side navigation, the background color will change to grey by default.</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also make animated Sidenav by using the w3-animate-class. Which is used to fade os slide in side navigation pane the code below demonstrates the Animated side nav as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<nav class="w3-sidenav w3-blue w3-animate-left" style="display:none" id="mySidenav">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-closenav w3-large">Close ×</a>
<a href="#">Java</a>
<a href="#">HTML</a>
<a href="#">HTML5</a>
<a href="#">CSS</a>
<a href="#">W#.CSS</a>
</nav>
<div class="w3-container">
<span class="w3-opennav w3-xlarge" onclick="w3_open()">☰</span>
<p>w3-animate-left, w3-animate-top, w3-animate-bottom, w3-animate-right, w3-animate-opacity, w3-animate-zoom</p>
</div>
<script>
function w3_open() {
document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can create overlay effects to the side nav pane while opening by using the w3-overlay class which can add black background with 50% opacity to the page content and which highlight the side navigation pane the code below demonstrates the side nav overlay as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<nav class="w3-sidenav w3-white w3-animate-left" style="display:none;z-index:5" id="mySidenav">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-closenav w3-large">Close ×</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</nav>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
<div class="w3-container">
<span class="w3-opennav w3-xxlarge" onclick="w3_open()">☰</span>
<h2>Page content..</h2>
<p>The w3-overlay class can be used to create an overlay effect, when opening the sidenav. The w3-overlay class adds a black background with a 50% opacity to the "page content" - this effect will "highlight" the side navigation</p>
</div>
<script>
function w3_open() {
document.getElementById("mySidenav").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Overlay effects add 50% opacity to the page content.
- User can create animated Side nav with different effects.
- User can collapse the side navigation pane.