Verticle Navbar

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS Attribute Selectors

CSS [attribute] Selector

The [attribute] selector selects elements with a specific attribute.

The example selects all <a> elements with a target attribute

HTML
				
					<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
CSS
				
					ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  width: 60px;
  background-color: #dddddd;
}

Output

Example explained:

  • display: block; – Showing the links as block elements enables the whole link area clickable and specifies the width.
  • width: 60px; – By default, block elements take up the full width.

The width of <ul> can be set, and the width of <a> can be removed, as they take up the full width available, when displayed as block elements. This will generate the same result as the previous example:

Vertical Navigation Bar Examples

Let’s create a basic vertical navigation bar with a gray background color and when the user hover the mouse over the navigation bar, change the background color of the links must change:

HTML
				
					l>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
CSS
				
					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;
}

Output

Active/Current Navigation Link

Let add an “active” class to the current link so that the user is informed about which page he/she is on:

HTML

				
					<p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.</p>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
CSS
				
					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;
}

li a.active {
  background-color: #03989E;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

Output