<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>学习导航栏的制作</title>

        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

            $(document).ready(function() {

                $(".li1").click(function() {

                    $(this).next().addClass("dlHover");//取得其下一个兄弟元素

                });

                $(".ul1").hover(function() {//第一个函数作为鼠标悬浮时运行的函数

                    $(this).children(".li1").addClass("bg");//取得子元素中class="li1"的元素

                }, function() {//第二个函数作为鼠标离开时运行的函数

                    $(this).children(".li1").removeClass("bg");

                    $(this).children(".li2").removeClass("dlHover");

                });

            });

        </script>

        <style>

            *{margin: 0px;padding: 0px;text-align: center;}

            ul li{list-style: none;}

            .nav_div{height: 20px;}

            .li2{display:none;width: 100px;border: 1px solid gray;background: #00FFFF;}

            .dlHover{position:absolute;z-index: 9999;display: block;}

            .ul1{border: 1px solid gray;width: 100px;background-color: #999999;}

            .bg{background-color: #1F9999;}

            dl,dt,dd{border: 1px solid gray;width: 200px;}

            .ul1{float: left;}

        </style>

    </head>

    <body>

        <div class="nav_div">

            <!-- 导航開始 -->

            <ul class="ul1">

                <li class="li1">导航1</li>

                <li class="li2">

                    <ul>

                        <li><a href="#">二级菜单1</a><li>

                        <li><a href="#">二级菜单1</a></li>

                    </ul>

                </li>

            </ul>

            <ul class="ul1">

                <li class="li1">导航2</li>

                <li class="li2">

                    <ul>

                        <li><a href="#">二级菜单2</a><li>

                        <li><a href="#">二级菜单2</a></li>

                    </ul>

                </li>

            </ul>

            <ul class="ul1">

                <li class="li1">导航3</li>

                <li class="li2">

                    <ul>

                        <li><a href="#">二级菜单3</a><li>

                        <li><a href="#">二级菜单3</a></li>

                    </ul>

                </li>

            </ul>

        </div>

        <!-- 导航開始 -->

        <div>

            <dl style="border: 1px solid gray;">

                <dt>学习导航栏的制作</dt>

                <dd>这是一个简单的导航栏</dd>

                <dd>这是一个简单的导航栏</dd>

                <dd>这是一个简单的导航栏</dd>

            </dl>

        </div>

    </body>

</html>

用jquery制作一个简单的导航栏的更多相关文章

  1. jquery制作一个简单的轮播

    效果图: 演示地址: http://ae6623.cn/demo/slider/index.html 思路: 利用css的定位属性 left 进行调整图片的显示,每次点击上一页下一页按钮的时候,-图片 ...

  2. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  3. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  4. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  5. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  6. 实例学习SSIS（一）--制作一个简单的ETL包

    原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...

  7. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  8. PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例

    前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...

  9. 制作一个简单的WPF图片浏览器

    原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片 ...

随机推荐

  1. 最快的csv文件入到数据库的方法

    最快的csv文件入到数据库的方法:EXEC master.sys.sp_configure 'show advanced options', 1 ; RECONFIGURE ; EXEC master ...

  2. 【maven】pom.xml文件没错，但是项目有小红叉,Problems中可以看到错误：“Dynamic Web Module 3.0 requires Java 1.6 or newer.”

    解决方法: 1.将 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>m ...

  3. IP地址网段规划

  4. Spark Streaming updateStateByKey和mapWithState源码解密

    本篇从二个方面进行源码分析: 一.updateStateByKey解密 二.mapWithState解密 通过对Spark研究角度来研究jvm.分布式.图计算.架构设计.软件工程思想,可以学到很多东西 ...

  5. os.waitpid()无法获取sys.exit()退出时的status code

    [目的] 父进程使用os.waitpid()等待子进程退出,并检测子进程的exit code,以决定是否重启子进程. (常见的应用场景是:子进程接收外部命令,收到"stop"时退出 ...

  6. ESLint:can not ESLint annotation...

    刚开始用webstorm开发VUE,提示这个东西: 安装一个npm库就可以了 命令行执行:npm install eslint -g

  7. java匿名内部类之RocketMQ中的应用

    匿名内部类在spring中没怎么见用,在RocketMQ中有大量的应用. 确实可以提高开发效率.这可能代表两种写代码的态度吧. 匿名内部类简单来说就是直接在函数中实现接口方法,不需要声明一个接口实现类 ...

  8. SSMybatis整合 --详细解读Mybatis对oracle数据库进行增删改查(一)

    Mybatis是现在主流的持久化层框架,与Hibernate不同的是,它鼓励程序员使用原声SQL语句对数据库进行操作.因此提供了非常灵活的功能.特别是当数据库同时访问数过多,需要进行优化时,使用sql ...

  9. vscode Gitlens插件 查看代码提交

    GitLens

  10. 一学就会之ado.net（一）

    ado.net十一组用于和数据源进行交互的面向对象类库.数据源能够是数据库也能够是文本文件.excel表格或者XML文件. 简单来说.ado.net就是与不同的数据源进行交互(增删改查)的. ado. ...