菜单展示效果求助，紧急——————

如上图，上面的是一级菜单，点击后左侧出现相应二级菜单，这个怎么实现的，或者这种效果叫什么名字？

解决方案 »

  1.   

    div隐藏 点击后显示  光看你那张图 看不出要什么效果啊
      

  2.   

      就是最上面的横排是一级菜单，点某个一级菜单对应二级菜单在左侧显示。
        如果一次性把所有菜单都加载出来，那么每个二级菜单对应的二级菜单都先放到各自div？那布局会不会很乱，好像div即便隐藏好像也是占用空间的吧。前台方面我是小白了，能否详细点
      

  3.   


    布局不会乱~~啥叫div占用空间？
      

  4.   

    你菜单里面的内容是静态的话你就放到div里面，二级菜单全部隐藏起来，点击一级菜单显示相应的二级菜单就可以了
      

  5.   

    不会乱啊，乱什么，display:none是不占用空间的<div><a href="javascript:show('yyzx')">应用中心</a>　<a href="javascript:show('zhzx')">账号中心</a>　<a href="javascript:show('jygl')">交易管理</a></div>
    <div id="dvMenu">
    <div id="yyzx">应用中心<br />应用中心<br />应用中心</div>
    <div id="zhzx" style="display:none">账号中心<br />账号中心</div>
    <div id="jygl" style="display:none">交易管理<br />交易管理</div>
    </div>
    <script>
        function show(id) {
            var divs = document.getElementById('dvMenu').getElementsByTagName('div');
            for (var i = 0; i < divs.length; i++) 
                divs[i].style.display = divs[i].id == id ? 'block' : 'none';
        }
    </script>
      

  6.   

    这就是一种页面菜单框架啊。顶部一级菜单，左侧“应用中心”为二级菜单，“手机充值”为三级菜单。通常结构为：
    <body>
    <table>
    <head>
     <tr><td>顶部一级菜单相关代码</td></tr>
     <tr><td><iframe id="left" src="left.html" /> </td></tr> 左侧菜单页面为left.html
     <tr><td><iframe id="main" src="main.html" /> </td></tr> 右侧为主页面 main.html展示内容
    </head>
    </table>在当前通过iframe.contentWindow.xxxshowMenu()的方式来调用iframe页面的方法来改变菜单显示。左侧菜单你可使用jquery的组件就行了，都比较好搞。
      

  7.   


    <div><a href="javascript:show('yyzx')">应用中心</a>　<a href="javascript:show('zhzx')">账号中心</a>　<a href="javascript:show('jygl')">交易管理</a></div>
    <div id="dvMenu">
    <div id="yyzx">应用中心<br />应用中心<br />应用中心</div>
    <div id="zhzx" style="display:none">账号中心<br />账号中心</div>
    <div id="jygl" style="display:none">交易管理<br />交易管理</div>
    </div>
    <script>
        function show(id) {
            var divs = document.getElementById('dvMenu').getElementsByTagName('div');
            for (var i = 0; i < divs.length; i++) 
                divs[i].style.display = divs[i].id == id ? 'block' : 'none';
        }
    </script>根据版主大大的代码 改进了下 
    楼主可以参考下
    样式有点丑
    <script type="text/javascript" src="jquery-1.10.2.min.js" ></script>

    <script type="text/javascript">
    $(document).ready(function() {
    $("p[class='flip']").click(function()
    {
    $(this).next().slideToggle(500);
    });
    });

    function show(id) {
          var divs = $("div[id='dvMenu'] div[class='flip']");
          for (var i = 0; i < divs.length; i++) 
              divs[i].style.display = divs[i].id == id ? 'block' : 'none';
      }
    </script>


    <style type="text/css"> 
    div.panel,p.flip
    {
    margin:0px;
    padding:10px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
    height:15px;
    width:100px;
    }
    div.panel
    {
    height:120px;
    display:none;
    }
    </style>
    </head> <body>
    <div style="padding:10px">
    <a href="javascript:show('yyzx')">应用中心</a>　<a href="javascript:show('zhzx')">账号中心</a>　<a href="javascript:show('jygl')">交易管理</a>
    </div>
    <div id="dvMenu">

    <div id="yyzx" class="flip">
    <p class="flip"><a href="#">应用中心</a></p>
    <!--弹出层-->
    <div class="panel">
    <div style="text-align: center;">
    <p><a href="#">应用中心1.1</a></p>
    <p><a href="#">应用中心1.2</a></p>
    <p><a href="#">应用中心1.3</a></p>
    </div>
    </div>
    <p class="flip"><a href="#">应用中心2</a></p>
    <div class="panel">
    <div style="text-align: center;">
    <p><a href="#">应用中心2.1</a></p>
    <p><a href="#">应用中心2.2</a></p>
    <p><a href="#">应用中心2.3</a></p>
    </div>
    </div>
    </div>

    <div id="zhzx" class="flip" style="display:none">
    <p class="flip"><a href="#">账号中心</a></p>
    <div class="panel">
    <div style="text-align: center;">
    <p><a href="#">账号中心1.1</a></p>
    <p><a href="#">账号中心1.2</a></p>
    <p><a href="#">账号中心1.3</a></p>
    </div>
    </div>
    </div>

    <div id="jygl" class="flip" style="display:none">
    <p class="flip"><a href="#">交易管理</a></p>
    <div class="panel">
    <div style="text-align: center;">
    <p><a href="#">交易管理1.1</a></p>
    <p><a href="#">交易管理1.2</a></p>
    <p><a href="#">交易管理1.3</a></p>
    </div>
    </div>
    </div>
    </div>


    </body>
      

  8.   

    先将DIV隐藏，并设置position为float。点击上面的菜单后，让DIV显示出来，通过left和top定位到相应菜单的下面就可以实现了。
      

  9.   

     
    根据版主大大的代码 改进了下 
    楼主可以参考下
    样式有点丑
    <script type="text/javascript" src="jquery-1.10.2.min.js" ></script>

    <script type="text/javascript">
    $(document).ready(function() {
    $("p[class='flip']").click(function()
    {
    $(this).next().slideToggle(500);
    });
    });

    function show(id) {
          var divs = $("div[id='dvMenu'] div[class='flip']");
          for (var i = 0; i < divs.length; i++) 
              divs[i].style.display = divs[i].id == id ? 'block' : 'none';
      }
    </script>


    <style type="text/css"> 
    div.panel,p.flip
    {
    margin:0px;
    padding:10px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
    height:15px;
    width:100px;
    }
    div.panel
    {
    height:120px;
    display:none;
    }
    </style>
    </head> <body>
    <div style="padding:10px">
    <a href="javascript:show('yyzx')">应用中心</a>　<a href="javascript:show('zhzx')">账号中心</a>　<a href="javascript:show('jygl')">交易管理</a>
    </div>
    <div id="dvMenu">

    <div id="yyzx" class="flip">
    <p class="flip"><a href="#">应用中心</a></p>
    <!--弹出层-->
    <div class="panel">
    <div style="text-align: center;">
    <p><a href="#">应用中心1.1</a></p>
    <p><a href="#">应用中心1.2</a></p>
    <p><a href="#">应用中心1.3</a></p>
    </div>
    </div>
    <p class="flip"><a href="#">应用中心2</a></p>
    <div class="panel">
    <div style="text-align: center;">
    <p><a href="#">应用中心2.1</a></p>
    <p><a href="#">应用中心2.2</a></p>
    <p><a href="#">应用中心2.3</a></p>
    </div>
    </div>
    </div>

    <div id="zhzx" class="flip" style="display:none">
    <p class="flip"><a href="#">账号中心</a></p>
    <div class="panel">
    <div style="text-align: center;">
    <p><a href="#">账号中心1.1</a></p>
    <p><a href="#">账号中心1.2</a></p>
    <p><a href="#">账号中心1.3</a></p>
    </div>
    </div>
    </div>

    <div id="jygl" class="flip" style="display:none">
    <p class="flip"><a href="#">交易管理</a></p>
    <div class="panel">
    <div style="text-align: center;">
    <p><a href="#">交易管理1.1</a></p>
    <p><a href="#">交易管理1.2</a></p>
    <p><a href="#">交易管理1.3</a></p>
    </div>
    </div>
    </div>
    </div>


    </body>
      sliwey，我的布局为上中下，其中中间分为左侧导航右边主页展示，我需要在展示层放个iframe并且，iframe中页面自动适应div大小.我是这样写的，<iframe frameborder="0" id="panl" height="100%" width="100%" name="content_right" scrolling="auto" src="#" onload="javascript:iframeAutoFit(this);">您的浏览器版本不支持iframe，请升级或者跟换其他浏览器访问！</iframe>  但是好像不行，能帮忙纠正下吗先谢过了