Loading lesson path
Concept visual
Overview
In a vertical navigation bar, the navigation links are stacked vertically (on top of each other), and is typically aligned along the left or right side of a webpage. The basics of a vertical navigation bar is an unordered list (<ul>), with list items (<li>), each holding a link (<a>), as shown in the Navbar Intro page.
Here, we create a basic vertical navigation bar with a gray background color, and we also change the background color and the text color of the links when the user mouse over them:
Example ul {
list-style-type: none;
margin: 0;
padding: 0;width:
200px;
background-color: #f1f1f1;
}
li a {display:
block;
color: black;
padding: 8px 16px;
text-decoration: none;
}/* Change the link and background color on hover */
li a:hover {
background-color: #555555;
color: white;
}The first block (ul) is similar to the previous page. In addition we have specified a fixed width (200px) and a light gray background color
Formula
The next block (li a) styles < a > elements inside < li > elementsDisplaying the links as block elements makes the whole link area clickable (not just the text), and allows us to specify width, padding, margin, height, etc. We add a link color and some padding. We also remove the underline from these
Formula
< a > elementsThe last block (li a:hover) changes the link color and background color when a user mouse over them
Now we add an "active" class to highlight the link corresponding to the current page to let the user know which page/section he/she is on:
Example.active {
background-color: #04AA6D;
color: white;
}Center Navbar Links & Add Borders
Formula
To center the navbar links, add text - align: center;
to < li > or < a >.
If you want a border around the navbar, add the border property to < ul >.
If you also want borders inside the navbar, add a border - bottom property to all < li > elements, except for the last one:Example ul {
border: 1px solid #555555;
}
li {
text-align: center;
border-bottom: 1px solid #555555;
}
li:last-child {
border-bottom: none;
}Formula
Create a full - height, "sticky" side navigation:Example ul {
list-style-type: none;
margin: 0;
padding: 0;width:
130px;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}This example might not work properly on mobile devices.
How to use CSS media queries to create a responsive navbar: