• 内页banner
  • ui1
  • 内页3
技术专栏您当前所在位置: 首页 > 技术专栏

前端开发:如何使用css制作网页中的多级菜单,代码如下

更新时间:2016-05-18 15:56:07点击次数:284次字号:T|T

在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航、二维码显示隐藏、文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少。

 

实现逻辑:

 

核心:hover伪类控制子元素的显示隐藏,添加css3动画;  (没错就是这样简单)

 

:hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p。当用户鼠标离开元素时,恢复元素原有的样式显示

 

实现代码:

 

<style type="text/css">

  *{margin: 0; padding: 0;}

    ul{ list-style: none; }

    a{text-decoration: none;}

    

        .nav{ height: 50px;

            font-size: 14px;

             background-color:#0081C2;

         }

        .nav ul{ width: 90%; margin: 0 auto;}

        .nav ul li{

            display: inline-block;

            width: 15%; height:50px;

            text-align: center; line-height: 45px;

            position: relative;

            }

/*menu相对li定位 并默认隐藏*/

 .menu{ position: absolute;

                left: 0; top:50px;

                width: 100%; background-color: #005580;

                line-height: 33px;

                display: none;

            }

        .menu p{ width: 100%; height: 35px;}

        .menu p a:hover{ color: #dfdfdf;}

        .nav ul li a{display: block;

                    width: 100%;  height: 100%;

                    color: #ffffff; text-align: center;

                }

/*li鼠标hover时显示*/

        .nav ul li:hover{ background-color: #00007D;}

        .nav ul li:hover .menu{ display: block;}

        

    </style>

    

    <div class="nav">

        <ul>

            <li>

                <a href="#">菜单选项一</a>

                <div class="menu">

                    <p><a href="#">二级菜单1</a></p>

                    <p><a href="#">二级菜单2</a></p>

                    <p><a href="#">二级菜单3</a></p>

                    <p><a href="#">二级菜单4</a></p>

                </div>

            </li>

            <li>

                <a href="#">菜单选项二</a>

                <div class="menu">

                    <p><a href="#">二级菜单1</a></p>

                    <p><a href="#">二级菜单2</a></p>

                    <p><a href="#">二级菜单3</a></p>

                    <p><a href="#">二级菜单4</a></p>

                </div>

            </li>

            <li><a href="#">菜单选项三</a></li>

            <li><a href="#">菜单选项四</a></li>

            <li><a href="#">菜单选项五</a></li>

            <li><a href="#">菜单选项六</a></li>

        </ul>

    </div>