www.webdeveloper.com
Results 1 to 3 of 3

Thread: drop down menu

  1. #1
    Join Date
    Feb 2012
    Posts
    15

    drop down menu

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,007
    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.
    HTML Code:
    .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.
    HTML Code:
    <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>
    Code:
    <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.

  3. #3
    Join Date
    Feb 2012
    Posts
    15
    Thank you very much ! It was exactly what I was looking for !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles