CSS Vertical Navigation Bar

CSS Vertical Navigation Bar


CSS Vertical Navigation Bar 
Vertical navigation bar is when a navigation bar is shown vertically.
To do so, We can style the inside <a> tag inside the list because the list is by default shown vertically so we just have to style the list a little bit.
Now we will see Example - 
Example - 
 
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li a {
  display: block;
  width: 70px;
  background-color: rgb(0, 255, 221);
}
  </style>


  <link rel=
  <title>Document</title>
</head>

<body>
  <header>
    <nav class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact us</a></li>
            <div class="search">
                <input type="text" name="search" id="search" placeholder="Search this website">
            </div>
        </ul>
    </nav>
</header>
</body>

</html>

 
Output - 
Explanation - 
  • We used display : block for displaying links as block elements.
  • Width to 70px because the element takes full width by default.
Example 2 - 
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 350px;
  background-color: #f1f1f19d;
}

li a {
  color: black;
  display: block;
  text-decoration: none;
  padding: 7px 1px;

}

/* color change on hover */
li a:hover {
  background-color: rgba(200, 185, 230, 0.932);
  color: rgb(240, 240, 240);
}
  </style>


  <link rel="stylesheet" href="sample.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Document</title>
</head>

<body>
  <header>
    <nav class="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact us</a></li>
            <div class="search">
                <input type="text" name="search" id="search" placeholder="Search this website">
            </div>
        </ul>
    </nav>
</header>
</body>
</html>
Output -