Jquery Slide Down Menu [closed]

2019-04-16 02:21发布

站内问答 / jQuery
1644 4 6

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!

4条回答
贪生不怕死
2楼-- · 2019-04-16 02:25

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

查看更多
0人赞 添加讨论(0) 举报
你好瞎i
3楼-- · 2019-04-16 02:29

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

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
4楼-- · 2019-04-16 02:35

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);
});
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
5楼-- · 2019-04-16 02:49

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)