Horizontal Navigation Bar
Vertical Navigation Bar
A Navigation bar or navigation system comes under GUI that helps the visitors in accessing information. It is the UI element on a webpage that includes links for the other sections of the website.
A navigation bar is
mostly displayed on the top of the page in the form of a horizontal list of
links. It can be placed below the logo or the header, but it should always be
placed before the main content of the webpage.
It is important for a
website to have easy-to-use navigation. It plays an important role in the
website as it allows the visitors to visit any section quickly. We can create
navigation bar as:
- Horizontal navigational bar
- Vertical navigational bar
Horizontal Navigation Bar
The horizontal navigation bar is the horizontal list of links, which is generally on the top of the page. Let's see how to create a horizontal navigation bar by using an example.
See the Pen Horizontal Navigation Bar by PANKAJ (@pankkap) on CodePen.
Code Explanation:
list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
Set margin: 0; and padding: 0; to remove browser default settings
float: left; - use float to get block elements to slide next to each other
display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc. if you want)
padding: 8px 16px; - Since block elements take up the full width available, they cannot float next to each other. Therefore, specify some padding to make them look good
background-color: orange; - Add a gray background-color to each a element
Vertical Navigation Bar
It is recommended to use vertical navigation when your
application requires global navigation that is displayed on the left. While
vertical navigation menus generally consume more space than their horizontal
counterparts, they have become more popular as desktop monitors move to
wide-screen formats. To build a vertical
navigation bar, you can style the <a> elements inside the list as display
block element.
See the Pen Vertical Navigation Bar by PANKAJ (@pankkap) on CodePen.
Code Explanation:
- list-style-type: none; - Removes the bullets. A navigation bar does not need list markers.
- Set margin: 0; and padding: 0; to remove browser default settings
- display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)
- width:
60px; - Block elements take up the full width available by default. We
want to specify a 60 pixels width
Full Responsive Navigation Bar using Html and CSS
Link to Videos: https://youtu.be/0Fu1ANE1Sxk