<!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. express-session的简单使用说明

    我们知道Internet 通过协议分为stateful和stateless两类,而http是stateless协议,客户端发送请求到服务端建立一个连接,请求得到响应后连接即中断,服务器端不会记录状态, ...

  2. python3 str和bytes之间转换

    a bytes-like object is required, not 'str' 碰到 这个错误 ,是因为需要是的bytes,不是str bytes -> str: 1  str-> ...

  3. 网络管理命令list

    网络管理 axel 多线程下载工具 tcpreplay 将PCAP包重新发送,用于性能或者功能测试 hping3 测试网络及主机的安全 ssh-copy-id 把本地的ssh公钥文件安装到远程主机对应 ...

  4. C语言大总结

    C语言大总结 一. C语言基本常识 1.语言由函数组成 2.main是程序入口 3.C语言中不能出现中文或中文字符 (凝视和字符串除外) keyword : C语言提供表示特殊含义的单词 特点 : 1 ...

  5. from表单实现无跳转上传文件，接收页面后台数据

    实现无跳转发送表单数据.文件,并能接收后台返回的数据. 主要技术要点: 1.form表单添加target属性,指定一个iframme的name:form表单提交后在iframe内嵌窗口接受响应,主页面 ...

  6. [Python爬虫] 之三十：Selenium +phantomjs 利用 pyquery抓取栏目

    一.介绍 本例子用Selenium +phantomjs爬取栏目(http://tv.cctv.com/lm/)的信息 二.网站信息 三.数据抓取 首先抓取所有要抓取网页链接,共39页,保存到数据库里 ...

  7. CocoSourcesCS 2

    CocoSourcesCS 2 /*------------------------------------------------------------------------- DFA.cs - ...

  8. 修改ASPCMS升级扩展功能

    修改 inc/aspcms_templateFun.asp 查找"content=decodeHtml(rsObj("Content"))" 替换为”conte ...

  9. MVC入门教程二[第一个小Demo]（转载）

    本文目标 1.了解"模型"."视图"."控制器"的创建.调试和使用过程. 本文目录 1.创建模型 2.创建视图 3.创建控制器 4.调试 5 ...

  10. Spring Boot环境下自定义shiro过滤器会过滤所有的url的问题

    在配置shiro过滤器时增加了自定义的过滤器,主要是用来处理未登录状态下返回一些信息 //自定义过滤器 Map<String, Filter> filtersMap = new Linke ...