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

screen-shot-2017-02-04-at-11-57-28-pm

screen-shot-2017-02-05-at-12-00-11-am

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.

screen-shot-2017-02-05-at-12-16-23-am

Here is our basic list:

 screen-shot-2017-02-04-at-10-37-06-pm

Step 2: Now, we will make these list items links that will direct us to other pages on our websites. 

screen-shot-2017-02-05-at-12-12-34-am

Our list with links:

screen-shot-2017-02-04-at-10-11-08-pm

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:

screen-shot-2017-02-05-at-12-22-39-am

The font of our list is now Arial:

screen-shot-2017-02-04-at-10-48-29-pm

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.

screen-shot-2017-02-05-at-12-22-07-am

Now, our navigation bar now appears at the center of our web page:

screen-shot-2017-02-04-at-11-05-09-pm

Step 5: To convert our list into a horizontal navigation bar, we will change the display, position, and behavior of our list items.

screen-shot-2017-02-05-at-12-25-07-am

It will look like this:

screen-shot-2017-02-04-at-11-38-27-pm

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. 

screen-shot-2017-02-05-at-12-26-06-am

Here is how our little more attractive nav bar looks like:

screen-shot-2017-02-04-at-11-50-51-pm

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. 

screen-shot-2017-02-04-at-11-56-42-pm

When we mouse over the list items, it will look like as below:

screen-shot-2017-02-04-at-11-57-28-pm

screen-shot-2017-02-05-at-12-00-11-am

Here is our final code:

screen-shot-2017-02-05-at-12-28-19-am

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. 

 

Advertisements

~ by jignadmtp on February 5, 2017.

7 Responses to “Creating a Responsive Navigation Bar”

  1. Best overall- this is a function that will make our ecology webpages organized, visually clean, and easy to navigate. Each step included images, HTML code, and instruction, to make the learning process concise and straightforward.

    -Judy

  2. Most engaging! This post was one of the easiest to follow with one of the best results, so much so that I immediately incorporated this into my own site after reading this DIY! So, thank you! -Leonard Santos

  3. Best Overall- I would also give this best overall. It’s simple, easy to follow, and incredibly useful and applicable to our own websites. The step by step descriptions with the pictures for each step really help out. Thank you for your work, and thanks for helping me with my own site! -Leonard Santos

  4. I thought this post was the most thoughtful because navigating a website is such a crucial feature to learn because easy accessibility is important. The way the process was explained was clear and concise and not intimidating at all for what seems like something that is difficult to create. -Ivana

  5. Best Overall – This tutorial is informative, useful, methodically laid out, easy to follow, and most importantly, ends up with a result that improves both the functionality and the appearance of a webpage.

  6. Best Overall-it was easy to read and contained information that i genuinely thought useful for the future. Great post!

  7. I think this post is the best overall. The content is really helpful in creating a clear structure of the website. The layout and instructions are also clear and step-by-step. I learnt a lot from it.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: