Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
7th March 2013

Sticky navigation and simple layouts

Create a stick navigation system and pop-up menus as featured on The Next Web site

Sticky navigation and simple layouts

INSPIRATION: thenextweb.com

The web is now such a content-rich resource that the designer’s focus has inevitably moved from creation to consumption. The most successful sites, at least in terms of visitor numbers, are all centred on presenting content in an accessible and reader-friendly manner. This doesn’t mean that the design process is any less involved or that finessed details aren’t required, but providing a stage for the content to be showcased is the key – letting the design step back to highlight the information the visitor came for.
There are numerous techniques that can be used to help achieve this content-first strategy while retaining a user-friendly and intuitive layout. By minimising your colour palette, reducing page architecture to its basic form, and getting the design out the way you’ll be well on the road to a successful content consumption site.

CREATE PERSISTENT NAVIGATION

Set up your page
Create your HTML document with a header, content area and navigation column. Make sure the navigation column is within the content < div>, and appears as the first item within this < div> – we will float it to the left, so it must appear before any other elements that you add to the content < div>. Add some dummy content so you can test the scrolling, and make sure your page is longer than one window’s height!

Style it to suit
Add styles to suit your page design theme. Make sure the navigation < div> is set to float left, and has position:relative; applied to it. This will ensure that it scrolls and positions relative to the content < div>.

001 < style>
002 body {
003 margin: 0;
004 padding: 0;
005 background: #efefef;
006 font-family: helvetica, sans- serif;
007 font-size: 1.4em;
008 color: #fff;
009 }
010 #container {
011 position: relative;
012 width: 960px;
013 margin: auto;
014 border: 10px solid #fff;
015 box-shadow: 0px 0px 10px #999;
016 background: #fff;
017 }
018 #header {
019 position: relative;
020 height: 80px;
021 padding: 20px;
022 background: #FC0;
023 margin-bottom: 10px;
024 }
025 #content {
026 position: relative;
027 background: #F93;
028 height: 1200px;
029 }
030 #nav {
031 position: relative;
032 float: left;
033 width: 260px;
034 padding: 20px;
035 background: #6CF;
036 margin-top: -10px;
037 height: 100%;
038 border-top: 10px solid #fff;
039 border-right: 10px solid #fff;
040 }
041 

Create your script
We’ll use jQuery to swap the positioning to position:fixed for the navigation when the page scrolls beyond the top of the navigation bar positioning. Install jQuery to your page, and add the script below to work out where your navigation bar is on the page, then automatically set it to a fixed position once the page is scrolled. The extra ten pixels we’ve allowed is to take account of the border that we’ve applied to the navigation column.

001 $(document).ready(function(){
002 fromtop = $(“#nav”).offset().top;
003 $(window).scroll(function(){
004 if($(window).scrollTop()>fromtop) {
005 $(“#nav”).css({position:”fixed”,marginT op:0-(fromtop+10)});
006 } else {
007 $(“#nav”).css({position:”relative”,marginTop:-10}); 
008 }
009 });
010 });

Test in your browser

Test your page in a variety of browsers. The navigation bar should be positioned to the left of the content area, beneath the header section of the page. Once the page begins to scroll, the navigation will scroll until it reaches the top of the window. Once at the top of the window it will stick in position until you scroll back up to reveal the header area of the page.

DESIGN POP-UP NAVIGATIONS OPTIONS

Create the HTML
Start off by creating an area to pop up when the title of the navigation bar is clicked. Add content as required, or simply fill it with placeholder content for testing purposes. Make sure to position it within the navigation < div> adjacent to the title, and wrap a < div> tag around both the title and the popup.

001 < div id=”hiddennav”>
002 < h2>Nav Title
003 < div id=”navpop”>
004 Enter nav pop-up content here
005 < div>
006 < /div>

Style to suit
Using CSS, style your pop-up section to match your page design. We’ve opted for a simple complementary colour scheme to set the popup apart from the rest of the navigation bar, but still feel connected.

001 #navpop {
002 display: none;
003 border: 5px solid #fff;
004 background: #09F;
005 padding: 10px;
006 font-size: 0.7em;
007 box-shadow: 0px 0px 5px #09F;
008 }

Create the pop-up effect
Add a final style so that when the #hiddennav < div> has a hover state, the #navpop < div> is set to display block. If you haven’t already done so, make sure the #navpop < div> is set to display:none by default. Test in your browser, and you should now have a functioning popup! If you have content beneath the navigation title, set the #hiddennav < div> to be positioned absolutely to prevent the pop-up pushing other content down the page.

001 #hiddennav:hover #navpop {
002 display: block;
003 }

  • 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://krishnasolanki.co.uk/ Krishna

      This is strangely exactly what I am looking for. Found a few examples the last few days, but going to give this a try! bookmarked for my redesign and aso to implement on my client site – if it suits!
      perfect timing!! :)