<!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. UltraISO（软碟通）制作安装Ubuntu系统的U盘安装盘

    1.开UltraISO(软碟通),加载要写入U盘的iso文件,注意,要求软碟通的版本是9.3以上的.如下图: 2.点击“启动光盘.写入硬盘映像: 3.开启个写入硬盘映像的窗口,硬盘驱动器那一项看清楚是 ...

  2. [Android Pro] 使用CursorLoader异步加载数据 from 3.0

    Android 3.0引入了CursorLoader实现异步加载数据,为了避免同步查询数据库时阻塞UI线程的问题.在API 11之前可以通过下载支持库,来使之前的系统支持此功能,下载页面为 http: ...

  3. Kubernetes 1.7版本安装

      为什么搞完kubernetes 1.5又要装1.7, :( 是因为微服务架构istio的要求,而且直接用yum安装怎么都是1.5,所以只能通过下载包并且改配置文件的方式了,也好,花两天时间把整个过 ...

  4. iOS：quartz2D绘图（显示绘制在PDF上的图片）

    quart2D既可以用来绘制图像到pdf上,也可以从pdf上读取图像并显示出来.在使用这种方式之前,还有一种方式可以用来读取显示pdf上的图像,即使用UIWebView网页视图控件- (void)lo ...

  5. WAF攻击与防御

    背景 对于腾讯的业务来说,有两个方面决定着WAF能否发挥效果,一个是合适处理海量流量的架构,另一个关键因素则是规则系统.架构决定着WAF能否承受住海量流量的挑战,这个在之前的篇章中简单介绍过(详情见主 ...

  6. LINUX提权笔记

    没啥技术含量,一种思路,让某些得到root权限webshell的童鞋可以快点拿到权限. 某日拿到某站webshell,RedHat 系统,Tomcat程序是root身份启动的,webshell当然也拥 ...

  7. fragment shader的优化

    ALU: 浮点数精度 选择性降低 shader 指令数 替换一些计算减小指令sqrt, sin, cos, recip 光照 计算用lightmap(用memory sample换计算) vertex ...

  8. vector iterator not incrementable For information on how your program can cause an an assertion Failure, see the Visual c + + documentation on asserts

    #include <list> using namespace std; int _tmain(int argc, _TCHAR* argv[]) { list<int> sl ...

  9. 企业建站系统MiinCMP1.0.5 标准版公布!

    2014-5-6日,Juuluu公布其企业建站系统MiinCMP1.0.5 标准版,1.0.5是一款相对成熟的企业站点解决方式.执行MiinCMP1.0.5,仅仅需2M的mysql,50m的java空 ...

  10. margin外边距问题

    1 .上下边距会叠加 !DOCTYPE html> <html> <head> <m<etacharset="UTF-8"> < ...