日期:2014-05-16  浏览次数:20383 次

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




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

------解决方案--------------------
div隐藏 点击后显示  光看你那张图 看不出要什么效果啊
------解决方案--------------------
引用:
Quote: 引用:

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


布局不会乱~~啥叫div占用空间?
------解决方案--------------------
你菜单里面的内容是静态的话你就放到div里面,二级菜单全部隐藏起来,点击一级菜单显示相应的二级菜单就可以了
------解决方案--------------------
引用:
Quote: 引用:

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

不会乱啊,乱什么,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>

------解决方案--------------------
这就是一种页面菜单框架啊。顶部一级菜单,左侧“应用中心”为二级菜单,“手机充值”为三级菜单。通常结构为:
<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的组件就行了,都比较好搞。
------解决方案--------------------

<div><a href="javascript:show('yyzx')">应用中心</a> <a href="javascript:show('zhzx')">账号中心</a> <a href="javascript:show('jygl')">交易管理</a></div>
<div id="dvMenu">
<div&n