用jquery实现的一个超级简单的下拉菜单
更新时间：2014年05月18日 16:24:33 作者：
这篇文章主要介绍了用jquery实现的一个超级简单的下拉菜单,需要的朋友可以参考下
用jquery实现的一个超级简单的下拉菜单。
效果图
初始效果
鼠标悬浮效果
代码
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<style>
nav a {
text-decoration: none;
}
nav > ul > li {
float: left;
text-align: center;
padding: 0 0.5em;
}
nav li ul.sub-menu {
display: none;
padding-left: 0 !important;
}
.sub-menu li {
color: white;
}
.sub-menu li:hover {
background-color: black;
}
.sub-menu li:hover a {
color: white;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Programming
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Japanese
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('nav li').hover(function() {
$(this).find('.sub-menu').css('display', 'block');
}, function() {
$(this).find('.sub-menu').css('display', 'none');
});
});
</script>
</html>
效果图
初始效果
鼠标悬浮效果
代码
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<style>
nav a {
text-decoration: none;
}
nav > ul > li {
float: left;
text-align: center;
padding: 0 0.5em;
}
nav li ul.sub-menu {
display: none;
padding-left: 0 !important;
}
.sub-menu li {
color: white;
}
.sub-menu li:hover {
background-color: black;
}
.sub-menu li:hover a {
color: white;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Programming
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">Japanese
<ul class="sub-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('nav li').hover(function() {
$(this).find('.sub-menu').css('display', 'block');
}, function() {
$(this).find('.sub-menu').css('display', 'none');
});
});
</script>
</html>
相关文章
这篇文章主要介绍了jQuery中before()方法用法,以实例形式分析了before()方法的功能、定义与具体使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
这篇文章主要是对同域jQuery(跨)iframe操作DOM的示例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
jQuery是一种流行的JavaScript库，可以轻松地在网页中插入图片和文字。通过使用jQuery的插入功能，您可以在网页上动态地添加内容，从而提高用户体验。本文将介绍如何使用jQuery在图片和文字中插入内容，并提供一些实用的代码示例。2023-06-06
JQuery 1.6刚刚发布了，有几处性能和跨浏览器兼容性的改进，专门重写了属性模块2011-05-05
Jquery AutoComplete自动完成 的使用方法实例
jQuery的Autocomplete（自动完成、自动填充）插件有不少，但比较下来我感觉，还是bassistance.de的JQuery Autocomplete plugin比较强大，我们就来写一些代码感受一下。2010-03-03
网上的方法只有点击文字编辑并保持，但是没有完整的代码写怎么保存到数据库，本例用一条sql语句保存到数据库2014-04-04
这篇文章主要介绍了jQuery中:last选择器用法,实例分析了:last选择器的功能、定义及匹配时的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
因为工作的原因，从上周开始接触了jquery，以前我是自己写js的函数库，把一些常用的的方法写成函数，现在学习了jquery，发现还真是方便。不尽简洁了很多。用Ajax很方便，而且还可以很方便创造一些特效。2009-08-08
easy-ajax是为了治理前端乱写Ajax方法而生。接下来通过本文给大家介绍JQuery 封装 Ajax 常用方法，需要的朋友参考下2017-05-05
本篇文章主要是对jquery弹出层居中效果的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
最新评论