You now have the basic structure of the html menu (the menu items or pages in html and css). Now, we start shaping the code. We are going to use the HTML5 tag for navigation menus
HTML and, inside it, we write our html menu:In this way we obtain our basic menu. As you can see, this menu does not have no format and it is vertical. To make a menu in html and css more attractive, we must work on styling in CSS .
To make a navigation menu in HTML, first, we will change the background color of the menu, its width and the way it is organized with respect to the other elements of the web with the following code:
header { background: rgba(0,0,0,0.7); width: 100%; position: fixed; z-index: 100; }
The first line after the header is background
The next line is the width when making a navigation menu in HTML and we have set it so that it is seen across the entire screen, from side to side.
The attribute position: fixed
Finally, z-index
Next, we explain each of the code blocks within the HTML
tag:nav { float: left; }
With this CSS nav code we specify that the HTML navigation bar is aligned to the left of the page.
nav ul { list-style: none; overflow: hidden; }
Now we modify the style of the html navigation bar list from nav css. With list-style none
with the property overflow
With overflow: hidden
nav ul li { float: left; font-family: Arial, Helvetica, sans-serif;; font-size: 20px;
This nav css code snippet is very important while making a navigation menu in HTML. In it, we establish that the submenus or pages are displayed horizontally and not one below the other. This is achieved with the line float: left
The property font-family indicates what type of font the menus will have. In this case, there are 3 fonts in case any incompatibility problem arises.
The last line defines the font size of each element to make a navigation menu in HTML.
nav ul li a { display: block; padding: 20px; color: #fff; text-decoration: none; }
It’s time to work on the Anchor elements (a) or the links. First we will convert it into a block with display: block. padding which will visually improve our menu and reduce dimension errors.
with the property color text-decoration
nav ul li:hover { background: #eca023;
Finally, we select what color we want to see when we land on an element belonging to the process of making a navigation menu in HTML. with the property background
Now we have a decent HTML menu for our website. The result looks like this:
Obviously, we can configure many more options to make it more professional and error-free. However, these are the basic notions to make a Fully functional and user friendly HTML navigation menu .
Finally, we leave you the complete code of the HTML menu that we just created:
header { background: rgba(0,0,0,0.7); width: 100%; position: fixed; z-index: 100; } nav { float: left; } nav ul { list-style: none; overflow: hidden; } nav ul li { float: left; font-family: Arial, sans-serif; font-size: 16px; } nav ul li a { display: block; padding: 10px; color: #fff; text-decoration: none; } nav ul li:hover { background: #eca023; }
How to continue learning about HTML In this post you have learned how to make a navigation menu in HTML in a basic and simple way, but there is still much more to learn to sophisticate your code and make it even more beautiful and functional. To do this, you can learn to style using CSS, which will visibly improve the elements of your website. To continue training in this area, we recommend taking a look at our Full Stack Web Development Bootcamp where we will turn you into an expert developer in no time. Sign up!
por