Creating a Responsive Navigation Bar
By Jigna Kotecha
Why is it really crucial to have an attractive navigation bar for your website?
1. It exists on every single page of a website.
2. It guides the users beyond the homepage.
So, here is the blog to create an engaging horizontal navigation bar that changes background-color and amplifies text on hover.
Click on the link to see what we are trying to create- http://www.composingdigitalmedia.org/s17_dmtp/webs/jik//Navigation.html
Step 1: A navigation bar is the list of pages on a website. So, we will use <ul> and <li> tags to create a list of pages.
Here is our basic list:
Step 2: Now, we will make these list items links that will direct us to other pages on our websites.
Our list with links:
Step 3: To make the above list more stylish, we’ll use the <style> tag. The <style> tag goes under <head> tag. It is used to add attributes to the existing tags, <ul> and <li> tags in this case.
We will start by changing the font-family of our unordered list:
The font of our list is now Arial:
Step 4: We will now change the size of the text, align it to center, and remove the bullets. We will also set margin and padding to 0 to make sure that our design remains consistent in all the browsers.
Now, our navigation bar now appears at the center of our web page:
Step 5: To convert our list into a horizontal navigation bar, we will change the display, position, and behavior of our list items.
It will look like this:
Step 6: Since these list items are hyperlinks, we will have to add attributes to <a> tag to remove the underline and change the color of our list items. We will also create space between the list items and wrap the text around each other.
Here is how our little more attractive nav bar looks like:
Step 7: To make our navigation bar responsive, we will add hover to our list items so that it changes the background color and increases font size when we move the mouse over them.
When we mouse over the list items, it will look like as below:
Here is our final code:
See how the final navigation bar here – http://www.composingdigitalmedia.org/s17_dmtp/webs/jik//Navigation.html
P.s. Since the code grew longer with each step, it became tougher to enhance the screen. Please click Cmd and + together to increase the size of the web page and view the code better.
~ by jignadmtp on February 5, 2017.