0

I'm building a drop down menu for a project I'm working on, but I don't get it working entirely as is should. I want it to show the sub-menus when I hover the root-level menus, and then close again after a short delay when the menu or sub-menu is not hovered anymore. Most of it works; the sub-menus are showed when root-level items are hovered and it is hidden when I stop hovering the root-level item. The problem is that the sub-menus are also hidden when I move my cursor from the root-level item to a sub-menu item other than the first and hover that. This is obviously not good, so help would be appreciated.

I created a JSFiddle with the code which shows the issue more clearly.

So, here's my code:

menu.htm

<div id=m_wrapper>
    <ul id=menu>
        <li onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">Item 1
            <div id=s0 onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">
                <a href=#>Item 1.1</a>
                <a href=#>Item 1.2</a>
                <a href=#>Item 1.3</a>
            </div>
        </li>
    </ul>
</div>

menu.css

#m_wrapper {
    position:relative;
    display:table;
}
#menu {
    position:relative;
}
#menu li {
    width:100px;
    position:relative;
    float:left;
    list-style-type:none;
}
#menu div {
    position:absolute;
    visibility:hidden;
    display:inherit;
    width:100%;
    z-index:30
}
#menu div a {
    position:relative;
    display:block;
    z-index:35;
}

menu.js

var countdown = 300;
var timer = null;
var menu_item = null;

window.show_sub_menu = function(cath) {
    if (menu_item) {
        menu_item.style.visibility = 'hidden'; //Make sure to show one menu at a time
    }

    menu_item = window.document.getElementById("s" + cath);
    menu_item.style.visibility = 'visible'; //Show menu

    if (timer) {
        window.clearTimeout(timer); //Reset timer, so menu is kept open
        timer = null;
    }
};

window.start_timer = function() {
    timer = window.setTimeout(close_sub_menu, countdown);
};

window.close_sub_menu = function() {
    menu_item.style.visibility = 'hidden';
};
4

5 回答 5

1

纯 CSS 下拉菜单

http://jsfiddle.net/steelywing/GANeX/8/

.nav {
    background-color: #def;
    height: 20px;
}

.nav * {
    transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
}
li {
    display: inline-block;
    height: 20px;
}

.dropdown li {
    display: block;
}

.dropdown ul {
    visibility: hidden;
    opacity: 0;
    margin-top: -2px;
}

.dropdown:hover ul {
    visibility: visible;
    opacity: 1;
}
于 2013-04-18T12:18:57.940 回答
1

这可以很容易地单独使用 HTML 和 CSS 来实现。使用 CSS 过渡，我们可以在鼠标悬停时使菜单消失。

例子

我也把这个放在JsFiddle

HTML

<nav>
    <ul id="menu">
        <li>
            <a href="#">Home</a>
            <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>                                
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS

#menu li
{
    position: relative;  
    display: inline;
    list-style: none;
    padding-left: 15px;  
}

#menu ul
{
    margin: 0;
    padding: 0;
    list-style: none;    
    opacity: 0;
    position: absolute;
    top: 20px;
    left: 5px;
    // Transitions for our fade effect.
    -webkit-transition: opacity 2s ease-in-out; 
    -moz-transition: opacity 2s ease-in-out;
    -ms-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
    transition: opacity 2s ease-in-out;   
}

#menu ul li
{
    display: block;    
}

#menu li:hover > ul
{
    opacity: 1;    
    // This stops the transition from happening on hover.
    -webkit-transition: none; 
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
于 2013-04-18T12:08:19.580 回答
1

你不必让它那么复杂。

当然你也可以通过 javascript 来做同样的事情，但是通过 jQuery 来看看它是多么容易、可读和简单。

看这个演示

只需使用以下脚本

$('#menu li').hover(
    function(){
            $(this).stop().animate({height: '100px'},1000,function(){});
            $(this).find('div').show(600);
        }//gets called upon mousehover
    ,
    function(){
            $(this).stop().animate({height: '20px'},1000,function(){});
        } //gets called upon mouseout
  ); //hover ends

而且，我不知道你为什么要写大量的 CSS。只需使用这些：

#menu
{
    list-style:none;
}
#menu li
{
    width:100px;
    border:1px Solid #CCC;
    text-align:Center;
    cursor:pointer;
    height:20px;
    overflow:hidden;

}
#menu li div
{
    border:1px Solid #CCC;
}
#s0 
{
    height:auto;
}
#s0 a
{
    display:block;
}

您可以通过它做很多事情，例如选定的下拉项目。通过箭头键选择什么不是。jQuery 让你变得简单。

于 2013-04-18T12:02:36.617 回答
1

首先你应该避免<div>在<li>标签中，因为它不是语义的。

很好的是仅使用 html 和 css 样式构建的多级菜单。

HTML

 <div id=m_wrapper>
     <ul id=menu>
            <li>Item 1
                <ul>
                    <li><a href=#>Item 1.1</a></li>
                    <li><a href=#>Item 1.2</a></li>
                    <li><a href=#>Item 1.3</a></li>
                </ul>
            </li>
            <li>Item 2</li>
     </ul>
 </div>

CSS 样式

#m_wrapper, #menu, #menu li  {
    position:relative; 
}
#m_wrapper {
    display:table; 
}
#menu li {
    float:left;
    width:100px;
    list-style-type:none;
}
#menu li ul {
    display: none;
}
#menu li:hover ul {
    display: block;
    margin: 0 10px;
    padding: 0;
}
于 2013-04-18T11:58:57.570 回答
0

请记住..如果您决定实现淡入淡出版本，您应该使用跨浏览器不透明度，如下所示：

 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter: alpha(opacity=100);
 -moz-opacity: 1;
 -khtml-opacity: 1;
 opacity: 1;
于 2013-04-18T12:20:44.850 回答