0

基本的に、ページの右上に固定位置があるjqueryメニューに取り組んでいます。「ナビゲーション」ボックスは常に表示されます。クリックすると、展開してアプリケーション、フォーラム、ギルド、プロジェクトが表示されます。サブメニューをクリックすると、アプリケーションと同様に展開されます。

http://i46.tinypic.com/xp6gox.png

css をこの画像のようにすることはできません。いくつかの詳細は、各「ボックス」に 6 ピクセルのパディング、その下に 3 ピクセルの下部マージン、サブメニューの背景が灰色で、各ボックスの幅はテキストの幅に依存します。

これが実際の HTML/CSS です www.jsfiddle.net/3HAKX/

どんな助けでも大歓迎です。

4

2 に答える 2

1

CSS は次のようになります。

www.jsfiddle.net/3HAKX/1/

ドロップダウンメニュー用の JS スクリプトも必要ですか?

于 2013-02-17T12:30:43.757 に答える
1

あなたの質問を理解したかどうかわかりません。しかし、ここに私がそれを達成するコードがあります。

<ul id="accordion">
            <li>
                <a href="#recent" class="heading">Application</a>
                                <ul>
                    <li><a href="#">January 2009</a></li>
                    <li><a href="#">December 2008</a></li>
                    <li><a href="#">November 2008</a></li>
                    <li><a href="#">October 2008</a></li>
                    <li><a href="#">September 2008</a></li>
                </ul>
            </li>
            <li>
                <a href="#archive" class="heading">Forum</a>
                <ul>
                    <li><a href="#">January 2009</a></li>
                    <li><a href="#">December 2008</a></li>
                    <li><a href="#">November 2008</a></li>
                    <li><a href="#">October 2008</a></li>
                    <li><a href="#">September 2008</a></li>
                </ul>
            </li>
            <li>
                <a href="#archive" class="heading">Guilds</a>
                <ul>
                    <li><a href="#">January 2009</a></li>
                    <li><a href="#">December 2008</a></li>
                    <li><a href="#">November 2008</a></li>
                    <li><a href="#">October 2008</a></li>
                    <li><a href="#">September 2008</a></li>
                </ul>
            </li>
            <li>
                <a href="#archive" class="heading">Projects</a>
                <ul>
                    <li><a href="#">January 2009</a></li>
                    <li><a href="#">December 2008</a></li>
                    <li><a href="#">November 2008</a></li>
                    <li><a href="#">October 2008</a></li>
                    <li><a href="#">September 2008</a></li>
                </ul>
            </li>

CSS

ul#accordion{
float:right;
}
ul#accordion, ul#accordion ul { list-style: none; margin: 0; }
ul#accordion a.heading { 
    color: black;
    display: block;
    font-size:16px;
    font-weight:bold;
    text-decoration: none;
    margin-right:30px;
}
ul#accordion li ul a { font-size:14px;color: black; text-decoration: none;}
ul#accordion li ul a:hover { text-decoration: underline; }

#accordion li ul { display: none; }
#accordion li.current ul { display: block; }

JS

$(document).ready(function() {
    $('ul#accordion a.heading').click(function() {
        $(this).css('outline','none');
        if($(this).parent().hasClass('current')) {
            $(this).siblings('ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
            });
        } else {
            $('ul#accordion li.current ul').slideUp('slow',function() {
                $(this).parent().removeClass('current');
            });
            $(this).siblings('ul').slideToggle('slow',function() {
                $(this).parent().toggleClass('current');
            });
        }
        return false;
    });
});

ここにjsFiddleがあります

于 2013-02-17T12:49:52.070 に答える