By
inspiration: http://series.canalsat.fr
Navigation is a subject that fascinates many web designers and here at Web Designer HQ we are obsessed with discovering unique uses of navigation.
Canalsat has released a micro site to show off the series’ that it has aired on its channels. The site is really just a giant list of links, but it’s what Canalsat has done with this that makes it so interesting.
The background of the site is an image but it’s subtly faded so that it remains in the background. When the user rolls over one of the links for the series, the background changes by fading in a new background image and making it scale down in size. The effect works very nicely and makes full use of the background without taking over or distracting from the links in the foreground.
Get started
We are going to create background transitions between images just like on the Canalsat Series website. In the body section of your page add the following tags. Here we are creating a <div> that holds the images and the links in an unordered list.
001 <div id=”bg”> 002 <img id=”bg-one” src=”images/wsi2.jpg” /> 003 <img id=”bg-two” class=”hidden” src=”images/wsi3.jpg” /> 004 <img id=”bg-three” class=”hidden” src=”images/wsi.jpg” /> 005 <ul> 006 <a href=”#”><li id=”one”>Link One</li></a> 007 <a href=”#”><li id=”two”>Link Two</li></a> 008 <a href=”#”><li id=”three”>Link Three</li></a> 009 </ul> 010 </div>
Style the content
We need to style the content correctly to make it work, so add these tags to the head section of the page. Here we position the background element, which could easily be 100% the size of the browser. We also position the images and hide all of them but one.
001 <style>
002 #bg {
003 position:relative;
004 height:281px; width:450px;
005 margin:0 auto;
006 background: #000;
007 }
008 img {position:absolute;left:0;}
009 .hidden {display: none;}
Position the menu
Over the top of the images we add the menu, which is the unordered list. Here we position it centrally with a white border underneath it. We’ve added a simple rollover to the actual list but you could also make use of CSS transitions in here too.
001 #bg ul{
002 width:450px;
003 position:absolute;
004 list-style: none; text-align: center;
005 left:0; margin: 0; padding: 0;
006 }
007 a {text-decoration: none; color: #fff;}
008 li {padding: 20px; border-bottom: 1px solid #fff;}
009 li:hover {background: #000;}
010 </style>
011
Start the JavaScript code
Before the closing body tag, let’s link up to jQuery and then we’ll run a ‘document ready’ function to ensure the document has loaded. Here we are grabbing the first background as that is currently displayed – when we rollover other menu items this will fade out.
001 <script src=”js/jquery.min.js”></script>
002 <script>
003 $(function() {
004 var lastOver = $(“#bg-one”);
005 var over;
006
Add the <div> tags
Now we detect if the mouse has rolled over any of the list elements. If so, we grab the current one and fade in the appropriate background while fading out the last background on display. Save this and test in the browser to see it working properly.
001 $( “li” ).mouseover(function() {
002 over = “#bg-”+this.id;
003 $(over).fadeIn(“slow”);
004 lastOver.fadeOut(“slow”);
005 lastOver = $(over);
006 });
007 });
008 </script>
009
