Guest Author: Christina Wheeler

Introduction

When Mark tweeted about the Avatar movie navigation and asked if I was up to take on re-creating the navigation for SharePoint I was thrilled. Being an old graphic designer and flash designer I was excited to start picking apart the navigation and figuring out how I could rebuild it for SharePoint.

Avatar’s Website

When you go to the Avatar site and click “Enter the Official Site” you are taken to a flash page that contains the sliding menu that I am attempting to re-create. Before I can attempt the re-creation, I first had to breakdown the behavior and functionality of their flash sliding menu.

1. Scrolling: The navigation scrolls to the right or left depending on where the cursor is place in the browser window. The speed of the scrolling also changes – the animation speeds up when the cursor is closer to the edge of the browser window and it slows down the further away the cursor is to the edge of the browser window.


2. Mouse Over: As the cursor moves over each box item, the box changes size, position, and a small boxed title appears above the box item.




3. On Click: When you click on a box item the content for that item appears above the navigation and the navigation boxes become more transparent.

My Approach

In this series I will attempt to re-create as much as I can of this navigation in SharePoint using jQuery tools and plug-ins. This series will be broken down into the following sections.

1. Avatar, the Movie: Navigation Re-creation | Part 1 – Scrolling Boxes
   1. Re-create the scrolling boxes (without content) using jQuery Tools Scrollable.
2. Avatar, the Movie: Navigation Re-creation | Part 2 – MouseOver Event for Boxes
   1. Create MouseOver event changing the box size, position, and add the boxed title.
3. Avatar, the Movie: Navigation Re-creation | Part 3 – Content for Boxes
   1. Create the content and behavior of the content loading in the boxes. Content will be created in SharePoint lists and libraries. jQuery and SharePoint Web Services will be used to query the content.
4. Avatar, the Movie: Navigation Re-creation | Part 4 – OnClick Event for Boxes
   1. Create OnClick event loading the content of the item onto the page.
5. Avatar, the Movie: Navigation Re-creation | Part 5 – Wrap Up

Next Steps

I am very excited about this series and I’m looking forward to what I will attempt to accomplish with this navigation re-creation. My goal is to accomplish as close to the same functionality of the current Avatar flash navigation as I can. What an exciting project to start for 2010!
Happy New Year everyone!

Guest Author: Christina Wheeler

Christina Wheeler is a Senior SharePoint Consultant for Summit 7 Systems and Founder of CM Portal Solutions, LLC based in Malvern, PA. With over 10 years of experience in the industry, Christina has a background in graphic design, web development, custom development, and has been working with SharePoint since May 2005. Christina has a strong passion for technology and photography who enjoys sharing and learning with the community.