Vertical Navbar
Vertical Navigation Bar
-------TABLE MUKVU--------
In addition to the code from the previous page, you can style the <a> elements inside the list to create a vertical navigation bar:
Example
li a {
display: block;
width: 60px;
}
Example Explained:
display: block; -When the links are displayed as block elements, we may set the width (as well as optional padding, margin, and height) and click the entire link area—rather than just the text.
width: 60px; – Block elements take up the full width available by default. We want to specify a 60 pixels width
Additionally, you can adjust the width of <ul> and remove the width of <a>, since when they are presented as block elements, they will occupy the entire available width. The outcome will be the same as in our earlier example:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
Vertical Navigation Bar Examples
Make a simple gray vertical navigation bar and set the background color of the links to change when the user slides the mouse over them:
-------TABLE MUKVU--------
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
Active/Current Navigation Link
Add an “active” class to the current link to let the user know which page he/she is on:
-------TABLE MUKVU--------
Example
.active {
background-color: #04AA6D;
color: white;
}
Center Links & Add Borders
Add text-align:center to <li> or <a> to center the links.
Add the border property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one:
-------TABLE MUKVU--------
Example
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Full-height Fixed Vertical Navbar
Make a “sticky” side navigation that is full-height:
-------TABLE MUKVU--------
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
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 */
}
