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

汎用非表示クラス (display:none;) を Div を使用してメニュー 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 に答える