目录
一、实现三级导航栏
首先实现二级导航
思路1:嵌套列表 first=['导航1','导航1','导航1',‘导航1’] second=[ ['导航2', '导航2'],['导航2', '导航2'],['导航2', '导航2'],] 这个思路理论可行但是由于djang内置模板无法使用range方法 实现起来比较麻烦 不推荐
思路2:列表嵌套字典 获取key,values
first = [ {'导航1' : '导航2'},{'导航1' :'导航2'} ]
ok顺着这个思路 实现三级导航栏:
one = [{'导航1': [{'导航2': '导航3'}, {'导航2': '导航3'}, {'导航2': '导航3'}], '导航11': [{'导航2': '导航3'}, {'导航2': '导航3'}], '导航111': [{'导航2': '导航3'}, {'导航2': '导航3'}], '导航1111': [{'导航2': '导航3'}, {'导航2': '导航3'}]}]
字典中的items方法可以同时获取到key，values
二、代码
1.views部分
代码如下（示例）：
def nav(request):
one = [{'导航1': [{'导航2': '导航3'}, {'导航2': '导航3'}, {'导航2': '导航3'}], '导航11': [{'导航2': '导航3'}, {'导航2': '导航3'}], '导航111': [{'导航2': '导航3'}, {'导航2': '导航3'}], '导航1111': [{'导航2': '导航3'}, {'导航2': '导航3'}]}]
return render(request, "test.html", {'one': one})
2.html部分
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="/static/css/nav.css">
</head>
<body>
<h1 align="center">多级导航条</h1>
<ul class="nav-one">
{% for dict in one%}
{% for key,values in dict.items %}
<li><a href="">{{key}}</a>
<ul class="nav-two">
{% for j in values %}
{% for p in j%}
<li><a href="">{{p}}</a>
<ul class="nav-three">
{% for k in j.values%}
<li><a href="">{{k}}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
{% endfor %}
</ul>
</li>
{% endfor %}
{% endfor %}
</ul>
</body>
</html>3.css部分
代码如下(示例):
body,ul,li,a{
padding: 0;
margin: 0;
text-decoration: none;
}
.nav-one{
width: 800px;
height: 45px;
margin: 0 auto;
}
.nav-one li{
list-style: none;
float: left;
width: 20%;
height: 45px;
line-height: 45px;
text-align: center;
background-color: #CCCCCC;
/*border: 1px solid ;*/
}
.nav-one li:hover{
background-color: #AE81FF;
}
.nav-one li:nth-last-child(1){
/*border-right: none;*/
}
.nav-one li:hover .nav-two{
display: block;
}
.nav-two{
display: none;
}
.nav-two li{
width: 100%;
}
.nav-two li:hover{
background-color: #66D9EF;
position: relative;
}
.nav-three{
display: none;
}
.nav-two li:hover .nav-three{
display: block;
}
.nav-three{
position: absolute;
width: 100%;
left: 100%;
/*bottom: 100%;*/
top:0%;
}
.nav-one li .nav-two li .nav-three li{
width: 100%;
position: relative;
}
.nav-three li:hover{
background-color: pink;
}三、实现展示
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
