Blooper Reel: Animating a navigation bar using jQuery

It’s often said that we can learn from our mistakes, so I thought it would be helpful to track some of my trials and errors as a web developer—both for future reference and for laughs. In the first of many “Blooper Reels” I hope to share with you, I’ll go through the steps I took to make a simple animated navigation bar using jQuery. 

Here is a single-page website I created as part of my mandatory prep work for HackerYou. After taking a workshop  in August about the wonders of jQuery, I used this site as a blank canvas for my JavaScript experiments.

D4D

The first addition I made was a pop-up message thanking visitors who submitted their email address to a mailing list. I ended up sharing this #NewbieWin on Twitter, and it was later retweeted by JavaScript Digest!

mailingList

I then tackled something a little more ambitious: making an animated navigation bar that slid into and out of the browser window. The jQuery events and methods were not too difficult to figure out, but I still encountered two issues that called for revisions to my HTML and CSS documents:

1) Setting the initial position of the navigation bar:
When the website loads, the navigation bar should be placed in the position from which it will slide down into the browser. Since the nav bar was 50px high, I thought I should assign its top margin a value of -50px. While this succeeded in positioning the element outside of the browser window, I noticed that the bar was partially visible when the browser window was shrunk below a certain width. So I increased the top margin to -100px (and applied the same value to the corresponding jQuery method) to ensure the nag bar remained invisible until it was called by the user.

2) Unintended effects:
I wanted to position an icon at the top-left corner of the website that, when clicked, would call the jQuery method that made the navigation bar visible. The first thing I did was insert two elements immediately before the nav element in my HTML document: an image tag that linked to the menu icon, and an <h5> element that would appear when the cursor hovered over the icon. I adjusted the floats and margins of each element accordingly, and included the jQuery events and methods that caused the <h5> element to fade into view and the navigation bar to slide into the browser when prompted by the user.

menuIcon-1

My code seemed to work, but it wasn’t flawless; whenever the <h5> element appeared, my content was pushed downward and created a small margin between the content and the top of the browser. I needed to think of a way to keep my content div in its place.

One of the first solutions that came to mind was enclosing the menu icon and the <h5> element in a div. After giving the div its own class and transferring some CSS positioning properties from one rule to another, everything seemed to work as it should.

The Final Results

Here is my revised markup:

finalHTML

Here is the jQuery:

finaljQuery

And this is how it looks in a browser when…

  1. the cursor is not hovering over the menu icon;state1
  2. the cursor hovers over the menu icon;state2
  3. when the user clicks the menu icon.state3

I’m certainly not in a position to declare that this is the right and only way to achieve these effects. Please leave a comment to share any suggestions or techniques that you’ve found helpful!

——-

About the site:

HackerYou required all incoming students to complete three websites before the start of the bootcamp, one of which had to be designed as a single page. As a self-proclaimed sentimentalist, I chose to dedicate this project to the academic community I was leaving behind and the two forms of development that were competing for my heart’s attention: web development and international development.

Thus, the idea for “Devs for Dev” was born. Simply put, Devs for Dev is the conference of my dreams. It brings together web developers (“Devs”) with the leading minds in international development (“Dev”) to create innovative, tech-oriented tools that promote sustainable socioeconomic change around the world.

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