How to create a responsive Navigation Bar with HTML, CSS and jQuery— step by step
HTML first
The tag used for the navigation bar is the tag, so we’ll start from there. We just need to open and close the nav tag and leave some space in between to add all the other tags.
Now that we have that in place, we can add our list of links.
To create a list we can use the tag, that stands for “unordered list” ;
it will be the container for our “list items” () .
Then, we can start adding our list items that will contain the links to our website main sections (the 4 sections I was talking about before).
<!-- list item one -->
<!-- list item two -->
<!-- list item three -->
<!-- list item four -->
For each list item we need to add the name of the corresponding section, but also make sure that once the user clicks on it, the page will scroll down until it reaches the related section. This can be accomplished with the tag or “anchor tag”. You can put each anchor tag inside the list item and then write the name of the section inside the anchor tag.
<!-- link one -->
About Me
<!-- link two -->
Projects
<!-- link three -->
CV
<!-- link four -->
Contacts
At this point we will have something like this.
Doesn’t look like a navigation bar yet, I know, but that’s almost all the HTML we need in order to create it, after that it’s all just about styling it!
Now, to make those links clickable we need to add to our anchor tags an “href” attribute. This attribute will contain the id of the section to link, with this syntax “#correspondingId”.
Let’s imagine that we have 4 sections with id respectively: #aboutMe, #projects, #cv and #contacts and let’s add these id in our anchor tags via the href attribute.
<!-- link one -->
About Me
<!-- link two -->
Projects
<!-- link three -->
CV
<!-- link four -->
Contacts
Our navbar will look like this:
It’s time to style it a little bit.
Then comes CSS
I bet you feel an uncontrollable urge to get rid of those bullet point, am I right? If the answer is yes, don’t worry, this is the next thing we are going to do. We just need to write in our CSS file the following 3 lines, which meaning is “all my list item don’t need to have a list style”.
li{
list-style-type: none;
}
Now let’s get rid also of that underline, to do that we can add this other 3 lines in our CSS:
a{
text-decoration: none;
}
Let’s imagine that we are building an horizontal navbar and we want it to take the entire width of the screen, we can do this adding to the nav tag a property “width: 100vw” where 100 means 100% and vw means viewport width, so 100% of the viewport width.
nav{
width: 100vw;
}
At this point you may not notice any difference, but if we add a background color property to our nav tag and set it to a color of our choice, for example
nav{
width: 100vw;
background-color: #D6EFFF;
}
The reasons why it might appear a little annoying white space along the sides of our navigation bar is because some elements like body or ul have a default value for margin. Plus, if you don’t like that indentation for the list, you can also add padding: 0 to ul.
ul{
margin: 0;
padding: 0;
}
body{
margin: 0;
}
Our navbar will now take the entire width.
It’s time to place that links in a row, this can be done in different ways. Here are 2 of them:
adding display: inline; to li
or
2. adding a property of display: flex to ul
I’ll proceed with the second option, because it will gives us more flexibility (pun intended) when we will go to make our navbar responsive.
ul{
margin: 0;
padding: 0;
/*this option by default dispose the weather during a row (flex-direction: row)*/
display: flex;
}
Now we need to space those list items, and we can do this by setting a margin of our choice, I suggest you use a multiple of the viewport width like we did with the width of the nav tag. I’ll use a margin of 2vw for the left and right side.
i{
list-style-type: none;
/*when I specify 2 values to margin, the first one is for the top and bottom side, the second for the left and right side*/
margin: 0 2vw;
}
We can also set the font size to a multiple of the viewport, in this case I prefer using a multiple of the viewport height, analog to the viewport width and indicated with vh.
li{
list-style-type: none;
margin: 0 2vw;
/* our font-size are going to be 3% of the peak of the viewport */
font-size: 3vh;
}
Now, if you want to create some space on the top and bottom of our navbar as well, you can add a little padding to our elements. You can also remove that blue default color, I’ll put for example some black.
a{
text-decoration: none;
/*below I changed the color*/
color: black;
/*I added some padding*/
padding: 2vw;
/*also changed the font family but that's totally irrelevant*/
font-family: monospace;
}
Now it would be cool if, everytime we hover over the name of the section that would be highlighted somehow.
No comments: