<!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. DELPHI开发LINUX桌面程序

    DELPHI开发LINUX桌面程序 DELPHI官方目前为止尚不能开发LINUX桌面程序. 但三方控件FmxLinux(商业控件)是可以的.网上有破解版本.

  2. 【maven】maven项目移除Maven Dependencies后如何再添加进去

    比较着急这几天弄一个项目,所以匆忙间把maven项目的Maven Dependencies给remove掉了 如下图: 这下可好,整个项目报错了 解决方法: 对比了有Maven Dependencie ...

  3. seajs实例

    点击文本改变: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. [Linux] linux文件系统学习

    linux系统支持很多种文件系统. 1. 如何确认当前系统挂载了哪些文件系统? 使用mount命令可以查看当前系统上已经挂载了哪些文件系统, lqt@lqt-ThinkPad-T420:~$ moun ...

  5. iOS：判断用户名是否以字母开头、手机号输入、邮箱是否正确的正则表达式

    新建一个字符串分类:NSString(Check),定义类方法更方便 .h文件 #import <Foundation/Foundation.h> @interface NSString ...

  6. tracepath 路由跟踪命令

    [root@c1 scripts]# tracepath 100.2.4.144    (备注:linux系统) 1: c1.nulige.com (100.2.4.144) 0.047ms pmtu ...

  7. 安装pip源

    国内源地址: 豆瓣(douban) http://pypi.douban.com/simple/ 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 h ...

  8. [译]ES读写文档时shard-replication模型

    官网页面:https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-replication.html 本文是对官网页面的 ...

  9. SQL Server 2008数据库备份与恢复

    在这所要说的是“分离/附加”数据库: 1.分离数据库就是将某个数据库(如student_Mis)从SQL Server数据库列表中删除,使其不再被SQL Server管理和使用,但该数据库的文件(.M ...

  10. Netty Client和Server端实现

    本文基于Nett4.0.26.Final版本浅析Client与Server端通讯,先看服务器端: public class Server { public static void run(int po ...