How to Create HTML and CSS Navbar (Complete+Image)
Tutorial on how to create a navigation bar in HTML and CSS, both a simple navbar and a dropdown navbar
Navbar or navigation bar is one of the elements in HTML that is created to represent navigation links. Usually the navbar is used as a menu that contains general links on a website, such as home, about, contact us, and so on. And usually located in the header or footer of a website.
How to Create an HTML and CSS Navbar
Navbar in HTML there are 2 forms, namely a simple navbar and a navbar with a dropdown menu. To create a dropdown menu, of course, you must first understand how to make a simple navbar. Immediately, please see the explanation below.
1. Creating a Simple Navbar in HTML
The first step in creating a navigation bar is that you must already know what kind of design you want to make to make it easier for you in the coding process. This first method is how to create a simple navbar or navbar in general that does not have a dropdown menu in it. You have to use CSS to create the navbar.
Immediately, for example you want to create a navbar with 5 menus in it. As exemplified in the image below.
Then, the next step, please create a script in the tag
. Like the example script below.In the words Home, About, List, and so on, please adjust it to the menu you want. Then, you can replace the # symbol in the tag with the destination page when you click on the menu. Then, the next step is to create a CSS script. You can follow the sample CSS script below.
Explanation:
- a {text-decoration} is CSS for text in the navbar menu.
- ul {padding} to set the distance between menus in the navbar.
- li {display:inline} to make the navbar menu one horizontal line.
- li a:hover to change the color of each menu when the mouse is hovered.
- .navi to call the navi class selector.
To see an example of the results of the script above, please look at the image below.
2. Creating a Navbar with a Dropdown Menu in HTML
In addition to a simple navbar, you can also create other navbar designs, namely dropdown menus. Dropdown is a feature where when you hover your mouse over the nav link, a menu or list of other links will appear in the first menu or link. Immediately, first please make a script on the tag
like the example script below.Home News DropdownLink 1Link 2Link 3
Based on the example script above, the dropdown menu is on the Dropdown menu and the contents of the dropdown menu are Link 1, Link 2, and Link 3. Then, the next step is to create the CSS script. The following is an example of a CSS script that you can follow.
To find out where the CSS dropdown is, you can pay more attention to the section:
- .dropdown-content
- .dropdown-content a
Because when first run, CSS on selector dropdown-content display none. And when you hover it will turn into a block. The change will bring up the content dropdown-content a when you hover. And added other properties to make it neat.
The image below is the result of the display of the scripts above.
When you hover your mouse over the Dropdown menu, the dropdown menu will automatically appear. Like the picture above. good luck
So this article discusses how to create a navigation bar in HTML. You can create a navbar with or without a dropdown menu very easily. Please follow the steps above according to your website needs. Hopefully this article can be helpful and useful for you. Thank you
The rain lover and coffee connoisseur who likes to sit in daydream while dreaming of his dreams that will come true.
){kind=link}
Post a Comment for "How to Create HTML and CSS Navbar (Complete+Image)"