<!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. zabbix_3.0安装部署与中文支持

    Zabbix 3.0界面焕然一新,一改10多年的老面孔,alpha4的更新具体记录如下:http://www.zabbix.com/rn3.0.0alpha4.php What's New in 3. ...

  2. js中问号

    是三目运算,如:(a==b)?a:b 也就是说,先判断a是否等于b,如果是(true),那么返回a,如果否(false),则返回b greeting=(visitor=="PRES" ...

  3. SQL语句的执行顺序 1>优先执行，然后依数字排序

                  1>…From 表       2>…Where 条件       3>…Group by 列       4>…Having 筛选条件       ...

  4. Sqoop操作集合

    1.在hive中建一个与mysql中一模一样的表 sqoop create-hive-table --connect jdbc:mysql://***.**.***.**:3306/数据库名称 --t ...

  5. Exchange邮件系统日志查看及管理

    1.查看邮件服务器上某个时间段内的所有邮件信息: Get-MessageTrackingLog -ResultSize Unlimited -Start "3/6/2015 8:40AM&q ...

  6. iOS中 Proxy和的delegate区别

    在ios中使用proxy代理模式,经常容易和delegate委托模式混淆. 委托模式(delegate),是简单的强大的模式,可让一个对象扮演另外对象的行为.委托对象保持到另外对象的引用,并在适当的时 ...

  7. 好用的css库

    实现元素各种抖动效果:https://elrumordelaluz.github.io/csshake/

  8. Charles使用笔记

    Charles本身其实是一款十分强大且易用的代理软件,最近用的比较多,大致整理了一下自己用到的一些东西.   Charles的主要作用 1.查看网络请求,手动分析数据 2.代理接口,模拟数据      ...

  9. Docker扩展.md

    逻辑卷 Volume 数据卷是一个可供一个或多个容器使用的特殊目录,它绕过 UFS,可以提供很多有用的特性: 数据卷可以在容器之间共享和重用 对数据卷的修改会立马生效 对数据卷的更新,不会影响镜像 数 ...

  10. mongod入门实战

    mongod-入门 摘要: 本篇文档,带你快速启动一个mongod,到搭建主从+复制集模式的入门. 内容包括:单实例安装,复制集构建,分片构建,分片及复制集整合. 软件相关信息介绍 MongoDB 是 ...