Website Side Navigation

**Abbster22** · 09-29-2010, 09:10 PM

I was going to do a similar navigation system that is similar to this for a website. The only difference is that it may have pictures as the background and the tabs will go out further. I wanted to know if any one knows how to code in this navigation system?

http://nathanborror.com/

Any help is appreciated!

Thank you very much.

**azoomer** · 09-29-2010, 11:08 PM

Hi Abbster 22, here is an example of how you could do something like the site you link to

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Out Menu</title>
<style type="text/css">
#navigation {
height:240px;
left:0;
position:fixed;
top:0;
margin:0;
padding:0;
}
#navigation li { 
list-style:none;
width:70px;
}
#navigation li a {
background-position:100% 0;
background-repeat:no-repeat;
display:block;
height:80px;
margin-left:-280px;
overflow:hidden;
text-indent:-1000px;
width:300px;
}
#navigation .home a {
background-image:url("http://i26.tinypic.com/11l7ls0.jpg");
}
#navigation .about a {
background-image:url("http://i29.tinypic.com/xp3hns.jpg");
}
#navigation .contact a {
background-image:url("http://i30.tinypic.com/531q3n.jpg");
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
  
  /* Navigation */
  if ($('#navigation')) {
    var nav_resting_width = "-280px";
    var nav_hover_width = "-60px";
    var delay = 400;
    
    $('#navigation > li').each(function(e) {
      if ($('body').hasClass(this.className)) {
        $('a', this).stop().animate({marginLeft:nav_hover_width}, 600);
      }
      else {
        $(this).hover(function() {
          $('a', this).stop().animate({marginLeft:nav_hover_width}, 200);
        },
        function () {
          $('a', this).stop().animate({marginLeft:nav_resting_width}, 200);
        });
      }
    });
  }

  if (document.body.id == 'home_page') {
    $('#navigation > li').each(function(e) {
      $('a', this)
        .fadeTo(delay, .8)
        .animate({marginLeft:nav_hover_width}, 200)
        .animate({marginLeft:nav_resting_width}, 200);
      delay += 100;
    });
  } 
});

</script>

</head>

<body id="home_page">
<ul id="navigation">
        <li class="home"><a href="/" title="Home">Home</a></li>
        <li class="about"><a href="/about/" title="About">About</a></li>
        <li class="contact"><a href="/contact/" title="contact">Contact</a></li>
</ul>
</body>
</html>

It's by no means perfect, but it could get you started. The code is mostly from his site, but you can find the same jquery posted elsewhere on the web, f.ex here
I have edited it to get the tabs going further out and having some jpeg's as backgrounds. You can save the above code as an html document and open it your browser to see it in action.

**Abbster22** · 09-30-2010, 06:31 PM

Thank you so much! That was exactly what I needed!

Will definitely keep this code for in the future.

Thread: Website Side Navigation

Thread Tools

Search Thread

Website Side Navigation

The Following User Says Thank You to azoomer For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions