CSS Navigation Bar

The CSS navigation bar is used to change OR design a normal HTML menus bar into good-looking and attractive navigation menu bars.

• The navigation is important for any web site to create a menu bar.
• A navigation bar needs standard HTML as a base.
• It's very easy to create a horizontal and vertical menu bar with the help of CSS navigation.

Needs Of CSS Navigation Bar

Basically, a navigation bar is a list of links, so we can use the <ul> and <li> HTML elements makes perfect navigation bar:

Example of Navigation Bar

Output

• Home
• Jobs/Campus Drive
• Test
• Training

How To Remove Bullets?

Use list-style-type: none; to remove the bullets to the navigation bar; The margin: 0; and padding: 0; is use to remove browser default settings:

Example of Remove Bullets

ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
  }

Output

• Home
• Jobs
• Test
• Training

Types of Navigation Bar

There are two types of navigation bar used in a web page:

• Vertical Navigation Bar
• Horizontal Navigation Bar

Vertical Navigation Bar

The vertical navigation bar is used to build OR create a vertical menu bar on a web page; you can style the <a> elements inside the list.

Example of Style <a> inside List

ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
  }
li a {
     display: block;
     width: 100px;
     padding: 5px;
     color: #fff;
     background-color: #888888;
  }

Discription of Example

• display: block; Use to display the links as block element makes the whole link area clickable with width it looks like a box as you can see the below example.
• width: 100px; It means that the width of the links is 100px and the block elements take up the full width available by default.
• padding: 5px; It used to create 5px padding surrounding the links.

Output

• Home
• Jobs
• Test
• Training

Active Navigation Link

.active {
     color: #fff;
     background-color: #888888;
  }

Center Links

li {
     text-align: center;
     color: #fff;
     background-color: #888888;
  }

Add Borders of Links

ul {
     border: 1px solid green;
  }
li {
     text-align: center;
     border-bottom: 1px solid green;
     color: #fff;
     background-color: #888888;
  }

Horizontal Navigation Bar

It is used to create a horizontal menu bar on a web page; There are two ways to create a horizontal navigation bar:

1. Inline List Items
2. Floating List Items

Inline List Items

Build a horizontal navigation bar by using an inline list item to specify the <li> elements as inline.

Example of Inline List Items

li {
     display: inline;
  }

Discription of Example

• display: inline; Use to display the links inline elements makes the whole link area clickable.

Floating List Items

Build a horizontal navigation bar by using an floating list item to float the <li> elements.

Example of Inline List Items

li {
     float: left;
  }
a {
     display: block;
     padding: 5px;
     color: #fff;
     background-color: #888888;
  }

Discription of Example

• float: left; Use to float LEFT the block element to slide next to each other.
• display: block; Use to display the links as block elements makes the whole link area clickable.
• padding: 5px; Use to give padding to the links as block elements.
• background-color: #888888 Use to give a background color of the links as block elements.