What we will Create?
Let us start with a basic nav menu. I strongly recommend you to follow along in the code editor JSFiddle that is the way to learn more efficiently.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!Doctype html> <html> <head> </head> <body> <nav class="display-nav"> <a href="#">Home</a> <a href="#">About us</a> <a href="#">Portfolio</a> <a href="#">Contact Us</a> <a href="#">Team</a> </nav> </body> </html> |
Run this file and check how it looks like. Now we will add some CSS to make it more readable.
|
1 2 3 4 5 6 7 8 9 10 |
<style> nav{ background: pink; margin-bottom:2px; } nav a { background: lightblue; } </style> |
>>We will use padding so that the area to be selected in a link increases
|
1 2 3 4 5 6 7 8 9 |
nav{ background: pink; margin-bottom:2px; } .display-nav a { background: lightblue; padding:10px; } |
You will see how the padding is added to each link. So we can click on the text as well as the area covered by padding.
Key Points:
- You see although the padding is added to the links inside nav still the padding of nav element has not expanded around it. This is because this is the default behavior of an inline element.
- Change the property to inline-block to change this behavior.
|
1 2 3 4 5 6 7 8 9 10 |
nav{ background: pink; margin-bottom:2px; } .display-nav a { background: lightblue; padding:10px; display:inline-block; } |
Although this looks fine to me. But I still want to remove the extra space from each menu item. We can do this by setting the font-size to zero in the parent element
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
nav{ background: pink; margin-bottom:2px; } .display-nav{ font-size:0px; } .display-nav a { background: lightblue; padding:10px; display:inline-block; font-size:16px; } |
