如何使一个菜单像堆栈溢出的 [英] How to Make a Menu Like Stack Overflow's
问题描述
这是我到目前为止;请注意，我几乎具有相同的功能，除了最后一个菜单悬停不会停留（在鼠标悬停时不应该直到点击），并且切换功能是粗略的：
$（document）.ready（function（）{var depression = false; $（'。menu' （）（）（）（）（）（）（）（）（） '.menu'）。toggleClass（'active'）;}}）;}）;
ul {margin：0;填充：0;} ul li {display：inline-block; padding：10px 20px;背景：＃333; color：#eee;} ul li.active:hover ul {display：block;} ul li ul {display：none;位置：绝对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>按钮1< ul> < li>子按钮1< / li> < li>子按钮2< / li> < / UL> < /锂> < li class =menu>按钮2< ul> < li>子按钮1< / li> < li>子按钮2< / li> < / UL> < /锂> < li class =menu>按钮3< ul> < li>子按钮1< / li> < li>子按钮2< / li> < / UL> < / li>< / ul>
没有cuttin git。
那么，最好的方法是什么？
我没有看到SO菜单，所以我不知道他们是怎么做到的。但这似乎很好地工作。
点击其中一个按钮打开下拉菜单。
下拉菜单不像鼠标一样关闭，就像您的代码一样，但只有当另一个菜单悬停时。如果您将鼠标悬停在菜单区域之外，则最后悬停的菜单保持打开状态。
点击任何地方关闭菜单。
所以显示菜单不是直接使用：hover CSS中的伪元素，但通过添加一个类，即使在菜单未被覆盖的情况下仍然存在。我认为净结果表现得非常接近Stack Overflow的。
$（function（）{//处理菜单外的点击事件这将关闭菜单var offEvent = function（event）{$（'。menu-bar'）。removeClass（'active'）; $（document）.off（'click'，offEvent）;}; // $（document）.on（'click'，'.menu-bar .menu'，function（event）{event.preventDefault（）; $ （'.menu-bar'）。addClass（'active'）; $（this）.addClass（'active'）; //通过单击菜单的任意位置离开菜单模式$（document）.on（'click' ，offEvent）;}）; //悬停在单独菜单的下拉菜单之间切换$（'。menu-bar .menu'）。hover（function（event）{var $ current = $ ）; $（'。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;填充：0;} ul li {display：inline-block; padding：10px 20px;背景：＃333; color：#eee;} ul li ul {display：none;位置：绝对border：2px solid＃555;} ul li ul li {display：block;}。menu .dropdown {display：none;}。menu-bar.active .menu.active .dropdown {display：block;}。menu {display ：内嵌块位置：亲戚; border：1px solid gray;}。menu .dropdown {position：absolute;顶部：100％;左：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>按钮1< ul class =dropdown> < li>子按钮1< / li> < li>子按钮2< / li> < / UL> < /锂> < li class =menu>按钮2< ul class =dropdown> < li>子按钮1< / li> < li>子按钮2< / li> < / UL> < /锂> < li class =menu>按钮3< ul class =dropdown> < li>子按钮1< / li> < li>子按钮2< / li> < / UL> < / li>< / ul>
I really like the way Stack Overflow has done their dropdown menus on the top. Notice how you must click in order for the dropdown to trigger, but you still must hover to get the dropdown. There is also what seems to be groups - once you click, hover will activate the menus shown in the picture. It is hard to explain, but if you play around for a minute you'll see what I mean. Also, it is important that the last hovered menu will show until a user clicks off again.
Here is what I have so far; note that I almost have the same functionality, except for the last menu hovered doesn't stay dropped (it closes on mouseout when it shouldn't until off-click) and the toggle functionality is sketchy:
$(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>
My JS is not cuttin git. So, what is the best way to go about this?
I haven't peeked into the SO menu, so I don't know how they did it. But this seems to work nicely.
A click on one of the buttons opens the dropdown.
The dropdown is not closed by a 'mouseout', like in your code, but only when another menu is hovered. If you hover outside of the menu area, the lastly hovered menu remains open.
Clicking anywhere closes the menu.
So showing the menu is not directly done by using a :hover pseudo element in CSS, but by adding a class, which remains there even when the menu is unhovered. I think the net result behaves pretty close to Stack Overflow's.
$(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>
这篇关于如何使一个菜单像堆栈溢出的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
