盒子
目录
文章目录
  1. CSS 实现三级导航栏以及 freemarker 实现

CSS实现三级导航栏 以及 freemarker 逻辑实现

文章取自我的 Github repos: Learning-HTML-CSS, 作者:@paddingme
原文链接:https://github.com/paddingme/Learning-HTML-CSS/issues/15

CSS 实现三级导航栏以及 freemarker 实现

做网站经常需要做三级导航栏,这里记录下三级导航栏的实现。

水平方向的三级导航栏实现效果如下:

nav

HTML 代码结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<ul class="nav">
<li><a href="#">一级目录1</a>
<ul>
<li><a href="#">二级目录11</a></li>
<li><a href="#">二级目录12</a>
<ul>
<li><a href="#">三级目录121</a></li>
<li><a href="#">三级目录122</a></li>
<li><a href="#">三级目录123</a></li>
</ul>
</li>
<li><a href="#">二级目录13</a></li>
</ul>
</li>
<li><a href="#">一级目录2</a></li>
<li><a href="#">一级目录3</a>
<ul>
<li><a href="#">二级目录31</a></li>
<li><a href="#">二级目录32</a>
<ul>
<li><a href="#">三级目录321</a></li>
</ul>
</li>
<li><a href="#">二级目录33</a></li>
<li><a href="#">二级目录34</a>
<ul>
<li><a href="#">三级目录341</a></li>
<li><a href="#">三级目录342</a></li>
</ul>
</li>
</ul>
</li>
</ul>

CSS 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.nav {
float: left;
}

.nav a {
display: block;
text-decoration: none;
color: #333;
padding: 5px 10px;
border: 1px solid #ccc;
background-color: #9A9797;
}

.nav a:hover {
background: #444;
color: white;
}
.nav li {
list-style: none;
}

.nav > li {
float: left;
position: relative;
}

.nav ul {
white-space: nowrap;
padding: 0;
visibility: hidden;
}

.nav ul li {
position: relative;
}

.nav ul ul {
position: absolute;
top: 0;
float: left;
margin-left: 100%;
visibility: hidden;
}

.nav li:hover > ul {
visibility: visible;
}

demo 地址:CodePen

浏览器兼容性待测试(todo)。

Freemarker 流程图:
nav1

Freemarker 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<ul class="nav">
[@cms_channel_list]
[#list tag_list as a]
<!-- 是否有二级栏目 start -->
[#if a.child?? && a.child?size>0]
<!-- 是否有三级栏目 start -->
[#if a.child[0].child?? && a.child[0].child?size>0]
<li>
<a href="${a.child[0].child[0].url}">${a.name}</a>
[#else]
<li>
<a href="${a.child[0].url}">${a.name}</a>
[/#if]
<!-- 是否有三级栏目 end -->

<!-- 遍历所有二级栏目 start -->
<ul>
[#list a.child as b]
<!-- 是否有三级栏目 start-->
[#if b.child?? && b.child?size>0]

<li><a href="${b.child[0].url}" >${b.name}</a>
<ul>
[#list b.child as c]
<li><a href="${c.url}">${c.name}</a></li>
[/#list]
</ul>
</li>
[#else]
<li><a href="${b.url}" class="scd-a">${b.name}</a></li>
[/#if]
<!-- 是否有三级栏目 end-->
[/#list]
</ul>
<!-- 遍历所有二级栏目 end -->
[#else]
<li><a href="${a.url}">${a.name}</a>
[/#if]
<!-- 是否有二级栏目 end -->
</li>
[/#list]
[/@cms_channel_list]
</ul>