<!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. org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): cn.gaiay.business.helper.dao.LiveRegenrationRecordMapper.insert

    原因分析: 字段名称.报名.类名 对应不上 ,比如colomn和property属性 反了.. 按以下步骤一一执行: 1:检查xml文件所在的package名称是否和interface对应的packa ...

  2. HTML 的 style 属性

    style 属性用于改变 HTML 元素的样式. This text is in Verdana and red This text is in Times and blue This text is ...

  3. Oracle使用ODBC连接配置

    该配置是在windows 7 32位下进行的,程序已经通过了测试(使用VBS进行的测试) 1.文件下载 ------------------------------------------------ ...

  4. c# datarow[] 转换成 datatable， List<T> 转datatable

      c# datarow[] 转换成 datatable, List<T> 转datatable DdataRow[]转成Datatable private DataTable ToDat ...

  5. MySQL 数据库--SQL语句优化

    explain查询和分析sql 开发中,为满足一业务功能,使用mysql书写sql时,一条sql往往有多种写法,那么我们就需要选择执行效率比较高的sql. 因此要比较分析sql的执行过程,且同一条sq ...

  6. 沉淀再出发：java的文件读写

    沉淀再出发:java的文件读写 一.前言 对于java的文件读写是我们必须使用的一项基本技能,因此了解其中的原理,字节流和字符流的本质有着重要的意义. 二.java中的I/O操作 2.1.文件读写的本 ...

  7. java数组回顾---线性查找最大值最小值---二分查找

    import java.util.Scanner; public class ArrayDemo { public static void main(String []args) { //------ ...

  8. JavaScript的DOM_动态加载脚本和样式

    一.动态加载脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件 比如:我们 ...

  9. 没有什么问题是sudo rm -rf /* 解决不了的

    没有什么问题是sudo rm -rf /* 解决不了的. . . . . . . 如果有的话,赶紧跑.

  10. the longest distance of a binary tree

    版权声明:欢迎查看本博客.希望对你有有所帮助 https://blog.csdn.net/cqs_2012/article/details/24880735 the longest distance ...