zoukankan      html  css  js  c++  java
  • jquery导航栏(方法2)



    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.1.1.min.js"></script>
    <style>
    *{
    margin:0;
    padding:0;
    }
    a {
    text-decoration: none;
    }
    li{
    list-style: none;
    cursor: pointer;
    }
    /*总样式*/

    .wrap {
    100%;
    height:46px;
    line-height:45px;
    background-color:pink;
    position: relative;
    }/*整个导航栏的样式*/

    .first {
    float: left;
    height:46px;
    10%;
    text-align: center;
    border-right:1px solid lightpink;
    }/*一级导航的样式*/
    #cart {
    float: right;
    margin-right: 1%;
    }
    #food {
    border-left: 1px solid lightpink;

    }

    ul .first .second, ul .first .three, ul .first .four, ul .first .five {
    border:1px solid pink;
    border-top: none;/*实现一二级导航无缝显示*/
    position: absolute;
    40.3%;
    display: none;
    background-color:whitesmoke;

    }/*二级导航样式(绝对定位+给定元素宽度实现二级导航宽过一级导航)*/


    ul .first .second, ul .first .three, ul .first .four, ul .first .five{
    left: 0;
    }


    .first:hover{
    background-color:whitesmoke;
    }


    @media (max- 600px) {
    .first {
    50px;
    }
    ul .first .second, ul .first .three, ul .first .four, ul .first .five{
    203px;
    }
    }/*解决屏幕变小样式变形问题*/
    </style>


    </head>
    <body>
    <div class="wrap">

    <ul>
    <li class="first" id="food" >
    美食
    <div class="second qq" >
    <p>chapter one</p>
    </div>

    </li>
    <li class="first" id="movie">
    电影
    <div class="three qq">
    <p>chapter two</p>
    </div>
    </li>
    <li class="first" id="travel">
    旅游
    <div class="four qq">
    <p>chapter three</p>
    </div>
    </li>
    <li class="first" id="hotel">
    酒店
    <div class="five qq">
    <p>chapter four</p>
    </div>
    </li>
    </ul>
    <div id="cart"><h3>购物车</h3></div>
    </div>

    <script>
    $(".first").hover(function () {
    $(this).children().show();
    },function () {
    $(this).children().hide();
    })
    /*jquery方法实现二级导航的显示与隐藏*/

    </script>
    </body>
    </html>
  • 相关阅读:
    弹性网卡支持私网多IP
    微服务浪潮中,程序猿如何让自己 Be Cloud Native
    Nacos v0.7.0:对接CMDB,实现基于标签的服务发现能力
    如何更高效的管理原生微服务应用
    如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes
    PHP flock文件锁
    MySQL锁(MyISAM和InnoDB)
    汽车操作系统革命:封闭还是开源?
    采集百度top500歌曲,python2.7.2
    关于revision 的cover letter
  • 原文地址:https://www.cnblogs.com/iriliguo/p/6379610.html
Copyright © 2011-2022 走看看