<!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. 定时任务框架-quartz

    依赖 <!-- 定时任务jar --> <dependency> <groupId>org.quartz-scheduler</groupId> < ...

  2. 【IntelliJ IDEA】在idea上操作 git分支合并【如何将远程swagger分支 合并到 远程 master分支上】【如何切换 本地分支】

    ============================================ 明确一点: 如果项目交给git管理了[如何将项目交给git管理:https://www.cnblogs.com ...

  3. Luci实现框架

    转自:http://www.cnblogs.com/zmkeil/archive/2013/05/14/3078774.html 1.总述 上一篇总结了uhttpd的工作方式,openwrt中利用它作 ...

  4. [Java基础] java的守护线程与非守护线程

    最近重新研究Java基础知识,发现以前太多知识知识略略带过了,比较说Java的线程机制,在Java中有两类线程:User Thread(用户线程).Daemon Thread(守护线程) ,(PS:以 ...

  5. JBoss入门

    很多内容摘自 https://www.jianshu.com/p/4baaf549436b 1.安装目录 安装完Jboss后得目录结构 目录 功能 appclient/ 包含应用程序客户容器的配置细节 ...

  6. synchronized 线程同步-类级别锁定

    1.demo 说明:代码中通过 printNum 方法传入参数判断 a.b 分别对 num 这个参数的值进行了修改. package demo1; import sun.applet.Main; pu ...

  7. Android LayoutInflater布局填充器

    Android LayoutInflater布局填充器 把一份xml布局文件转为View对象,这就是layoutinflater的作用. 对于一个没有被载入或者想要动态载入的界面,都需要使用Layou ...

  8. urllib库在python2和python3环境下的使用区别

    好东西啊!!! Python 2 name Python 3 name urllib.urlretrieve() urllib.request.urlretrieve() urllib.urlclea ...

  9. 封装实现JavaScript 文件的动态载入功能

    function loadScript(url, callback){ var script = document.createElement ("script") script. ...

  10. [莫队算法 线段树 斐波那契 暴力] Codeforces 633H Fibonacci-ish II

    题目大意:给出一个长度为n的数列a. 对于一个询问lj和rj.将a[lj]到a[rj]从小到大排序后并去重.设得到的新数列为b,长度为k,求F1*b1+F2*b2+F3*b3+...+Fk*bk.当中 ...