Making a Beautiful Navigation Bar

Personalize Your Navigation Bar

We all know there’s nothing worse, and nothing more 90s than a simple, vertical, bullet-point navigation bar. In fact, people will probably leave your website immediately if they see this on your home page, especially if the links in that bulleted list are bright blue and turn red when clicked. *Mental cringe*. Today, it’s very simple to create a crisp, beautiful navigation bar that reflects your website’s content as well as your wonderful, competent, web-designing self.

The nav bar is of ultimate important (oh yes, we’re speaking in html slang now because we’re all experts right?—or at least we can pretend). It is the first thing visitors to your website see and it should appears on every page of your site. You want to be cognizant and conscious of your choices: choosing appropriate fonts, colors, and styles that are not only reflective of your personality but are also easy to see and use. I think, with nav bars and with all web design really, the key is to be subtle and simple. I designed my home page on my website with a simple navigation menu that utilized simple colors and animation. How did I do it you may ask? I’m not really quite sure, because it took me forever. This html stuff is tough, hence the lateness of this post. But I think we’re all starting to get it down.

I started with writing my html code, which I kept it pretty simple. I wanted to keep my home page as mostly minimalist to feature the home page banner I made in photoshop complete with Amelia Judith Ohm logo. I also like to keep everything in sections or containers or something to keep everything organized and keep the option open of adding a background color or alignment command to those separate sections. The nav bar html is something we went over in class so I won’t explain it too much. I’ll just say to make sure your links are linked to the write pages within your website. There’s nothing more frustrating for a user than to click on “Photo” and you end up on a personal blog. Here is my HTML:

Image

On to the CSS code. First, I wanted to make sure my nav bar was in the center of my screen with centered text in a horizontal line. To do this I first specified {text-align: center;} under ul to center my text. I then centered the entire container holding my nav bar by specifying {left:auto; width:100%;} this trick ensures that your entire nav bar will be centered on the screen. Next I specified {display:inline-block;} under li to get my navigation buttons in a horizontal line as opposed to a vertical list.

Next came the fun part. To get the nav bar to be interactive I utilized the pseudo classes of a (a:link hover active visited) to personalize how my links interact with visitors to my site. The first thing I did was have my links slightly scale up when hovered over and clicked. I kept this scale up very subtle so it didn’t look tacky. To do this I first specified that the links should start out at their normal size, and when interacted with the interaction should “ease-in” and take half a second to complete. Here’s the code:

a {

-webkit-transform: scale(1);

-webkit-transition-timing-function:ease-in;

-webkit-transition-duration: .5s;    }

I then made a pseudo class of a for when it is hovered over and active. Here is the code:

a:hover, a:active {

background-color:#9A9293;

-webkit-transform:scale(1.01,1.01);

-webkit-transition-timing-function:ease-out;

-webkit-transition-duration: .25s;
}

This code specifies that when hovered over or active the links should over the links should take on a new color (I chose a light gray) and should scale up by .01. When they are no longer being hovered over the links should “ease-out” back to their original appearance and this transformation should take one quarter of a second.

Here’s how my entire CSS for the nav bar ended up looking:

Image

I enjoyed working with this code because it was easy to write and tweak, making it a great skill for us beginning coders to have. I hope one or two of the tools I used can help make your nav bars beautiful and modern. Here are some shots of the code in action. I made the banner in photoshop as I mentioned. It seems to be struggling to work online–I’m still working out some bugs–but hopefully  my live website will look just like this representation very soon.

Image

Image

Image

Happy coding

ao

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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