<html>
<head>
<title>test nav</title>
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$("ul").click(function(e){
var $target=$(e.target);
if($target.next("ul").is(":hidden")){
$target.next("ul").show();
}
else{
$target.next("ul").hide();
}
});
});
</script>
<body>
<ul>
<li>1</li>
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
<li>2</li>
<ul>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
<li>3</li>
<ul>
<li>31</li>
<li>32</li>
<li>33</li>
</ul>
</ul>
</body>
</html>
代码已经贴上。如有疑问可以留言。
仅供菜鸟分享，大神勿喷。
相关推荐
4.jQuery导航插件下载之支持三级的Menu暖色、动画、折叠功能的导航菜单 5.jquery美化CheckBox的插件下载 6.jQuery美化表单漂亮插件jqtransform下载 7.jquery强大表单字符输入限制插件jQuery AlphaNumeric下载...
本文实例讲述了jQuery实现简单漂亮的Nav导航菜单效果。分享给大家供大家参考，具体如下： 自己写的一个简单的导航菜单，先看效果： 鼠标悬浮时菜单项向上移动成蓝底白字，点击之后底部会有蓝条表示当前选中项。 ...
其实原理很简单就是利用css和JQuery样式选择器实现的。 下面举个例子具体介绍一下如何这些功能，案例如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&...
这是一款基于jquery实现的垂直导航菜单特效代码，总共有三级，实现效果简单大方，最后一级还可以进行图片展示说明，是一款非常实用的导航菜单特效源码。 效果演示 源码下载 为大家分享的jQuery垂直多级导航菜单代码...
简单实现依赖于jQuery自定义快捷的炫酷导航条效果,样式效果完全自定义。^_^ 来一起感受它的魅力吧！ 1.技术点 两个个鼠标事件： onmouseover：鼠标移到指定对象上时触发； onmouseout：鼠标离开指定时触发； 2...
本文实例讲述了jquery实现简单的二级导航下拉菜单效果。分享给大家供大家参考。具体如下： jQuery代码实现的二级导航菜单效果，非常简洁，喜欢简洁风格的朋友您可以下载哦。菜单最多支持两级，CSS的配合也是挺重要的...
本文实例讲述了jQuery实现简单下拉导航效果。分享给大家供大家参考。具体如下： 这里粗略做一款基于jquery的下拉导航菜单效果，我觉得挺不错，虽然没有怎么美化，但是代码易懂，另外修补的空间也比较大，相信对学习...
本文实例为大家分享jquery实现百度新闻导航...1.利用UL创建简单横向导航； <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
下拉菜单实现很简单，纯css也能实现，但是我不擅长，用jquery也就两行代码，于是就用jquery+css实现简单二级下拉菜单导航，分享给大家供大家参考，具体内容如下 运行效果图： 具体代码： 第一步：确定导航的html...
这是一款利用jquery动画特效和css打造的侧边弹出垂直导航，整个弹出过程比较流畅，而且代码很简单，如果你正在寻找一款带动画的垂直导航，那么可以试试这个。下面是效果截图： HTML源码： 代码如下: <title>...
本文实例讲述了jquery...这是一款网站导航条效果代码，菜单最多可支持两级，适合较多类型的网站使用，不喜欢蓝色的可自己修改成其它颜色，整体效果不错，挺简单的网站导航。 运行效果截图如下： 在线演示地址如下： ...
本文实例讲述了jQuery简单实现仿京东分类导航层效果。分享给大家供大家参考，具体如下： [removed][removed] [removed] $(function () { var alink01 = $(.item > ul); alink01.hover(function () { //alert ...
jQuery ReSmenu下拉菜单是一款非常简单的轻量级jQuery插件，折叠成ul菜单响应在布局上。
下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了 开始进入正题吧: 1.首先定义CSS样式表: 代码如下: <style type=”text/css”> body{font-size:13px} ul,li{list-style-...
实用JQ实现导航二级菜单效果，导航菜单在网站中非常常见，有的网站可能会出现三级菜单及多级菜单模式，下面我们来简单的实现一个二级菜单的效果。 部分效果截图： 整体代码： <!DOCTYPE html> <html> &...
简单的基于 JQuery 的组件，可将任何分层元素结构（默认为 UL）转换为可遍历的菜单。 非常适合响应式侧边菜单等，您希望能够在实际加载页面之前向下或向上导航到特定级别。 目前稍微粗略的代码;) 应用程序接口： ...
本文实例为大家分享了jquery Tab切换菜单的实现代码，供大家参考，具体内容如下 实现tab切换的主要html代码： <div class=container> <ul class=tabs> <li class=active><a>导航菜单</a></li> <li><a>TAB...
这是一款核心基于jquery的多级导航菜单特效，横向向右依次展开菜单项，当然本菜单并不是完美的，因此没有怎么美化，另外包括子菜单的上级菜单中缺少一个菜单标记，这样用户有时候不知道哪个菜单中含有下级子菜单。...
简单 轻盈 快速 高效！ html结构： 代码如下: ”menu”> <ul id=”G_chan-panel” class=”pop-panel xss=removed> ”root-item> <a><span>餐饮</span></a> <ul class=”pop-panel Fix su
jQuery实现选项卡功能。首先将界面搭建好。 有导航头tab_menu，还有内容tab_box。 要实现的效果就是，点击后，将相应的内容显示出来，其他内容隐藏掉。 同时为了展现选中状态，为选中的项添加背景，以示区别。 这一...