不需要js的网页导航弹出效果

最新推荐文章于 2022-07-15 08:00:00 发布

pvfhv

最新推荐文章于 2022-07-15 08:00:00 发布

阅读量942

点赞数

分类专栏： javascript 文章标签：导航菜单菜单

本文链接：https://blog.csdn.net/pvfhv/article/details/5467283

版权

javascript 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

　　接上篇《延时提示框本质代码》文后，考虑导航栏弹出子菜单效果，可不可以不使用js代码呢，经研究，绝对可以，以下即是本人闲得没事时研究的结果。

　　本质：巧用position的定位，页面加载完成后通过修改子菜单的Postion的left或top使其淹没在网页的可视区域，当鼠标hover到子菜单的父级时，使其left或top恢复到auto的状态，就这么简单！！

　　代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            margin:200px auto;
        }
        .navwrap{
            width:896px;
            height:35px;
            line-height:35px;
            margin:0 auto;
            background:#0094ff;
        }
        .navwrap li{
            list-style-type:none;
            float:left;
        }

        #nav a{
            color:white;
            display:block;
            width:128px;
            text-align:center;
            text-decoration:none;
            border-right:1px solid white;
        }
        #nav a:hover{
            font-weight:bold;
        }
        #nav li{
            width:128px;
        }
        #nav li ul{
            position:absolute;
            left:-1000000px; /*先把它置于不可视的区域*/
            width:384px;
            background: #eaecef;
        }
        
        #nav li:hover ul{
            left:auto; /*把它置于可视的区域*/
        }
    </style>
</head>
<body>
<div class="navwrap">
        <ul id="nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">公司信息</a>
                <ul>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">业务平台</a></li>
                    <li><a href="#">全国子公司</a></li>

                </ul>
            </li>
            <li><a href="#">业务体系</a>
                <ul>
                    <li><a href="#">我的账户</a></li>
                    <li><a href="#">它的钱包</a></li>
                    <li><a href="#">随便取钱</a></li>
                </ul>
            </li>
            <li><a href="#">人力资源</a>
                <ul>
                    <li><a href="#">人才理念</a></li>
                    <li><a href="#">薪酬福利</a></li>
                    <li><a href="#">培训与发展</a></li>
                </ul>
            </li>
            <li><a href="#">企业文化</a>
                <ul>
                    <li><a href="#">使命与愿景</a></li>
                    <li><a href="#">核心价值观</a></li>
                    <li><a href="#">经营理念</a></li>
                </ul>
            </li>
            <li><a href="#">商务合作</a>
                <ul>
                    <li><a href="#">牛插业务</a></li>
                    <li><a href="#">代理商业务</a></li>
                    <li><a href="#">其他业务</a></li>
                </ul>
            </li>
            <li><a href="#">
                精彩活动</a>
                <ul>
                    <li><a href="#">公司活动</a></li>
                    <li><a href="#">员工活动</a></li>
                    <li><a href="#">员工文采</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>