How to Create Vertical Navigation Bar in HTML

How to Create Vertical Navigation Bar in HTML

In this article, You are going to learn about HTML Vertical navigation bar. I will show you how to code for Vertical navigation bar in HTML and CSS. In which CSS properties will be used to give your navigation a beautiful view of the layout design.

As In this picture below you can see the Vertical Navigation Bar Picture Example. In a New Arra Website Design Concepts also using Vertical layout navigation bar.

Vertical Navigation bar

Vertical navigation bar HTML Code for Above Image

<nav id="nav_list">
 <ul>
 <li><a href="index.html"</a></li>
 <li><a href="tickets.html">Get Tickets></a></li>
 <li><a href="members.html" class="current">Become a members</a></li>
 <li><a href="about_us.html">About Us</a></li>
</ul>
</nav>

In the above HTML Code, you can see. We used unordered list of tags <ul></ul> with the list of items.
Which are the child items of unordered list. And we also use <nav></nav> tag which is tha parent of <ul></ul> and <li></li>. It’s very important in our html code.

Vertical Navigation Bar CSS Code for Above Example

* {
 margin: 0;
 padding: 0;
}
#nav_list ul {
 list-style-type: none;
 margin-left: 1.25em;
 margin-bottom: 1.5em;
}
#nav_list ul li {
 width: 200px;
 margin-bottom: .5em;
 border: 2px solid blue;
}
#nav_list ul li a {
 display: block;
 padding: .5em 0 .5em 1.5em;
 text-decoration: none;
 font-weight: bold;
 color: blue;
}
#nav_list ul li a.current {
 background-color: silder;
}

Short Details of above code

  • The Html for a vertical navigation bar is best coded as a series of <a> elements with the li elements of an unordered list.
  • To make the entire box for a link clickable, you can set the display property for the <a> elements to block and use padding to provide the space around the links.
  • To show the users what page they’re on, it’s a good practice to highlight the current link. One way to do that is to apply a different background color to it.

If you want to learn HTML and CSS from start as a beginner you can start learning from our video course of Website Designing.

Another Different way to Create Vertical Navigation Bar in HTML

This is the other way of creating vertical navigation In which I show you a live video lecture here.

Share With Your Friends Plz

One Reply to “How to Create Vertical Navigation Bar in HTML”

  1. Thanks for the great tips! I do have a question however
    that I think you could probably answer. I was wondering, What are some good projects/ideas
    in web development that a beginner can start with to take
    his/her skills to the next level? Any insight would be greatly appreciated!

Leave a Reply

Your email address will not be published. Required fields are marked *