揭秘CSS(第 1 版)
6.3.4 手风琴导航
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

链接的样式

列表的样式

创建导航

垂直导航

分页导航

面包屑导航

手风琴导航

在垂直导航中,如果存在多个分级,常常使用手风琴导航,它会以手风琴方式展开和折叠,来节约空间。

简单的说,手风琴导航就是垂直导航的层层嵌套,需要多少级,就嵌套多少层。这里就以两级导航为例,来介绍手风琴导航的基本制作方法。

为了方便控制手风琴导航的样式和行为,外层导航使用定义列表 dl、而内层使用无序列表 ul 来包裹导航中的链接元素:

<dl class="accordion">
    <dt><a href="#">公司介绍</a></dt>
    <dd>
        <ul class="verticalnav">
        <li><a href="#">公司概况</a></li>
        <li><a href="#">历史沿革</a></li>
        </ul>
    </dd>
    <dt><a href="#">产品中心</a></dt>
    <dt><a href="#">工程案例</a></dt>
    <dt><a href="#">新闻动态</a></dt>
    <dd>
        <ul class="verticalnav">
        <li><a href="#">公司新闻</a></li>
        <li><a class="current" href="#">行业新闻</a></li>
        </ul>
    </dd>
    <dt><a href="#">联系我们</a></dt>
</dl>

首先,通过外层列表的宽度,来控制整个导航所占用的水平空间。并通过垂直外边距和背景颜色,让外层链接各元素之间界限分明。

.accordion {
    width: 120px;
}
.accordion dt {
    margin: 1px;
    background: #6FB934;
}

其次,设置链接的样式。

.accordion a {
    display: block;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

这里使用子选择器 .accordion a 设置链接的样式,对整个手风琴菜单中的链接都产生影响,而二级导航中的链接需要局部调整。

.verticalnav li a {
    color: #666;
    font-size: 12px;
}

最后,设置二级导航中链接的悬停状态、激活状态,及当前链接的样式。

.verticalnav li a:hover, 
.verticalnav li a:focus {
    color: #ff5f3e;
}
.verticalnav li a.current {
    color: #ff5f3e;
}

到此为止,手风琴导航的就制作完成了,但整个导航都处于展开状态,还需要实现手风琴方式的展开和折叠效果。

这个可以通过 jQuery来实现,其基本思想是:第一个导航的子导航默认展开,其他全部隐藏。当单击某个 dt 下的链接时,所有已经显示的 dd 元素以动画方式隐藏,当前链接元素的父元素(即 dt)的相邻元素(即二级导航 dd 元素)以动画方式展开。代码如下:

$(document).ready(function(){
    $("dd:not(:first)").hide();
    $("dt a").click(function(){
        $("dd:visible").slideUp("slow");
        $(this).parent().next().slideDown("slow");
        return false;
    });
});

现在,当单击导航上的某个链接时,整个导航就能够以手风琴方式的展开和折叠了。运行结果如图 6‑14 所示:

手风琴导航
图6-14 手风琴导航

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验