三级菜单的实现
三级菜单的实现与二级菜单相类似
实现方法有 jQuery js css
html代码布局如下
<ul id="navmenu">
<li><a href=""#>首页</a></li>
<li><a href=""#>课程大厅</a></li>
<li><a href=""#>学习中心 +</a>
<ul>
<li><a href="#">前端开发 +</a>
<ul>
<li><a href="">javascript</a></li>
<li><a href="">css</a></li>
<li><a href="">jquery</a></li>
</ul>
</li>
<li><a href="">手机开发 +</a>
<ul>
<li><a href="">ios开发</a></li>
<li><a href="">安卓开发</a></li>
<li><a href="">wp开发</a></li>
</ul>
</li>
<li><a href="">后端编程</a></li>
</ul>
</li>
<li><a href=""#>关于我们</a></li>
</ul>
实现的方法 第一项 css
代码如下
body {
behavior:url(csshover.htc); //解决浏览器对:hover兼容问题
}
* {
margin: 0;
padding: 0;
}
#navmenu {
font-size: 12px;
font-weight: bold;
list-style: none;
margin: 0 auto;
}
#navmenu li {
float: left;
margin-right: 1px;
}
#navmenu li a {
line-height: 20px;
text-decoration: none;
background-color: #ddd;
color: #666;
display: block;
width: 80px;
text-align: center;
}
#navmenu li ul {
display: none;
list-style: none;
position: relative;
/*padding: 0; */
}
#navmenu li a:hover {
background-color: #900;
color: white;
}
#navmenu li:hover ul {
display: block; //显示二级菜单
width: 80px;
}
#navmenu li:hover ul li ul {
display: none; //当显示二级菜单时 三级菜单隐藏
}
#navmenu li ul li:hover ul{
display: block; //显示三级菜单
top: 0px;
left: 80px;
position: absolute;
}
三级菜单与二级菜单的实现思想相同 重要的是子菜单位置的确定
三级菜单 js的实现思想为
遍历li找到拥有子菜单的呢一项 为其绑定事件
坑爹的ie
代码如下
window.onload = function() {
var Lis = document.getElementsByTagName("li");
for (var i = 0 ; i < Lis.length; i++) {
Lis[i].onmouseover = function () {
var u=this.getElementsByTagName("ul")[0];
if (u !=undefined) {
u.style.display = "block";
}
}
Lis[i].onmouseout = function () {
var u=this.getElementsByTagName("ul")[0];
if (u !=undefined) {
u.style.display = "none";
}
}
}
}
三级菜单 jquery的实现
$(function() {
$("li").has("ul").mouseover(function() {
$(this).children("ul").css("display","block");
})
$("li").has("ul").mouseout(function() {
$(this).children("ul").css("display","none")
})
$.support.leadingWhitespace
});
三级菜单的实现与二级菜单相类似
实现方法有 jQuery js css
html代码布局如下
<ul id="navmenu">
<li><a href=""#>首页</a></li>
<li><a href=""#>课程大厅</a></li>
<li><a href=""#>学习中心 +</a>
<ul>
<li><a href="#">前端开发 +</a>
<ul>
<li><a href="">javascript</a></li>
<li><a href="">css</a></li>
<li><a href="">jquery</a></li>
</ul>
</li>
<li><a href="">手机开发 +</a>
<ul>
<li><a href="">ios开发</a></li>
<li><a href="">安卓开发</a></li>
<li><a href="">wp开发</a></li>
</ul>
</li>
<li><a href="">后端编程</a></li>
</ul>
</li>
<li><a href=""#>关于我们</a></li>
</ul>
实现的方法 第一项 css
代码如下
body {
behavior:url(csshover.htc); //解决浏览器对:hover兼容问题
}
* {
margin: 0;
padding: 0;
}
#navmenu {
font-size: 12px;
font-weight: bold;
list-style: none;
margin: 0 auto;
}
#navmenu li {
float: left;
margin-right: 1px;
}
#navmenu li a {
line-height: 20px;
text-decoration: none;
background-color: #ddd;
color: #666;
display: block;
width: 80px;
text-align: center;
}
#navmenu li ul {
display: none;
list-style: none;
position: relative;
/*padding: 0; */
}
#navmenu li a:hover {
background-color: #900;
color: white;
}
#navmenu li:hover ul {
display: block; //显示二级菜单
width: 80px;
}
#navmenu li:hover ul li ul {
display: none; //当显示二级菜单时 三级菜单隐藏
}
#navmenu li ul li:hover ul{
display: block; //显示三级菜单
top: 0px;
left: 80px;
position: absolute;
}
三级菜单与二级菜单的实现思想相同 重要的是子菜单位置的确定
三级菜单 js的实现思想为
遍历li找到拥有子菜单的呢一项 为其绑定事件
坑爹的ie
代码如下
window.onload = function() {
var Lis = document.getElementsByTagName("li");
for (var i = 0 ; i < Lis.length; i++) {
Lis[i].onmouseover = function () {
var u=this.getElementsByTagName("ul")[0];
if (u !=undefined) {
u.style.display = "block";
}
}
Lis[i].onmouseout = function () {
var u=this.getElementsByTagName("ul")[0];
if (u !=undefined) {
u.style.display = "none";
}
}
}
}
三级菜单 jquery的实现
$(function() {
$("li").has("ul").mouseover(function() {
$(this).children("ul").css("display","block");
})
$("li").has("ul").mouseout(function() {
$(this).children("ul").css("display","none")
})
$.support.leadingWhitespace
});