html5 菜单公共 html菜单页面代码

转载

网络智叶 2023-07-13 22:19:54

文章标签 html5 菜单公共 html css css3 二级菜单 文章分类 HTML5 移动开发

HTML下拉菜单代码实现

实现结果

html5 菜单公共 html菜单页面代码_html

html5 菜单公共 html菜单页面代码_css3_02

HTML代码

<nav class="div_nav">
        <ul>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层</a>
                <ul class="second">
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
            </li>
        </ul>
    </nav>

CSS代码

/* 消除内外边距 */    
    * {
        margin: 0px;
        padding: 0px;
    }
    /* 消除列表的小点 */    
    li {
        list-style: none;
    }
    a {
        /* 行内元素转块内元素 */
        display: block;
        /* 去除超链接下划线 */
        text-decoration: none;
        /* 字体颜色 */
        color: black;
        /* 使用内边距撑开盒子，以便适应不同字数的菜单项 */
        padding: 10px 15px;
        /* 设置字体大小 */
        font-size: 14px;
        /* 设置背景颜色 */
        background-color: rgb(218, 239, 246);
    }
    /* 设置鼠标经过时的样式 */    
    a:hover {
        background-color: rgb(195, 223, 247);
        /* 使用动画为字体添加动态变化的阴影 */
        animation: shadow 1s linear 0s infinite alternate;
    }
    /* 倒数四个a添加有边框-一级菜单 */    
    .div_nav>ul>li:nth-of-type(-n+4)>a {
        border-right: 1px solid;
        border-color: rgb(204, 219, 212);
    }
    /* 同上-二级菜单*/    
    .div_nav>ul>li>ul>li:nth-of-type(-n+4)>a {
        border-bottom: 1px solid;
        border-color: rgb(184, 188, 186);
    }
    /* 最外层盒子设置高度和上边距 */    
    .div_nav {
        height: 36.8px;
        margin-top: 100px;
    }
    /* 一级菜单项设置向左浮动 */    
    .div_nav>ul>li {
        float: left;
    }
    /* 菜单项居中显示 */    
    .div_nav>ul {
        width: 476px;
        height: 100%;
        margin-left: 50%;
        transform: translate(-50%);
    }
    /* 隐藏二级菜单 */    
    .second {
        display: none;
    }
    /* 鼠标经过时显示二级菜单 */   
    .div_nav>ul>li:hover .second {
        display: block;
    }
    /* 字体阴影的动画设计 */    
    @keyframes shadow {
        0% {
            color: black;
            text-shadow: 0px 0px 0px rgba(148, 202, 244, 0.689);
        }
        100% {
            color: rgb(86, 88, 88);
            text-shadow: 0px 0px 20px rgb(32, 36, 249);
        }
    }

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
</head>
<style>
    /* 消除内外边距 */
    
    * {
        margin: 0px;
        padding: 0px;
    }
    /* 消除列表的小点 */
    
    li {
        list-style: none;
    }
    
    a {
        /* 行内元素转块内元素 */
        display: block;
        /* 去除超链接下划线 */
        text-decoration: none;
        /* 字体颜色 */
        color: black;
        /* 使用内边距撑开盒子，以便适应不同字数的菜单项 */
        padding: 10px 15px;
        /* 设置字体大小 */
        font-size: 14px;
        /* 设置背景颜色 */
        background-color: rgb(218, 239, 246);
    }
    /* 设置鼠标经过时的样式 */
    
    a:hover {
        background-color: rgb(195, 223, 247);
        /* 使用动画为字体添加动态变化的阴影 */
        animation: shadow 1s linear 0s infinite alternate;
    }
    /* 倒数四个a添加有边框-一级菜单 */
    
    .div_nav>ul>li:nth-of-type(-n+4)>a {
        border-right: 1px solid;
        border-color: rgb(204, 219, 212);
    }
    /* 同上-二级菜单*/
    
    .div_nav>ul>li>ul>li:nth-of-type(-n+4)>a {
        border-bottom: 1px solid;
        border-color: rgb(184, 188, 186);
    }
    /* 最外层盒子设置高度和上边距 */
    
    .div_nav {
        height: 36.8px;
        margin-top: 100px;
    }
    /* 一级菜单项设置向左浮动 */
    
    .div_nav>ul>li {
        float: left;
    }
    /* 菜单项居中显示 */
    
    .div_nav>ul {
        width: 476px;
        height: 100%;
        margin-left: 50%;
        transform: translate(-50%);
    }
    /* 隐藏二级菜单 */
    
    .second {
        display: none;
    }
    /* 鼠标经过时显示二级菜单 */
    
    .div_nav>ul>li:hover .second {
        display: block;
    }
    /* 字体阴影的动画设计 */
    
    @keyframes shadow {
        0% {
            color: black;
            text-shadow: 0px 0px 0px rgba(148, 202, 244, 0.689);
        }
        100% {
            color: rgb(86, 88, 88);
            text-shadow: 0px 0px 20px rgb(32, 36, 249);
        }
    }
</style>


<body>
    <nav class="div_nav">
        <ul>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
                <ul class="second">
                    <li><a href="#">第二层菜单</a></li>
                    <li><a href="#">第二层菜单</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层</a>
                <ul class="second">
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                    <li><a href="#">第二层</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第一层菜单</a>
            </li>
        </ul>
    </nav>
</body>

</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。