Question

如何创建类似于xenforo的下拉菜单，该菜单会在2秒后自动关闭？我试过搜索，但遗憾的是找不到合适的解决方案。

但我不知道如何以及要实现的代码是什么样的; 1.如果鼠标光标悬停在主菜单链接上2秒钟，则在2秒后打开下拉菜单。 2.如果鼠标光标离开下拉状态2秒钟，则下拉关闭。

谢谢！

这是Jsfiddle;

Answer 1

您可以使用jquery来使用此功能。而不是等待2秒，你可以使用淡出淡出，以便用户可以知道会发生什么。

$(document).ready(function(){
    $("#sub-menu").hide(); // Hide in order to fadeIn to work
    $("#main-menu").hover(
        function(){
            $("#sub-menu").fadeIn(slow);
        },
        function(){
            $("#sub-menu").fadeOut(slow);
        });
});

Answer 2

<html>
<head>
<style>
.dd_menu {
background: none;
padding: 0px;
margin:0;
list-style-type:none;
height:10px;
border: none;
font-size: 11px;
font-family: "Candarab";
}

.dd_menu li {
background: none;
float: left !important;
height:20px;
margin-left: 1px;
margin-top: 4px;
}

.dd_menu li a {
padding: 15px 5px;
display:inline;
color:#000;
text-decoration:none;
font:11px arial, verdana, sans-serif;
}

.dd_menu li:hover a {
text-decoration:none;
padding: 15px 5px;
}

.dd_menu ul {
position:absolute;
left:-9999px;
top:9px;
list-style-type:none;
text-decoration: none;
float: left !important;
}

.dd_menu li:hover {
position:relative;
background:#176093;
text-decoration: none;
z-index: 1000;
}

.dd_menu li:hover ul {
left:0px;
top:20px;
background:lavender;
padding: 3px 3px;
border:1px solid grey;
width:160px;
text-decoration: none;
}

.dd_menu li:hover ul li {
height:18px;
border:none;
}

.dd_menu li:hover ul li a {
height:18px;
padding:0px;
display:block;
font-size:11px;
width:158px;
line-height:18px;
text-indent:5px;
color:#444;
background-color:lavender;
text-decoration:none;
border:1px solid transparent;
}

.dd_menu li:hover ul li a:hover {
height:18px;
background:silver;
color:#000;
float: left;
border:solid 1px #444;
}
</style>
</head>
<body>
<ul class="dd_menu">
    <li><a href="#">Main Menu <span class="smallesttext">&#x25BC;</span></a>
  <ul>
    <div align="left">
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
    </div>
  </ul>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $(".dd_menu li a").hover(
        function(){
            $(".dd_menu li ul div li a").hide().fadeIn('slow');
        },
        function(){
        });
    $("ul div li").hover(
        function(){
            $(".dd_menu li ul div li a").show();
        },
        function(){
            ;
        });
    });
</script>
</body>
</html>

试试这个。同样在鼠标输出时添加你想要的东西。如果它有助于考虑接受答案。

Answer 3

试试这个：

$(document).ready(function(){
    $("#sub-menu li").hide(); // Hide in order to fadeIn to work
    $("#main-menu ul").hover(
        function(){
            $("#sub-menu li").fadeIn(slow);
        },
        function(){
            $("#sub-menu li").fadeOut(slow);
        });
});

下拉菜单与xenForo相似？

3 个答案: