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>
  • 相关阅读:
    java多线程--定时器Timer的使用
    java多线程--线程池的使用
    java多线程--多线程基础小结
    java基础--java.util.Date类型小结
    onClickRow 事件
    C#里的SubString和Convert.ToDateTime
    jquery+easyui开发、培训文档
    Jquery函数大全
    前端最全的 API 集锦
    17个CSS知识点整理
  • 原文地址:https://www.cnblogs.com/iriliguo/p/6379610.html
Copyright © 2011-2022 走看看