转载--竖向折叠菜单

 

 

 

<%--
  Created by IntelliJ IDEA.
  User: Skye
  Date: 2017/12/25
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>竖向的折叠菜单</title>
    <script language = JavaScript>
        function showmenu(id) {
            var list = document.getElementById("list"+id);
            var menu = document.getElementById("menu"+id)
            if (list.style.display=="none") {
                document.getElementById("list"+id).style.display="block";
                menu.className = "title1";
            }else {
                document.getElementById("list"+id).style.display="none";
                menu.className = "title";
            }
        }
    </script>
    <style type="text/css">
        <!--
        *{margin:0;padding:0;list-style:none;font-size:14px}
        #nav{margin:10px;text-align:center;line-height:25px;width:200px;}
        .title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}
        .title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;}
        .content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;}
        -->
    </style>
</head>
<body>
<div id="nav">
    <div class="title" id="menu1" onclick="showmenu('1') ">网站制作</div>
    <div id="list1" class="content" style="display:none">
        <ul>
            <li>div+css</li>
            <li>网站设计</li>
            <li>网站切图</li>
        </ul>
    </div>
    <div class="title" id="menu2" onclick="showmenu('2')">网页代码</div>
    <div id="list2" class="content" style="display:none">
        <ul>
            <li>菜单导航</li>
            <li>层和布局</li>
            <li>图片切换</li>
        </ul>
    </div>
</div>
</body>
</html>

  

posted @ 2017-12-25 19:03  SkyeAngel  阅读(220)  评论(0编辑  收藏  举报