导航栏布局借助于<ul> <li> 标签
菜单的显示与隐藏借助于:hover伪类
html代码如下
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li class="navmenu"><a href="#">课程大厅</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li class="navmenu"><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
页面布局十分简单 重点是css样式的编写
css代码如下
#nav { background-color: #eee;
width: 600px;
height:40px; 一定要规定高度 这是为后面垂直居中做好铺垫
margin: 0 auto; 使整块元素水平居中
}
ul {
list-style: none;
}
ul li{
float: left;
line-height: 40px; 使元素垂直居中
text-align: center;
/*padding: 0 10px;*/
position: relative; **目的是让二级菜单以此元素为参考位置
}
a {
text-decoration: none;
color: #000;
display: block; 让元素以块级元素的方式进行排列
padding: 0 10px; 使得选中后背景颜色能够覆盖整个元素
height: 40px;
}
a:hover {
color: #fff;
background-color: #000;
}
ul li ul li {
float: none;
background-color: #eee;
margin-top: 2px;
}
ul li ul {
position: absolute; 让二级菜单进行绝对定位 根据一级菜单的relative 使二级菜单根据一级菜单的位置进行绝对定位
left: 0px;
top: 40px;
display: none;
}
ul li ul li a {
width: 80px;
}
ul li ul li a:hover {
background-color:#06f;
}
ul li:hover ul {
display: block;
}
但是考虑到浏览器兼容性问题 :hover在低版本的IE中不支持 所以要用JavaScript进行效果的编写
实现思想
当鼠标经过一级菜单时触发事件 将二级菜单显示出来
为需要的一级菜单绑定onmouseover,与onmouseout事件
<li οnmοusemοve="showsubmenu(this)" οnmοuseοut="hidemenu(this)" class="navmenu"><a href="#">学习中心</a>
js代码
function showsubmenu(li) {
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidemenu(li) {
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
当然也可以借助jQuery进行实现 轻松简单
$(function() {
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
})
$(".navmenu").mouseout(function() {
$(this).children("ul").hide();
})
})
菜单的显示与隐藏借助于:hover伪类
html代码如下
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li class="navmenu"><a href="#">课程大厅</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li class="navmenu"><a href="#">学习中心</a>
<ul>
<li><a href="#">视频学习</a></li>
<li><a href="#">案例学习</a></li>
<li><a href="#">交流平台</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
页面布局十分简单 重点是css样式的编写
css代码如下
#nav { background-color: #eee;
width: 600px;
height:40px; 一定要规定高度 这是为后面垂直居中做好铺垫
margin: 0 auto; 使整块元素水平居中
}
ul {
list-style: none;
}
ul li{
float: left;
line-height: 40px; 使元素垂直居中
text-align: center;
/*padding: 0 10px;*/
position: relative; **目的是让二级菜单以此元素为参考位置
}
a {
text-decoration: none;
color: #000;
display: block; 让元素以块级元素的方式进行排列
padding: 0 10px; 使得选中后背景颜色能够覆盖整个元素
height: 40px;
}
a:hover {
color: #fff;
background-color: #000;
}
ul li ul li {
float: none;
background-color: #eee;
margin-top: 2px;
}
ul li ul {
position: absolute; 让二级菜单进行绝对定位 根据一级菜单的relative 使二级菜单根据一级菜单的位置进行绝对定位
left: 0px;
top: 40px;
display: none;
}
ul li ul li a {
width: 80px;
}
ul li ul li a:hover {
background-color:#06f;
}
ul li:hover ul {
display: block;
}
但是考虑到浏览器兼容性问题 :hover在低版本的IE中不支持 所以要用JavaScript进行效果的编写
实现思想
当鼠标经过一级菜单时触发事件 将二级菜单显示出来
为需要的一级菜单绑定onmouseover,与onmouseout事件
<li οnmοusemοve="showsubmenu(this)" οnmοuseοut="hidemenu(this)" class="navmenu"><a href="#">学习中心</a>
js代码
function showsubmenu(li) {
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidemenu(li) {
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
当然也可以借助jQuery进行实现 轻松简单
$(function() {
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
})
$(".navmenu").mouseout(function() {
$(this).children("ul").hide();
})
})