Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
5th December 2012

Single page navigation with HTML5 and JavaScript

Discover how to recreate the popular single page navigatinon technique using HTML5

Single page navigation with HTML5 and JavaScript

inspiration nationallgbtmuseum.org

One of the methods that designers have at times employed for a Flash-like user experience – without actually using Flash – over the past couple of years has been the simple single-page navigation approach. All the content of a website is loaded into one page, and rather than load new content when a button is clicked, the visible content area scrolls to the requested information in a linear fashion.

Create a single page layout

Arrange your content
Create your HTML document with multiple content areas. Position with absolute positioning, keeping all but the homepage outside the visible area of the page. Wrap a container < div> around all your content to act as a dolly for moving it around to become visible. Style each area to suit your design. The code for this step is on the resource disc.

Create the navigation
Add a navigation bar outside the container. Create a link to each different content area using the syntax < a href=”#contentareaname”>Content Name>< /a>. Each link should use the id name of the content area it points to – eg #homepage, #about-us, #contact-us etc. Arrange and style your navigation bar to suit, using fixed positioning and/or JavaScript to show and hide it if required.

001 < nav>
002 < ul>
003 < a href=”#homepage”>Home< /a>
004 < a href=”#about-us”>About Us< /a>
005 < a href=”#contact-us”>Contact Us< /a>
006 < /ul>
007 < /nav>

Create your script
The basic approach to moving the visible content area around is to intercept a click on the navigation bar, read the content area that needs to be displayed and apply an animation to move the container into a position where the correct content is visible. Start off by downloading jQuery and including it in your page. Add a normal document.ready() function.

001 $(document).ready(function(){
002 // when the document is ready to run code, this function will execute
003 });

Add a click handler
When a navigation button is clicked, we’ll get the target of the link and use it to work out how to position the container to show this content. We need to grab the href attribute of the clicked link, then use the value of this to find the offset of the content area in question. The code for this step is on the resource disc.

Animate into position
We’ve now got the offset values, so we’ll adjust the left and top margins for the container to animate the position of the visible portion of the container such that the requested content is pulled into the visible area of the page. As long as your content area is the same size as the visible area, this will be automatic.

001 // Animate the container into position
002 $(“#container”).animate({marginLeft:contentleft, marginTop:contenttop},1000);

This can be a great technique for achieving zero load times and a polished transition between different content elements, although it does require some forethought to avoid a slow-loading page, and overly simple design. Just because you opt for a single page layout, it doesn’t mean that you need to play it safe design-wise.

TECHNIQUE

Design a repeating pattern

Design your pattern
Create a new document 120 x 120px in Photoshop. In order to make your pattern repeat seamlessly, you need to ensure that any elements bleeding over the right hand edge wrap to the left edge, top to bottom, and so on. Use the Grids and Guides feature to help ensure everything aligns.
Single page navigation with HTML5 and JavaScript

Define your pattern
Once you’ve completed your pattern, select your entire canvas by choosing Select>All or pressing Cmd/Ctrl+A. Choose Edit>Define Pattern. Give it a name and click OK to save it as a pattern in Photoshop.
Single page navigation with HTML5 and JavaScript

Test your pattern
Create a new canvas inside Photoshop and use the Edit>Fill command to check that your pattern repeats successfully. Choose Pattern for fill type and select the pattern you created in step 2. If it isn’t seamless, return to step 2 and adjust to suit before testing again.
Single page navigation with HTML5 and JavaScript

INSPIRATION

The website uses the single-page technique to create a flowing feel. The page is split vertically, so as you navigate between sections the sides move independently of each other. The motion between pages is quick enough to lend a sense of urgency that is refreshing; designers often spend a great deal of time concerning themselves with user interaction, and lose sight of the goal to allow users to access the information on the page in the process! As well as the movement between content areas, the designers have employed beautiful geometric shapes and simple flat colour to create a unique feel for each content area, making it easy to identify which section of the website you’re in.

Single page navigation with HTML5 and JavaScript

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.mysirajgonj.com/ NIRMAL

      awesome tutorial.thanks.