New Google type navigational menu on top ~ Menu Fades In

Menu “Fade In” effect in Google Search Page:

Google announced:

Now you see it, now you don’t!

12/02/2009 02:39:00 PM

You may have noticed that our homepage is sporting a new look. Today we’re excited to be releasing a new version of our classic homepage. The main feature of the new homepage is that it “fades in” — when the page first loads, it shows only our logo, the search box and the buttons. For the vast majority of people who come to the Google homepage, they are coming in order to search, and this clean, minimalist approach gives them just what they are looking for first and foremost. For those users who are interested in using a different application like Gmail, Google Image Search or our advertising programs, the additional links on the homepage only reveal themselves when the user moves the mouse. Since most users who are interested in clicking over to a different application generally do move the mouse when they arrive, the “fade in” is an elegant solution that provides options to those who want them, but removes distractions for the user intent on searching.

After seeing this I loved it and give a try for a sample code that give the same effect:

Left: Before the fade. Right: After the fade. Click the image for a closer view.

Here is the code I got in with help of JavaScript and CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

 <head>
 <title>Sample</title>
 <style type="text/css">
 body {margin: 0px; border: 0px; font-family:Arial, Helvetica, sans-serif; font-size:12px;}

 #navigationLinks { visibility:hidden;width: 100%; height: 20px; margin-top: 0px; border-bottom: 1px solid #a7bfe1;}

 #navigationLeft {float: left; clear: right; margin-left: 10px; width: 45%; height: 20px; text-align: left;}

 #navigationRight {float: right; width: 45%; margin-right: 10px; height: 20px; text-align: right;}

 </style>
 </head>
 <body>

 <div id="navigationLinks"><div id="navigationLeft"><a href="http://google.com">Web</a></div><div id="navigationRight"><a href="http://google.com">Sign In</a></div></div>
 <br><br><br><br>

<form action="http://www.google.com/cse" id="cse-search-box">
 <div>
 <input type="hidden" name="cx" value="010609918009350820642:z7j46se_80s" />
 <input type="hidden" name="ie" value="UTF-8" />
 <input type="text" name="q" size="31" />
 <input type="submit" name="sa" value="Search" />
 </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

<script language="javascript">
var x=0;
var TimeToFade = 1000.0;
document.onmousemove=google;

function google(){
if(x==0){
fade('navigationLinks');
}

}

function fade(eid)
{
x=x+1;
 document.getElementById("navigationLinks").style.visibility="visible";
 var element = document.getElementById(eid);
 if(element == null)
 return;

 if(element.FadeState == null)
 {
 if(element.style.opacity == null
 || element.style.opacity == ''
 || element.style.opacity == '1')
 {
 element.FadeState = 2;
 }
 else
 {
 element.FadeState = -2;
 }
 }

 if(element.FadeState == 1 || element.FadeState == -1)
 {
 element.FadeState = element.FadeState == 1 ? -1 : 1;
 element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
 }
 else
 {
 element.FadeState = element.FadeState == -2 ? -1 : 1;
 element.FadeTimeLeft = TimeToFade;
 setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
 }
}
function animateFade(lastTick, eid)
{

 var curTick = new Date().getTime();
 var elapsedTicks = curTick - lastTick;

 var element = document.getElementById(eid);

 if(element.FadeTimeLeft <= elapsedTicks)
 {
 element.style.opacity = element.FadeState == 1 ? '1' : '0';
 element.style.filter = 'alpha(opacity = '
 + (element.FadeState == 1 ? '100' : '0') + ')';
 element.FadeState = element.FadeState == 1 ? 2 : -2;
 return;
 }

 element.FadeTimeLeft -= elapsedTicks;
 var newOpVal = element.FadeTimeLeft/TimeToFade;
 if(element.FadeState == 1)
 newOpVal = 1 - newOpVal;

 element.style.opacity = newOpVal;
 element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

 setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

</script>
 </body>
</html>

See the exampe page

References:

[1.] http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation

[2.] http://googleblog.blogspot.com/2009/12/now-you-see-it-now-you-dont.html
kick it on DotNetKicks.com

About these ads