CSS Navigation Bar

Navigation Bar, Active, Vertical Navigation, Horizontal Navigation, Border, Types

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


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

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

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.

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved