0

我有一个手风琴风格的菜单，它浮动到页面的右侧。它占用了很多空间，我想找到一种方法让它隐藏起来。

我怎样才能将一个橙色框放在它的位置，并且每当悬停时，菜单就会出现。

例子：

在此处输入图像描述

我的菜单：http: //jsfiddle.net/4dHYq/

HTML：

<ul class="menu">
        <li class="item1"><a href="#">ABOUT US</a>
            <ul>
                <li class="subitem1"><a href="#">About Us</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”&lt;/a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
                <li class="subitem1"><a href="#">Cute Kittens</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”&lt;/a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
            </ul>
        </li>
        <li class="item2"><a href="#">ACADEMICS</a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”&lt;/a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
            </ul>
        </li>
        <li class="item3"><a href="#">RESOURCES</a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”&lt;/a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
            </ul>
        </li>
        <li class="item4"><a href="#">DEPARTMENTS</a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”&lt;/a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
            </ul>
        </li>
        <li class="item5"><a href="#">FAQs</a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens</a></li>
                <li class="subitem2"><a href="#">Strange “Stuff”&lt;/a></li>
                <li class="subitem3"><a href="#">Automatic Fails</a></li>
            </ul>
        </li>
    </ul>

CSS：

body {
    font-size: 100%;
    background:#cccccc;
}
a {
    text-decoration: none;
}
ul, ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu {
    float: right;
    width: 300px;
    height: auto;
}
.menu > li > a {
    background-color: #f36f21;
    border-bottom: 1px solid #444;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    color: #fff;
}
.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2em;
    line-height: 2em;
    text-indent: 2em;
    display: block;
    position: relative;
    color: #444;
}
.menu ul li:last-child a {
    border-bottom: 1px solid #444;
}
.menu > li > a:hover, .menu > li > a.active {
    background-color: #444;
    border-bottom: 1px solid #f36f21;
}
.menu > li > a.active {
    border-bottom: 1px solid #f36f21;
}
.menu > li > a:before {
    font-size: 36px;
    height: 1em;
    width: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}

.menu > li > ul li a:before{
    content: '▶';
    font-size: 8px;
    color: #bcbcbf;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0;
    left: -2.7em;
}

.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #444;
}
4

2 回答 2

1 
    $('.menu').hide();
    $('#hm').hover(function(){
        $('.menu').show();
    },function(){
        $('.menu').hide();
    });

小提琴

于 2013-04-09T20:23:20.737 回答
1

使用 Div 将通用隐藏类 (display:none;) 应用到您的 Menu UL。在这个 Div 中放置一个 Span，它将作为您菜单的访问点。

然后，您可以添加以下代码：

$('.menuAccess').hover(function () {
    $('.menu').removeClass('hide');
}, function () {
    $('.menu').addClass('hide');
});

http://jsfiddle.net/danieljordan13/Ha58r/2/

于 2013-04-09T21:04:41.207 回答