如何使菜单像堆栈溢出的(How to Make a Menu Like Stack Overflow

我真的很喜欢的方式堆栈溢出做顶部的下拉菜单。 请注意，你必须怎样才能点击下拉触发，但仍必须悬停得到下拉。 还有什么似乎是团体 - 一旦你点击，悬停将激活图片中显示的菜单。 这是很难解释，但如果你玩了一分钟，你会明白我的意思。 同样，最后悬停的菜单将显示，直到用户再次点击关闭它是非常重要的。

以下是我迄今为止; 请注意，我几乎具有相同的功能，除了最后一个菜单徘徊不保持下降（它关闭鼠标移开时，当它不应该直到关闭点击）和切换功能是粗略的：

 $(document).ready(function() { var depressed = false; $('.menu').click(function() { depressed = true; $('.menu').toggleClass('active'); }); $('.menu').hover(function() { if (depressed) { $('.menu').toggleClass('active'); } }); }); 

 ul { margin: 0; padding: 0; } ul li { display: inline-block; padding: 10px 20px; background: #333; color: #eee; } ul li.active:hover ul { display: block; } ul li ul { display: none; position: absolute; border: 2px solid #555; } ul li ul li { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="menu">button 1 <ul> <li>sub button 1</li> <li>sub button 2</li> </ul> </li> <li class="menu">button 2 <ul> <li>sub button 1</li> <li>sub button 2</li> </ul> </li> <li class="menu">button 3 <ul> <li>sub button 1</li> <li>sub button 2</li> </ul> </li> </ul> 

我的JS不cuttin饭桶。 那么，什么是去了解这一点的最好方法是什么？

Answer 1:

我没有偷看入SO菜单，所以我不知道他们是如何做到的。 但是，这似乎很好地工作。

在其中一个按键点击打开下拉。

下拉不是由“鼠标移出”在你的代码关闭一样，但只有当另一个菜单盘旋。 如果将鼠标悬停在菜单区域以外的地方，最后悬停的菜单保持打开状态。

点击任何地方关闭菜单。

所以显示的菜单不直接用做:hover在CSS伪元素，但通过添加类，它仍然存在，即使菜单unhovered。 我认为最终的结果表现相当接近堆栈溢出的。

 $(function(){ // The event to handle clicks outside of the menu. This will close the menu. var offEvent = function(event){ $('.menu-bar').removeClass('active'); $(document).off('click', offEvent); }; // The click event on the menu buttons, to toggle 'menu mode' as it were. $(document).on('click', '.menu-bar .menu', function(event){ event.preventDefault(); $('.menu-bar').addClass('active'); $(this).addClass('active'); // Leave menu mode by clicking anywhere of the menu. $(document).on('click', offEvent ); }); // Hover toggles between the dropdowns of the separate menus. $('.menu-bar .menu').hover( function(event){ var $current = $(this); $('.menu').each( function(index, element){ var $element = $(this); if ($element.get(0) == $current.get(0)) { $element.addClass('active'); } else { $element.removeClass('active'); } }); }); }); 

 ul { margin: 0; padding: 0; } ul li { display: inline-block; padding: 10px 20px; background: #333; color: #eee; } ul li ul { display: none; position: absolute; border: 2px solid #555; } ul li ul li { display: block; } .menu .dropdown { display: none; } .menu-bar.active .menu.active .dropdown { display: block; } .menu { display: inline-block; position: relative; border: 1px solid grey; } .menu .dropdown { position: absolute; top: 100%; left: 0; border: 2px solid #555; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="menu-bar"> <li class="menu">button 1 <ul class="dropdown"> <li>sub button 1</li> <li>sub button 2</li> </ul> </li> <li class="menu">button 2 <ul class="dropdown"> <li>sub button 1</li> <li>sub button 2</li> </ul> </li> <li class="menu">button 3 <ul class="dropdown"> <li>sub button 1</li> <li>sub button 2</li> </ul> </li> </ul> 

Answer 2:

 $(document).ready(function() { $('#M1').click(function() { $('#M1').toggleClass('active'); $('#M2').removeClass('active'); $('#M3').removeClass('active'); }); $('#M2').click(function() { $('#M2').toggleClass('active'); $('#M1').removeClass('active'); $('#M3').removeClass('active'); }); $('#M3').click(function() { $('#M3').toggleClass('active'); $('#M1').removeClass('active'); $('#M2').removeClass('active'); }); }); 

 ul { margin: 0; padding: 0; } ul li { display: inline-block; padding: 10px 20px; background: #333; color: #eee; } ul li.active ul { display: block; } ul li ul { display: none; position: absolute; border: 2px solid #555; } ul li ul li { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="menu" id='M1'>button 1 <ul> <li>sub button 1</li> <li>sub button 2</li> </ul> </li> <li class="menu" id='M2'>button 2 <ul> <li>sub button 1</li> <li>sub button 2</li> </ul> </li> <li class="menu" id='M3'>button 3 <ul> <li>sub button 1</li> <li>sub button 2</li> </ul> </li> </ul> 

这对我的作品。

我刚刚删除：从。主动类的末尾徘徊，并提出了每个按钮的各个功能。

文章来源: How to Make a Menu Like Stack Overflow's