Navigation- Portfolio website progress

I had decided that I would use the focal point of the top section of my website, my name, as the navigation bar itself. I created various rollover buttons using Photoshop, and saved each image separately, then used JavaScript to add them to my website.

homepagetemplate

Initially I found it a difficult task to align everything to the center of the page, however I discovered a simple solution, and that is to add my rollover buttons and images to a table.

Untitled

I believe the rollover buttons work very well, as they add a splash of colour to quite a simple website. I linked each of the buttons using the HTML code, to different sections of my website, therefor when clicked on, the page will scroll down to this section.  In order for the user to return to the main navigation bar from different sections of the page, I created a back to top button using Photoshop, which is fixed to the left corner of the page, and when clicked on will scroll back to the navigation bar at the top of the page. I found that when clicking on different links the page would jump down to that section, instead of scrolling down, therefore to make the scrolling smooth, I added a smooth scrolling option using  a combination of JavaScript and a jQuery plug in. This allows the user to see what content is being skipped over, giving her a clear sense of their current location on the page. This is the guide I used to add this function, and to download the plug in; http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/

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