Create a Vertical menu & Horizontal Navigation Bar using HTML CSS

In this tutorial, I explore two different methods for creating a Vertical menu & Horizontal Navigation Bar using HTML CSS. The snippet is responsive.

First, we will learn how to create a Horizontal Navigation Bar using HTML CSS.

The HTML Code for Horizontal Navigation Bar

Horizontal Navigation Bar

Let’s start with the HTML. We have a simple unordered list <ul><li></li></ul>  of hyperlinks. Each list item has a classname.

We will be clearing out the margin and padding on the body.

Subsequently, we’ll style the list to hide the bullets and provides it a background color. Clearing the margin will make it hug the top of the page which we need.

create a Horizontal Navigation Bar using HTML CSS.

We will write the style CSS for ul inside the #navmenu.

The CSS code

Final code: The following is the combination of all of the above HTML and CSS code snippets.

Navigation Bar | HTML CSS3 Tutorials

Creating the Vertical Navigation bar (Vertical menu)

Vertical Navigation bar

Now we will write the HTML and CSS code for the vertical navigation bar. The HTML code looks like.

To create a vertical navigation bar, we can style the <a> elements inside the unordered list <ul>.

display: block; – Displaying the hyperlinks as block parts make the entire hyperlink area clickable.

active class: Add an “active” class to the hyperlink to highligt the current page.

CSS code

Conclusion

We hope the vertical navigation bar using HTML and CSS is quite a simple tutorial.

Read also

How to design Bootstrap Vertical Tab

How to Create Bootstrap 5 Cards Templates

Create a Vertical menu & Horizontal Navigation Bar using HTML CSS