Question

我必须设计一个全宽页面，其中main_menu位于页面的左侧..现在每个菜单都有不同的选项，当选择main_menu中的任何项目时，将显示这些选项，但是在一个固定的div中选项...例如

the layout

即。每当有人从主菜单中选择menu_item时，相关选项应放在容器内以供选项...

我该怎么做？这可以仅使用css完成吗？或者我需要使用jquery吗？

更新---在这里查看//// http://jsfiddle.net/ybfrH/

Answer 1

你可以使用jquery来做（我确信有更好的方法可以做到这一点，但这里有一种方法） fiddle link here ，

<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>

Answer 2

纯CSS3解决方案

如果您想要支持旧浏览器，这是不实际的，因为它使用:target选择器（这也意味着您在单击主菜单时更改url字符串。）

See the fiddle

鉴于此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

首先，将#opt1 div移至div的 last .options，然后使用以下CSS代替上面给出的（see the fiddle）：

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

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

CSS / Jquery垂直菜单，带有固定位置的子菜单项

2 个答案:

纯CSS3解决方案