Jquery Slide Down Menu [closed]

Does anyone know if there is a JQuery plugin that will create a "slide down" menu similar to the one featured here : http://www.bu.edu/

Not sure if I am using the right term for this type of menu and I've been searching Google and StackOverflow for some time now with no success....

Thanks in advance!

Have you tried an approach without using js or jQuery?

I mean, you can do it just using HTML5 with CSS3 transitions.

It will look like this:

HTML:

<div id="menu">
<ul>
    <a href="#"><li>Menu 1</li></a>
    <a href="#"><li>Menu 2</li></a>
    <a href="#"><li>Menu 3</li></a>
    <a href="#"><li>Menu 4</li></a>
    <a href="#"><li>Menu 5</li></a>
    <a href="#"><li>Menu 6</li></a> 
</ul>

CSS

a {
font-family: verdana;
color: #fff;
font-size: 11px;   
}

a:hover {
color: #cff;    
}
#menu {

background: #666;
height: 30px;
width: 377px; 
transition:height 0.5s;
-webkit-transition:height 0.5s;
}

#menu:hover {
 height: 200px;     
}

ul {    
padding: 0; margin: 0;
padding-right: 10px;
position: absolute;    
}

ul li {
float: left;
display:block;
padding: 10px;
margin: 0;
background: #333;
border-right: 1px solid #666
}

#outset {
width: 377px; height: 200px;
background: #900;

}

check out this JsFiddle example

EDIT

To fit your question, I made some change in the code above and add a little jQuery. Like this:

$(document).ready(function() {
  $("#subMenu").hide(); 
});

$("#menu").hover(
  function() {
    $("#subMenu").show('fast');        
  },
  function() {
    $("#subMenu").hide('fast'); 
  }
);

You can see the results in this JsFiddle example

That would be very easy to build without a plugin. Create a sub-menu div and set display:none in the CSS.

Then create a hover listener to "slide down" the sub menu.

On the mouseout portion of the hover event, rather than simply closing the submenu, wrap the closing of the submenu in a setTimeout of 200ms, and then add a mouseover event in the submenu to cancel the setTimeout: (otherwise the submenu would close immediately upon leaving the menu)

var menuTimer;

$("#menu").hover(function() {
    //Slide down the submenu
    $("#sub_menu").slideDown();
}, function() {
    //Create a 200ms timer, after which it will close the sub_menu
    menuTimer = setTimeout(function() {
                        $("#sub_menu").slideUp();
                    },200);
});

$("#sub_menu").mouseenter(function() {
    //The user entered the submenu, so cancel the timer (don't close the submenu)
    clearTimeout(menuTimer);
});

Why don't you make your own menu? try with a list <ul> and jQuery .mouseover() to make a div .show() with blind effect of jQuery UI

Take a look at this: Dropdown menu

$('li').mouseover(function() {
    var this_menu = $(this).attr('class');
    if($('.menu_div').is(':visible')) {
       $('.menu_div').hide('blind', 'fast');
    }
    $('#' + this_menu).show('blind', 'fast'); 
});
$('.menu_div').mouseout(function() {
   var this_menu = $(this).attr('class');
   $('.menu_div').hide('blind', 'fast'); 
});

It's made with jQuery and jQuery-UI so if you use it add tou your document <head> the jQuery library and after jQuery-UI cause jQuery-UI needs jQuery to work

来源：https://stackoverflow.com/questions/16243154/jquery-slide-down-menu

标签

jquery

slidedown