drop down menu

[goldensebbe]

Hi !
I'm trying to create a drop down menu like the one that you can find on this place http://www.ladygaga.com/default.aspx#!updates
Does anyone have a link to a good link or something to get me started? It's the drop down function ( the movemeent when you hold over the red bar at the top ) that I'm after.

[Sup3rkirby]

Firstly, I notice you have 2 topics for this exact question. No need to do something like that even if you aren't sure of the category you should post in.

Now, while this effect could be done using CSS, for compatibility reasons it would be best suited for javascript. I suppose in the end it mainly depends on your target audience and the browser(s) they use. If IE users aren't a concern you could simply use some CSS to get this done using hover classes and transitions.

.topBar {
  position: absolute;
  top: -50px;
  left: 0px;
  width: 100%;
  height: 50px;
  border-bottom: 4px solid #FF0000;

  transition: all 2s;
  -moz-transition: all 2s;
  -webkit-transition: all  2s;
  -o-transition: all 2s;
}
.topBar:hover {
  top: 0px;
}

That's just a basic example, but the functionality works in the same manor. To be fair, this would technically work in versions of IE since :hover is supported, but the change would be instant, rather than a smooth and gradual effect over 2 seconds.


So if you are instead looking for a more universal setup that is compatible across the board, some simple javascript would be your aim. You'd essentially use the same CSS class to initially position your top element, but add 2 javascript listeners to hover over and out of the element, providing a smooth and gradual dropdown effect.

<style type="text/css">
.topBar {
  position: absolute;
  top: -50px;
  left: 0px;
  width: 100%;
  height: 50px;
  border-bottom: 4px solid #FF0000;
}
</style>
<div id="topBar" class="topBar">Random Dropdown Content Here...</div>

<script type="text/javascript">
$topBar = document.getElementById('topBar');
$ddTimeout = 0;
$puTimeout = 0;
$aniDelay = 500;  // Delay for pulling the menu back up
$aniSpeed = 10;  // Speed to move the menu up/down
$aniStep = 1;     // Amount to move the menu by (less = smoother)
if(document.addEventListener) {
  $topBar.addEventListener("mouseover", function(){clearTimeout($ddTimeout);clearTimeout($puTimeout);_DropDown();}, false);
  $topBar.addEventListener("mouseout", function(){clearTimeout($ddTimeout);clearTimeout($puTimeout);$puTimeout=setTimeout("_PullUp()",$aniDelay);}, false);
} else {
  $topBar.attachEvent("onmouseover", function(){clearTimeout($ddTimeout);clearTimeout($puTimeout);_DropDown();});
  $topBar.attachEvent("onmouseout", function(){clearTimeout($ddTimeout);clearTimeout($puTimeout);$puTimeout=setTimeout("_PullUp()",$aniDelay);});
}

function _DropDown() {
  $top = parseInt($topBar.style.top);
  if(!$top) $top = $topBar.offsetTop;
  if($top < 0) {
    $topBar.style.top = ($top + $aniStep) + "px";
    $ddTimeout = setTimeout("_DropDown()", $aniSpeed);
  } else {
    $topBar.style.top = "0px";
  }
}
function _PullUp() {
  $top = parseInt($topBar.style.top);
  if($top > -50) {
    $topBar.style.top = ($top - $aniStep) + "px";
    $puTimeout = setTimeout("_PullUp()", $aniSpeed);
  } else {
    $topBar.style.top = "-50px";
  }
}
</script>

Again just a basic example but it can be configured using the 'ani' variables and does work in all major browsers (IE7+ as well).

Obviously the CSS solution is simpler and requires a lot less coding, but you do lose the effect for any IE users.

[goldensebbe]

Thank you very much ! It was exactly what I was looking for !