Navigation Bar


Navigation Bar

Navigation bars help us to move quickly from one webpage of a website to another. It is a collection of links. CSS provides you to create good looking menus/ Navigation Bars are the list of Links. By clicking o the links, you can move from one page to another very quickly, just in one click.

We need an HTML standard base to create a navigation bar. You have to write an HTML code first, then you can give designs to your Navigation Bar with the help of CSS, but you must have to create a table or list in the HTML, then you can decorate the navigation bar as per your requirement.

Using “list-style-type: ****;” you can add bullets, square, circles, etc., to your navigation bar. You can set margin with the “margin: *;” attribute. You can also do padding for your bar by using “padding: *;” attributes.

It can be of two types:

  • Horizontal Navigation Bar: This type of bar is placed at the top of the webpage.
  • Vertical Navigation Bar: This type of bar is placed on the left side of the webpage.

Note: There are two types of the navigation bar; by clicking on one navigation bar, the link will open on the same page, and in another, the link will open on the second page.

  • Horizontal Navigation Bar:This type of bar is placed at the top of the webpage.

    Example:

    <html> <html lang="en-US"> <style> ul { list-style-type: none; margin: 0; padding: 0; } </style> </head> <body> <h1>Knowledge2life</h1> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>

    OUTPUT:

    Knowledge2life