<!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. 基于yaf框架和uploadify插件，做的一个导入excel文件，查看并保存数据的功能

    思路: 1.首先,页面前端,上传附件,提交给后台,并带一个随机性的参数(可以用时间戳): 2.后端接收附件,做一系列的逻辑处理,无误后,将对应的文件存储在上传的目录下: 3.然后前端,上传附件成功后, ...

  2. MyBatis基本配置和实践(四）

    一.Mybatis整合spring 1.整合思路 SqlSessionFactory对象应该放到spring容器中作为单例存在. 传统dao的开发方式中,应该从spring容器中获得sqlsessio ...

  3. linux-软件下载安装

    RPM 安装 rpm -ivh 包全名 :-i(install):安装:-v(verbose):显示详细信息:-h(hash):显示进度: rpm -Uvh 包全名:-U(upgrate):升级 rp ...

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

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

  5. Apache的配置详解

    Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd.conf文件中修改. 主站点的配置(基本配置) (1) 基本配置: ServerRoot "/mnt/s ...

  6. composer 应用【Modern PHP】

    目录 安装(linux) composer.lock 文件 composer.josn 文件 自动加载PHP组件 组件包库地址 实例 composer私有仓库 composer 遵循PSR准则,解决安 ...

  7. ZT 理解class.forName()

    理解class.forName() 分类: [Java SE 基础] 2012-05-17 07:53 3892人阅读 评论(3) 收藏 举报 classloaderclassjdbcejb数据库 目 ...

  8. 设计模式之Proxy(代理)

    设计模式之Proxy(代理) 板桥里人banq http://www.jdon.com 2002/04/21/ 理解并使用设计模式,能够培养我们良好的面向对象编程习惯,同时在实际应用中,可以如鱼得水, ...

  9. 四、并行编程 - 并行LINQ（PLINQ） 的使用。AsParallel

    用于对内存中的数据做并行运算,也就是说其只支持 LINQ to Object 的并行运算 一.AsParallel(并行化) 就是在集合后加个AsParallel(). 例如: , ); == ); ...

  10. css实现文字裁切效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...