<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery实现导航栏</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        #navigation>ul{

            list-style: none;

        }

        #navigation>ul>li{

            float: left;

            width: 80px;

            height: 30px;

            background: #009f95;

            color: #ffffff;

            text-align: center;

            line-height: 30px;

            cursor:pointer;

        }

        #navigation>ul>li:hover{

            background:#0B61A4;

        }

        #navigation>ul>li>a{

            color:#fff;

            text-decoration:none;

        }

        #navigation>ul>li>ul{

            display:none;

        }

        #navigation>ul>li>ul>li{

            background: #00B83F;

            list-style: none;

        }

        #navigation>ul>li>ul>li:hover{

            background: #1E9FFF;

        }

        #navigation>ul>li>ul>li>a{

            color:#fff;

            text-decoration: none;

        }

    </style>

</head>

<body>

<div id="navigation">

    <ul>

        <li>

            <a href="">1</a>

            <ul>

                <li><a href="">11</a></li>

                <li><a href="">13</a></li>

                <li><a href="">14</a></li>

            </ul>

        </li>

        <li>

            <a href="">2</a>

            <ul>

                <li><a href="">21</a></li>

                <li><a href="">22</a></li>

                <li><a href="">23</a></li>

            </ul>

        </li>

        <li>

            <a href="">3</a>

        </li>

    </ul>

</div>

<script src="../js/vendor/jquery-3.2.1.min.js"></script>

<script>

    $("#navigation>ul>li:has(ul)").hover(function(){

        //show

        $(this).children('ul').stop().slideDown();

    },function(){

        //hide

       $(this).children('ul').stop().slideUp();

    })

</script>

</body>

</html>

jQuery实现导航栏的更多相关文章

  1. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  2. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  3. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  4. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  5. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  6. jquery实现导航栏头部点击变换颜色

    实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. jquery实现导航栏鼠标点击后实行背景高亮，点击离开恢复（超级简单！！！！），jquery导航栏

    1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...

  8. jquery实现导航栏效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  9. JQuery Mobile - 导航栏选中状态代码

    class="ui-btn-active" 参考: https://wizardforcel.gitbooks.io/w3school-jqmobile/content/8.htm ...

随机推荐

  1. javascript 字面量

    https://www.cnblogs.com/radius/p/6874165.html

  2. 存储过程存储过程需要用两个'',先where再Group，再Order by

    存储过程需要用两个'',先where再Group,再Order by  未完,待续

  3. Hadoop配置文件详解

    1       获取默认配置 配置hadoop,主要是配置core-site.xml,hdfs-site.xml,mapred-site.xml三个配置文件,默认下来,这些配置文件都是空的,所以很难知 ...

  4. String str = "1,2,3,4,5,6" 如何将这个字符串转换成int数组

    String str = "1,2,3,4,5,6"; string[] strS = str.Split(','); int[] num = new int[strS.Lengt ...

  5. centos 安装php扩展的两种方法

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   查看PHP版本: php -v 1 1 查看指定PHP版本: /usr/local/php/bin/php -v 1 1 ...

  6. 使用信号进行同步 sem_post

    使用信号进行同步 信号是 E. W. Dijkstra 在二十世纪六十年代末设计的一种编程架构.Dijkstra 的模型与铁路操作有关:假设某段铁路是单线的,因此一次只允许一列火车通过. 信号将用于同 ...

  7. iOS自动化-- 常用iOS命令

    iOS命令: 获取设备的的UDID idevice_id --list # 显示当前所连接设备的 udid instruments -s devices # 列出所有设备,包括真机.模拟器.mac i ...

  8. 015.1 Lock接口

    内容:Lock接口使用步骤,同步生产大白兔奶糖的例子 同步代码块的锁是隐式的,显式容易让我们理解.所以我们使用这个显式的方法,方便理解代码.######实现同步步骤:1.获取锁:lock()2.同步代 ...

  9. ubuntu 13.04添加 flash_plugin

    mv libflashplayer.so  /usr/lib/mozilla/plugins

  10. Mac下的mongodb安装

    mac下的mongodb安装主要有两种方式,一是手工安装,需在官网下载源文件,二是通过homebrew,至于homebrew不做介绍.既然是Mac系统下,我认为直接通过homebrew安装最好,省事还 ...