A navigation bar is a link to appropriate sections or pages on a website that helps readers in traversing the online document. The navigation bar can be implemented in a number of ways, namely, horizontally or vertically, or fixed or dynamic.
Below we see how to convert boring HTML menus into attractive navigation bars.
Vertical Navigation Bar
Step1: Mostly, the navigation bar is created by using list of links. So using <ul> and <li> elements makes perfect sense.
Step2: Use the list-style-type: none; to remove the bullets of the list. And set the margin and padding is zero to remove the browser default settings.
After for vertical navigation set display: block property to <li>.
Step3: Now, set the width to <ul> items otherwise it takes full width and adds background-color. For removing the underline of list item set text-decoration: none; also set the color property to <li> item.
Step4: By using :hover pseudo-class change the background color of the list item where user mouse over and also set the “active” class to current link to know the which page is on.
Horizontal Navigation Bar
Step1: Mostly, the navbar is created by using list of links. So using <ul> and <li> elements makes perfect sense.
Step2: Use the list-style-type: none; to remove the bullets of the list. And set the margin and padding is zero to remove the browser default settings.
For horizontal navbar use float: left property to <li> item. And set display: block property to a of <li> item.
Step3: Set the background-color to <ul> for full-width background-color. For hover effect set background-color on :hover pseudo-class. and also set the active class to know the active menu to the user.
Step4: To give the divider in between the links use the border-right property to <li> item.
Fixed Navigation Bar
For a fixed navigation-bar, set the position is fixed. If you want to the fixed navbar at the top then set top: 0; and for bottom fixed then bottom:0.
Sticky Navigation Bar
For a sticky navbar, set the position is sticky.
Responsive Top Navigation Bar
By using media-query, you can design a responsive navigation bar as well as a website also.
This example shows how to use media-query and makes responsive a top nav bar.