文档章节

jQuery实现下拉菜单

fucmlif
 fucmlif
发布于 2016/04/16 16:35
字数 326
阅读 65
收藏 0

html代码:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
	<script id="jquery_183" type="text/javascript" class="library" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <div id="box">
            <ul class="menu">
                <li class="level1">
                    <a class="level1_a" href="#">菜单1</a>
                    <ul class="level2">
                        <li><a href="#">链接1</a></li>
                        <li><a href="#">链接2</a></li>
                        <li><a href="#">链接3</a></li>
                        <li><a href="#">链接4</a></li>
                    </ul>
                </li>
                <li class="level1">
                    <a class="level1_a" href="#">菜单2</a>
                    <ul class="level2">
                        <li><a href="#">链接1</a></li>
                        <li><a href="#">链接2</a></li>
                        <li><a href="#">链接3</a></li>
                        <li><a href="#">链接4</a></li>
                    </ul>
                </li>
                <li class="level1">
                    <a class="level1_a" href="#" style="border-right:1px solid red;">菜单3</a>
                    <ul class="level2">
                        <li><a href="#">链接1</a></li>
                        <li><a href="#">链接2</a></li>
                        <li><a href="#">链接3</a></li>
                        <li><a href="#">链接4</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>


css代码:

.level2 {display:none;}
.level2 li {border:1px solid red;border-top:none;}
.bgred {background:red;color:#fff;}
li {list-style:none;text-indent:1em;line-height:32px;}
a {text-decoration:none;display:block;background-color:#fff;}
ul {padding-left:0px;}
.level1 {float:left;width:150px;}
.level1_a {border:1px solid red;border-right:none;}
.level1_a:hover {background:red;color:#fff;}
.level2 a:hover {background:red;color:#fff;}
.level2 a {color:#333;}
.menu {height:32px;width:450px;}


js代码:

$(document).ready(function(){
  $(".level1").hover(function(){
    $(this).addClass("bgred").children("ul").stop(true).slideToggle(700)
        .parent().siblings().children("a").removeClass("bgred")
        .next().hide(700);
    return false;
  });
});




© 著作权归作者所有

fucmlif
粉丝 0
博文 4
码字总数 844
作品 0
广州
前端工程师
私信 提问
9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj
2014/01/06
589
1
分享 7 款令人难忘的 jQuery 实用教程

这次分享的一些网页特效都是完全基于jQuery的,而且相信大部分插件都可以帮助WEB前端开发者简化很多开发工作,比如菜单、图片播放等实用功能。这里我向大家展示了这些插件的在线演示,同时也...

yykj
2012/12/05
6.6K
23
一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网...

迷路的阿修罗
2010/12/30
1K
1
推荐 6 款优秀的 jQuery/CSS3 应用插件

jQuery是一款非常轻巧优秀的JS类库,CSS3又可以十分方便地制作各种绚丽的网页效果,那么如果把jQuery的轻巧和CSS3的绚丽结合起来,相信一定会给网页添加不少精彩。下面搜集了几款非常出色的j...

yykj
2012/11/29
2.9K
9
8款实用jQuery插件实例欣赏及源码下载

jQuery的确是一款非常轻巧强大的JS框架,相信每一位WEB开发者都非常喜欢他。许多jQuery插件不仅开源,而且代码和设计都十分优雅,对自己的JS开发能力也会有很大提高。下面分享8款实用jQuery插...

yykj
2012/12/12
5
0

没有更多内容

加载失败,请刷新页面

加载更多

Nervos CKB 脚本编程简介[1]:验证模型

CKB 脚本编程简介[1]: 验证模型 本文作者:Xuejie 原文链接:Introduction to CKB Script Programming 1: Validation Model 本文译者:Jason,Orange 译文链接:https://talk.nervos.org/t/c...

NervosCommunity
34分钟前
6
0
消息中间件——RabbitMQ的高级特性

前言 前面我们介绍了RabbitMQ的安装、各大消息中间件的对比、AMQP核心概念、管控台的使用、快速入门RabbitMQ。本章将介绍RabbitMQ的高级特性。分两篇(上/下)进行介绍。 消息如何保障100%的...

Java架构师ya七
今天
9
0
如何编写高质量的 JS 函数(1) -- 敲山震虎篇

本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm7Xi7JxQ 作者:杨昆 一千个读者,有一千个哈姆雷特。 此系列文章将会从函数的执行机制、鲁棒性、函...

vivo互联网技术
今天
7
0
学会这5个Excel技巧,让你拒绝加班

在网上,随处都可以看到Excel技巧,估计已看腻了吧?但下面5个Excel技巧会让你相见恨晚。关键的是它们个个还很实用 图一 技巧1:快速删除边框 有时当我们处理数据需要去掉边框,按Ctrl+Shif...

干货趣分享
今天
11
0
JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部