Js- 菜单
很简单的JS二级菜单显示,收藏
<!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>
<title></title>
<style type="text/css">
.menu span { float: left; margin-right: 10px; position: relative;}
.menu a { display: block; }
.menu span div { border: 1px solid black;display: none; }
</style>
<script src="Js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".menu span").hover(function () {
$(this).children("div").attr("style", "display: block"); },
function () {
$(this).children("div").attr("style", "");
})
});
</script>
</head>
<body>
<div class="menu">
<span><a href="#">菜单一</a></span>
<span><a href="#">菜单二</a>
<div>
<a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a>
</div>
</span>
<span><a href="#">菜单三</a>
<div>
<a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a>
</div>
</span>
</div>
</body>
</html>
竖直的,点击
<!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>
<title></title>
<style type="text/css">
* { margin: 0; padding: 0; }
#nav { width: 200px; margin: 50px; }
#nav h3 { cursor: pointer; line-height: 30px; height: 30px; background-color: #000000; color: #fff; }
#nav a { display: block; line-height: 24px; color: #666666; }
#nav a:hover { background-color: #eee; color: #000; }
#nav div { display: none; border: 1px solid #000; border-top: none; }
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id) }
window.onload = function (e) {
$("nav").onclick = function (e) {
var src = e ? e.target : event.srcElement;
if (src.tagName == "H3") {
var next = src.nextElementSibling || src.nextSibling;
next.style.display = (next.style.display == "block") ? "none" : "block";
}
}
}
</script>
</head>
<body>
<div id="nav">
<h3>
管理区</h3>
<div>
<a href="#">111</a> <a href="#">222</a> <a href="#">333</a>
</div>
<h3>
交流区</h3>
<div>
<a href="#">aaa</a> <a href="#">bbb</a> <a href="#">ccc</a>
</div>
</div>
</body>
</html>
Js- 菜单的更多相关文章
- 简单的js菜单
<!DOCTYPE html> <html> <head> <title>hovertree</title><base target= ...
- JS菜单条智能定位效果
JS仿淘宝详情页菜单条智能定位效果 2014-01-15 15:40 by 龙恩0707, 1366 阅读, 9 评论, 收藏, 编辑 类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图 ...
- 自动切换的JS菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns=&quo ...
- js菜单默认选中
function defaultSelected() { var curr = $("#leftTree li[onclick*='" + $("#content_ifr ...
- JGUI源码:JS菜单动态绑定(8)
我们知道Jquery绑定事件后的新添加的对象是不响应事件的,为了解决这个问题,动态添加的对象需要从新绑定,使用一个init方法实现代码如下 //Accordion封装 (function($) { J ...
- js 菜单收起和展开
- 150个JS特效脚本
收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...
- 实用的树形菜单控件tree
jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview jQuery jstree jsTree ...
- html树形菜单控件
html树形菜单控件 链接 http://www.ithao123.cn/content-713974.html jQuery plugin: Treeview 这个插件能够把无序 ...
- java实现的可以无限级别添加子节点的菜单树
网上大部分菜单树,都是单独用js代码来实现的,这样做的缺点是:用户无法动态的设置菜单项,比如,超级管理员可能需要根据每个用户的权限,赋予他们不同的系统功能,不同的功能对应着不同数量的菜单项. 对于此问 ...
随机推荐
- epoll和select区别
先说下本文框架,先是问题引出,然后概括两个机制的区别和联系,最后介绍每个接口的用法 一.问题引出 联系区别 问题的引出,当需要读两个以上的I/O的时候,如果使用阻塞式的I/O,那么可能长时间的阻塞在一 ...
- mysql添加超级管理员
mysql>create user 'myroot'@'localhost' identified by 'myroot'; mysql>grant all privileges on * ...
- php提取背景图片
preg_match_all('/background\s*-\s*+image\s*:\s*url\s*\("*([^"]*)"*\)/i', $content,$ma ...
- struts2整合jfreechart
需要的包: struts2-jfreechart-plugin-2.2.1.1.jar jfreechart-1.0.13.jar jcommon-1.0.17.jar 前台jsp页面中可以使用ifr ...
- linux下安装php扩展redis缓存
下载phpredis安装包 wget https://github.com/nicolasff/phpredis/tarball/master 在下载目录解压phpredis.tar.gz tar z ...
- SQL Server执行计划
要理解执行计划,怎么也得先理解,那各种各样的名词吧.鉴于自己还不是很了解.本文打算作为只写懂的,不懂的懂了才写. 在开头要先说明,第一次看执行计划要注意,SQL Server的执行计划是从右向左看的. ...
- myeclipse启动项目时报:An internal error occurred during: "Launching TestSpring on Tomcat 7.x". java.lang.NullPointerException 解决方法
如果出现了上述的错误按照如下的3个步骤解决: 1.首先关闭MyEclipse工作空间. 2.然后删除工作空间下的 “/.metadata/.plugins/org.eclipse.core.runti ...
- Python join()方法
描述 Python join() 方法用于将序列中的元素以指定的字符连接生成一个新的字符串. 语法 join()方法语法: str.join(sequence) 参数 sequence -- 要连接的 ...
- bzoj 3165: [Heoi2013]Segment 动态凸壳
3165: [Heoi2013]Segment Time Limit: 40 Sec Memory Limit: 256 MBSubmit: 202 Solved: 89[Submit][Stat ...
- 【技术贴】解决Program Files文件夹消失
好久不写程序了,今天良心发现,就寻找一下自己是否安装了JDK,习惯性的去C盘的Program Files的文件夹下面去找,次奥,没有这个文件夹.好吧.是在玩我么. 于是 打开cmd 输入如下命令 AT ...