JQ N级导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ padding:0px; margin:0px;}
ul,li{ list-style:none;}
li{ position:relative; height:30px; line-height:30px; text-align:center;}
a{ text-decoration:none;}
ul.one{width:100px; background-color:#f4f3f3;border:#ddd 1px solid;}
ul.one ul{ display:none; position:absolute; left:100px; top:0px; width:100px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
$('ul.one li').each(function(){
$(this).mouseover(function(){
if($(this).has('ul').length>0)
{
$(this).find('>ul').show();
}
else{
$(this).siblings().find('ul').hide();
}
})
})
$('ul.one ul').each(function(){
$(this).mouseout(function(){
$(this).hide();
})
})
})
</script>
</head>
<body>
<ul class="one">
<li><a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a>
<ul>
<li><a href="#">三级导航</a></li>
<li><a href="#">三级导航</a></li>
<li><a href="#">三级导航</a></li>
<li>
<a href="#">三级导航</a>
<ul>
<li><a href="#">四级导航</a></li>
<li><a href="#">四级导航</a></li>
<li><a href="#">四级导航</a></li>
<li><a href="#">四级导航</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">一级导航</a></li>
<li><a href="#">一级导航</a></li>
<li>
<a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">一级导航</a></li>
</ul>
</body>
</html>
JQ N级导航的更多相关文章
- jquery 实现两级导航菜单
主要用于运维系统, 对界面要求不高的场合. 深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1. HTML 页面及 JS 交互, 注意引入 Jquery ...
- 高德AR & 车道级导航技术演进与实践
2020云栖大会于9月17日-18日在线上举行,阿里巴巴高德地图携手合作伙伴精心组织了"智慧出行"专场,为大家分享高德地图在打造基于DT+AI和全面上云架构下的新一代出行生活服务平 ...
- Android两级导航菜单栏的实现--FragmentTabHost结合ViewPager与Android 开源项目PagerSlidingTabStrip
http://www.cnblogs.com/aademeng/articles/6119737.html 转载注:简单总结一下,外层Tab用TabHost,类层Tab用Viepager+Framen ...
- jQuery-二级导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 防刷新jq左侧滚动条导航展示
html代码: <div class="fangchan_navcont"> <div class="fangchan_nav" ...
- 用jq动态给导航菜单添加active
点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...
- SAP CRM 将组件整合至导航栏中
到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...
- 简洁的jQuery cxMenu 手风琴导航
版本: jQuery v1.7+ jQuery cxMenu v1.2 注意事项: 自动判断是否有子导航,有则显示并不触发链接,无则触发链接. 实例预览 使用方法 载入 JavaScript 文件 & ...
- SharePoint 2010顶部链接导航栏的详细操作
转:http://www.360sps.com/Item/UseTopLink.aspx 在SharePoint 2010环境的页面中,导航链接总体上可以分为两类,一类是显示在左侧的快速启动栏,另一类 ...
随机推荐
- HDU 5903 Square Distance
$dp$预处理,贪心. 因为$t$串前半部分和后半部分是一样的,所以只要构造前一半就可以了. 因为要求字典序最小,所以肯定是从第一位开始贪心选择,$a,b,c,d,...z$,一个一个尝试过去,如果发 ...
- RandomAccessFile类初次使用
RandomAccessFile : java提供的对文件内容的访问 既可以读文件 也可以写文件 支持随机访问文件 可以访问文件的任意位置 (1)java文件模型 : 在硬盘上的文件是byte byt ...
- joda-time的一个DEMO
Date activeDate = person.getActiveTime(); if(activeDate==null){ modelMap.put("expireDate", ...
- 安卓activity之间值共享解决办法，tabhost之间共享父类值，字符串类型的转换，获取每一个listview的item
1.tabhost父类值共享的解决办法 dianzhanliebiao.java是传值页面,zhuyemian.java放的是tabhost,dianzhangaikuang.java是tabhost ...
- 总结的OSM 地图相关的分析
How OSM works: Tile Format: png, z: levels [0- 18], x: Latitude [0- ], y: Longitude [0- ]; ...
- 获取控件id
普通状态中JS获取控件IDdocument.getElementById('controlID'); JS获取父窗口控件IDwindow.parent.document.getElementById( ...
- CVE-2015-5122 简要分析(2016.4)
CVE-2015-5122 简要分析 背景 最近在学习Flash漏洞的分析,其与IE漏洞的分析还是有诸多的不同(不便)之处,折腾了一阵子终于克服了没有符号表.Flash的超时定时器等问题.所以找到了去 ...
- MySql表操作常用语法
检查表CHECK TABLE table_name;修复表REPAIR TABLE table_name;优化表OPTIMIZE TABLE table_name;分析表ANALYZE TABLE t ...
- 简单封装常用js方法
1.uploadfiy插件封装 /* 参数:uploadID:上传控件ID url:请求后台url路径 callback:回调函数 */ uploadfiy({ uploadID: $('#btn ...
- location修改的时候报错解决办法
location修改的时候直接保存record,或者转换成DbObject都会报错,这样准换之后就好了if(key.equals("location")&&valu ...