PDA

View Full Version : How to achive bouncing Menu with DHTML and slideUp?



SynhtexA
05-18-2011, 11:51 PM
Dear all,

I watched a website and I love its menu:
http://www.behringer.com

I would like to have similar menu for my site. I tried to understand how it works reading the code in that page and I found something. Honestly I tried something but the effect I have is slightly different from the wanted one.

Here the Code I isolated in order to be able to reproduce that wonderful "bouncing" effect when you pass the mouse over the menu.

The problem is that with this code, When you pass the mouse over the write "LINK" the icon is displayed but without any bouncing. Just it looks alike a curtain is taken away.
What's wrong with please?
Could you help me ?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<style type="text/css">

#navigation{
position: relative;
width: 450px;
height: 80px;
margin-top: 25px;
}
#navigation div{
position: relative;
}
.blindNav {
height: 56px;
}
.navi {
margin-left:0px;
}

a.textNav div{
color: #666666;
}
a.textNav:hover div{
color: #666666;
text-decoration: none;
}
a.textNav:active div{
color: #666666;
text-decoration: none;
}

#navsupport {
display: block;
/* margin-left: 15px; */
width: 48px;
height: 68px;
float:left;
}

#navsupport span {
display: none;
}

#navsupport .blindNav div {
position: relative;
top: -20px;
height: 56px;
width: 53px;
background: url("icon.png") no-repeat 0 0;
}
</style>




</head>
<body>

<div id="navigation">
<a href="" title="Products" class="textNav" style="text-decoration:none;">
<div id="navsupport" class="navi">
<div class="blindNav">
<div class="unitPng"></div>
</div>
<div class="navText" height="13">LINK</div>
</div>
</a>

</div>
<script type="text/javascript">

// Sets up the content build inside of the shadowbox
$("a[rel*='shadowbox']").mouseup(function(){buildProductsPOPUP($(this).attr("title"));});

// Set popup icons to the off state
$('.textNav .navi .blindNav .unitPng').hide();

// Attach the mouseover events to the popup icons
$('.textNav').bind("mouseenter",function(){
$(this).children(".navi").children(".blindNav").children(".unitPng").slideDown(200);
}).bind("mouseleave",function(){
$(this).children(".navi").children(".blindNav").children(".unitPng").slideUp(200);
});

</script>


</body>
</html>