0

main_menuがページの最初の左側にある全幅ページをデザインする必要があります。これで、各メニューには、main_menuの項目が選択されたときに表示されるさまざまなオプションがありますが、オプション用に固定されたdivにあります。 。例えば

レイアウト

つまり、誰かがメインメニューからmenu_itemを選択するときはいつでも、関連するオプションをオプションのコンテナ内に配置する必要があります。

どうやってやるの？？これはcssのみを使用して実行できますか？または、jqueryを使用する必要がありますか？

更新---これをここでチェックしてください ////http：//jsfiddle.net/ybfrH/

4

2 に答える 2

1

jqueryを使用してそれを行うことができます（これを行うためのより良い方法があると確信していますが、ここに1つの方法があります） ここにフィドルリンク、

<body>

    <div id="main-menu">
        <div class="center">
            <p id="p1">Item 1</p>
            <p id="p2">Item 2</p>
            <p id="p3">Item 3</p>
             </div>
             </div>
            <div id="submenu">
            <div class="options">
           </div>
           </div>

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

     var opt = '<a href="#">Item 1</a></br>'+'<a href="#">Item 2</a></br>'+'<a  href="#">Item 3</a>';

     var opt2 = '<a href="#">Item 4</a></br>'+'<a href="#">Item 5</a></br>'+'<a href="#">Item 6</a>';

     var opt3 = '<a href="#">Item 7</a></br>'+'<a href="#">Item 8</a></br>'+'<a href="#">Item 9</a>';

        $("#p1").click(function(){

          $('.options').html(opt);

          });

       $("#p2").click(function(){

          $('.options').html(opt2);

          });

        $("#p3").click(function(){

          $('.options').html(opt3);

        });

    </script>

        </body>
于 2012-07-25T15:27:33.887 に答える
1

純粋なCSS3ソリューション

これは、セレクターを使用するため（メインメニューをクリックしたときに文字列:targetを変更することも意味します） 、古いブラウザーをサポートする場合は実用的ではありません。url

フィドルを参照してください。

このHTMLを考えると

<div id="main-menu">
    <div class="center">
        <a id="p1" href="#opt1">Item 1</a>
        <a id="p2" href="#opt2">Item 2</a>
        <a id="p3" href="#opt3">Item 3</a>
    </div>
</div>
<div id="submenu">
    <div class="options">
        <div id="opt1">
            <a id="s1" href="#">Sub Item 1</a>
            <a id="s2" href="#">Sub Item 2</a>
            <a id="s3" href="#">Sub Item 3</a>
        </div>    
        <div id="opt2">
            <a id="s4" href="#">Sub Item 4</a>
            <a id="s5" href="#">Sub Item 5</a>
            <a id="s6" href="#">Sub Item 6</a>
        </div>        
        <div id="opt3">
            <a id="s7" href="#">Sub Item 7</a>
            <a id="s8" href="#">Sub Item 8</a>
            <a id="s9" href="#">Sub Item 9</a>
        </div>
    </div>
</div>
<div id="application_area">
    <div id="header"></div>
</div>

このCSSはそれを行います（これを使用すると、ページの読み込み時にサブメニューは元々空になります。必要に応じて以下を参照してください）

#submenu .options a {display: block;}
#submenu .options > div {display: none}

#submenu .options > div:target {
    display: block;
}

オプション1をページの読み込み時に表示するには

まず、#opt1divを最後 divのに移動し.options、次に上記のCSSの代わりに次のCSSを使用します（フィドルを参照）。

#submenu .options a {display: block;}
.options > div:not(#opt1) {display: none}
.options > :target ~ #opt1 {display: none;}

#submenu .options > div:target {
    display: block;
}
于 2012-07-25T17:08:39.817 に答える