提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

CSS3 二级菜单

css3 菜单 二级
2023-09-11 14:22:55 时间 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF8">
<style>
    body {
        margin: 0;
    }
    nav {
        font-size: 14px;
        /* 由于其下的菜单元素都是float的,如果不设置其width和position:relative,当宽度不够时,会变到下一行去 */
        min-width: 1415px;
        width: 100%;
        position: relative;
        /* 由于其子元素全是absolute或float,所以其检测不到子元素高度,因此它的高度将被设为0,所以需要手动设置其height */
        height: 41.5px;
        background-color: #444;
    }
    nav dl {
        /* 去掉列表的上边界 */
        margin: 0;
    }
    /* 所有导航栏 */
    nav dd {
        /* dd或者li的左边距都是margin造成的*/
        margin: 0;
        width: 200px;
        text-align: center;
        background-color: #444;
    }
    nav a {
        /* inline-block不会换行,block会自动换行,但是后面接了一个float所以都一样
           另外没有display:block或者display:inline-block的话padding不会生效;
         */
        display: inline-block;
        /* 设置父元素的高度无法使其垂直居中,所以只能通过line-height或padding或margin来实现 */
        line-height: 40px;
        color: white;
        text-decoration: none;
    }
    nav>dl {
        position: absolute;
    }
    nav>dl>dd {
        /* float和position:absolute的作用一样*/
        float: left;
        border-left: 1px solid black;
    }
    nav>dl>dd:last-child {
        border-right: 1px solid black;
    }
    /* '>'表示前一个元素是后一个元素的父元素 */
    nav>dl>dd:hover {
        background-color: black;
    }
    nav>dl>dd:hover>a {
        font-weight: bold;
    }
    /* 二级导航栏 */
    nav>dl>dd>dl>dd {
        background-color: #555;
        /*border: none;*/
    }
    nav>dl>dd>dl>dd:hover {
        background-color: #600;
        font-weight: bold;
    }
    nav>dl>dd>dl {
        display: none;
        /* 这里不能做height的动画,因为并不能用height:100%,只能用具体的height像素值
           transition: height 5s;
           height: 0px;
           overflow: hidden;
        */
    }
    nav>dl>dd:hover>dl {
        /* 只有当鼠标移到该列表项时,该项的子列表才显示 */
        display: block;
    }
    main {
        /* 这里要清空float属性,否则正文部分会还是环绕布局 */
        clear: left;
        padding: 20px;
    }
</style>
</head>
<body>
<header>
    <nav>
        <dl>
            <dd><a href="#">网页前端编程语言</a>
                <dl>
                    <dd><a href="#">HTML5</a></dd>
                    <dd><a href="#">CSS3</a></dd>
                    <dd><a href="#">Javascript</a></dd>
                </dl>
            </dd>
            <dd><a href="#">网页前端编程框架</a>
                <dl>
                    <dd><a href="#">Less</a></dd>
                    <dd><a href="#">Sass</a></dd>
                    <dd><a href="#">Bootstrap</a></dd>
                    <dd><a href="#">jQuery</a></dd>
                    <dd><a href="#">jQuery UI</a></dd>
                    <dd><a href="#">jQuery EasyUI</a></dd>
                    <dd><a href="#">AngularJS</a></dd>
                    <dd><a href="#">Vue.js</a></dd>
                </dl>
            </dd>
            <dd><a href="#">网页后端编程语言</a>
                <dl>
                    <dd><a href="#">PHP</a></dd>
                    <dd><a href="#">ASP.NET</a></dd>
                    <dd><a href="#">JSP</a></dd>
                    <dd><a href="#">Ruby</a></dd>
                    <dd><a href="#">Node.js</a></dd>
                    <dd><a href="#">Dart</a></dd>
                    <dd><a href="#">Django</a></dd>
                    <dd><a href="#">Docker</a></dd>
                </dl>
            </dd>
            <dd><a href="#">手机编程语言</a>
                <dl>
                    <dd><a href="#">Objective-C</a></dd>
                    <dd><a href="#">Swift</a></dd>
                    <dd><a href="#">Android</a></dd>
                    <dd><a href="#">jQuery Mobile</a></dd>
                    <dd><a href="#">ionic</a></dd>
                    <dd><a href="#">PhoneGap</a></dd>
                </dl>
            </dd>
            <dd><a href="#">PC端编程语言</a>
                <dl>
                    <dd><a href="#">Java</a></dd>
                    <dd><a href="#">C</a></dd>
                    <dd><a href="#">C++</a></dd>
                    <dd><a href="#">C#</a></dd>
                    <dd><a href="#">Visual Basic .NET</a></dd>
                    <dd><a href="#">Assembly language</a></dd>
                    <dd><a href="#">Qt</a></dd>
                    <dd><a href="#">Go</a></dd>
                    <dd><a href="#">Delphi</a></dd>
                    <dd><a href="#">Visual Basic</a></dd>
                </dl>
            </dd>
            <dd><a href="#">数据库编程语言</a>
                <dl>
                    <dd><a href="#">Oracle</a></dd>
                    <dd><a href="#">MySQL</a></dd>
                    <dd><a href="#">mariadb</a></dd>
                    <dd><a href="#">SQLite</a></dd>
                    <dd><a href="#">MongoDB</a></dd>
                    <dd><a href="#">IndexDB</a></dd>
                </dl>
            </dd>
            <dd><a href="#">统计分析语言</a>
                <dl>
                    <dd><a href="#">Python</a></dd>
                    <dd><a href="#">Perl</a></dd>
                    <dd><a href="#">R</a></dd>
                    <dd><a href="#">MATLAB</a></dd>
                </dl>
            </dd>
        </dl>
    </nav>
</header>
<main>
    <article>
        <p>导航栏是指位于页眉区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接博客的各个页面的作用。</p>
        <h4>应用范围:</h4>
        <p>通常情况下，<a href="http://baike.baidu.com/view/23618.htm" target="_blank">wordpress<sup>[1]</sup></a>  平台主题里的导航栏是不允许将其链接任意定制成其它链接的，但是每当你撰写了一个新页面，导航栏就会自动多出一个链接指向该页面的按钮。
    一般都是使用在WEB网站中，例如百度眉页上面的一些选项"新闻，网页，MP3，知道…"等就是导航栏的一种范例。
    网站使用导航栏是为了让访问者更清晰明朗的找到所需要的资源区域，寻找资源。</p>
    </article>
</main>
</body>
</html>

这里写图片描述

要想添加下拉动画，只需要在CSS的最后添加如下代码

/* 要想制作拉下动画由于不知道dl的高度，那么就只能变换dd的高度了 */
    nav>dl>dd>dl {
        display: block;
    }
    nav>dl>dd>dl>dd {
        transition: height 1s;
        height: 0px;
    }
    nav>dl>dd:hover>dl>dd {
        height: 40px;
    }

相关文章