0

i have to design a full width page with the main_menu is on the starting left of the page..now each menu has different options which are to be shown when any item from the main_menu is selected, but in a div fixed for options.. .例如

布局

即，每当有人从主菜单中选择一个 menu_item 时，相关的选项都应该放在选项容器内...

我怎样才能做到这一点？？这可以仅使用 css 完成吗？还是我需要为此使用jquery？

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

4

2 回答 2

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 而不是上面给出的（参见小提琴）：

#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 回答
1

您可以使用 jquery 来做到这一点（我相信有更好的方法可以做到这一点，但这里是一种方法） 小提琴链接在这里，

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