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>
  • 相关阅读:
    winform中利用正则表达式得到有效的电话/手机号
    winform运行时如何接受参数?(示例)
    [基础]Javascript中的继承示例代码
    [转]C#中"is" vs "as"
    Javascript数组常用方法[包含MS AJAX.NET的prototype扩展方法]示例
    linq学习笔记(一)
    用winform应用程序登录网站的解决方案
    [转贴]操纵自如--页面内的配合与通信
    .net3.0中的扩展方法(示例)
    window.location或window.open如何指定target?
  • 原文地址:https://www.cnblogs.com/iriliguo/p/6379610.html
Copyright © 2011-2022 走看看