Django纵向二级导航栏（鼠标点击展开）

网上搜到的，改改自己练习用，以后在研究

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 
 5     <meta charset="UTF-8">
 6     <title>{% block title %}测试平台-首页{% endblock %}</title>
 7     {% block style %}{% endblock %}
 8     <style type="text/css">
 9         /*主导航样式*/
10         #nav{
11             list-style-type:none;
12             margin: 0px;
13             background-color: floralwhite; /*背景颜色白花*/
14             color: black;/*字体颜色*/
15             font-size: medium; /*字体大小*/
16             height: 700px; /*布局宽*/
17             width: 150px;/*布局高*/
18             float:left;    /*浮动显示在左侧*/
19             text-align: left; /* 居左显示文字 */
20             padding: 5px;
21             border: inset 1px white; /* 边框样式*/
22         }
23         /*#nav li{*/
24              /*text-decoration: none;*/
25         /*}*/
26         /*一级导航布局样式*/
27         #nav li input{
28             position:absolute;
29             left:0;
30             /*margin-left:0;*/
31             opacity:0;
32             z-index:2;
33             cursor:pointer;
34             height:1em;
35             width:1em;
36             top:0;
37         }
38         #nav li>label  {
39             position: relative;
40             left: -15px;
41             /*padding: 0px;*/
42             cursor: pointer;
43             display: block;
44             padding-left: 17px;
45         }
46 
47         /*一级导航列表样式*/
48         #nav input+ul{
49             display:none;
50         }
51         #nav input+ul>li{
52             height:0;
53             overflow:hidden;
54             padding-left:1px;
55 
56         }
57 
58         #nav input:checked + ul {
59         /*background:url(toggle-small.png) 44px 5px no-repeat;*/
60             margin:-22px 0 0 -44px;
61             padding:27px 0 0 80px;
62             height:auto;
63             display:block;
64         }
65         #nav input:checked + ul > li {
66             height:auto;
67         }
68 
69     
70     </style>
71 </head>
72 <body style="background-color: whitesmoke">
73 
74     
75     <div id="nav">
76 
77             <li><a href="/index/">首页</a></li>
78             <li>
79                 <label for="no1">自己相关</label>
80                 <input id="no1" type="checkbox"/>
81                 <ul>
82                     <li><a href="/app_wailian/policypingan/">吃</a></li>
83                     <li><a href="/app_wailian/houseloan/">喝</a></li>
84                 </ul>
85             </li>
86             <li><label for="no2">其他相关</label>
87                 <input id="no2" type="checkbox"/>
88                 <ul>
89                     <li><a href="/app_personloan/houseloan/">衣食</a></li>
90                     <li><a href="#">住行</a></li>
91                 </ul>
92 
93     </div>
94 
95 </body>
96 </html>

结果如下：

posted @ 2019-01-28 17:30  zymei  阅读(928)  评论(0)    收藏  举报