利用CSS、Jquery和div实现的横弹出菜单
1、页面
<!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>
</head>
<body>
<div class="menu_container">
<div class="level_one_menu" value="1">计算机分类</div>
<div class="level_one_menu" value="2">出版社分类</div>
<div class="level_one_menu" value="3">出版日期分类</div>
</div>
<div id="menu-content-1">
<div class="level_two_menu">编程语言
<div class="level_three_menu">Java</div>
<div class="level_three_menu">.net</div>
<div class="level_three_menu">C/C++</div>
<div class="level_three_menu">PHP</div>
<div class="level_three_menu">Python</div>
<div class="level_three_menu">Javascript</div>
<div class="level_three_menu">Object-C</div>
<div class="level_three_menu">Perl</div>
<div class="level_three_menu">Shell</div>
</div>
<div class="level_two_menu">操作系统
<div class="level_three_menu">Linux</div>
<div class="level_three_menu">Windows</div>
<div class="level_three_menu">Mac</div>
<div class="level_three_menu">Unix</div>
</div>
<div class="level_two_menu">数据库
<div class="level_three_menu">Mysql</div>
<div class="level_three_menu">Oracle</div>
<div class="level_three_menu">DB2</div>
<div class="level_three_menu">PostgreSQL</div>
<div class="level_three_menu">MS SQL Server</div>
<div class="level_three_menu">Sybase</div>
</div>
</div>
<div id="menu-content-2">
<div class="level_two_menu">Addison-Wesley</div>
<div class="level_two_menu">Apress</div>
<div class="level_two_menu">Dummies</div>
<div class="level_two_menu">friendsofED</div>
<div class="level_two_menu">JohnWiley</div>
<div class="level_two_menu">Manning</div>
<div class="level_two_menu">McGraw</div>
<div class="level_two_menu">NewRiders</div>
<div class="level_two_menu">NoStarch</div>
<div class="level_two_menu">OReilly</div>
<div class="level_two_menu">Packt</div>
<div class="level_two_menu">Pearson</div>
<div class="level_two_menu">Pragmatic</div>
<div class="level_two_menu">Prentice</div>
<div class="level_two_menu">Que</div>
<div class="level_two_menu">Sams</div>
<div class="level_two_menu">SitePoint</div>
<div class="level_two_menu">SYBEX</div>
<div class="level_two_menu">Syngress</div>
<div class="level_two_menu">Wrox</div>
</div>
<div id="menu-content-3">
<div class="level_two_menu">2015</div>
<div class="level_two_menu">2014</div>
<div class="level_two_menu">2013</div>
<div class="level_two_menu">2012</div>
<div class="level_two_menu">2011</div>
<div class="level_two_menu">2010</div>
<div class="level_two_menu">2009</div>
<div class="level_two_menu">2008</div>
<div class="level_two_menu">2007</div>
<div class="level_two_menu">2006</div>
<div class="level_two_menu">2005</div>
<div class="level_two_menu">2004</div>
<div class="level_two_menu">2003</div>
<div class="level_two_menu">2002</div>
<div class="level_two_menu">2001</div>
<div class="level_two_menu">2000</div>
<div class="level_two_menu">2000年之前</div>
</div>
</body>
</html>
2、添加css
<style>
div { background-color:#fff; border: 1px solid #000;margin:5px; }
.menu_container {
width:40%;
text-align:center;
}
.level_one_menu {
display : inline;
padding : 5px;
width:30%;
}
.level_two_menu {
width:90%;
}
.level_three_menu {
width:90%;
}
</style>
3、添加js 脚本
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.level_two_menu').bind("click",function(){
$(".level_three_menu",this).toggle();
return false;
})
$('.level_one_menu').bind("click",function(event){
var obj = $(this);
var offset = obj.offset();
var right = offset.left+obj.width();
var down = offset.top+obj.height();
event.stopPropagation();
})
$('.level_three_menu').bind("click",function(event){
alert($(this).text());
event.stopPropagation();
})
$('.level_one_menu').bind("mouseover",function(event){
var obj = $(this);
var number = obj.val();
var offset = obj.offset();
var right = offset.left+obj.width();
var down = offset.top+obj.height();
$("#menu-content-"+ number).css("position","absolute");
$("#menu-content-"+ number).css("left",offset.left -5);
$("#menu-content-"+ number).css("top",down + 10 );
$("#menu-content-"+ number).show();
event.stopPropagation();
})
$('.level_one_menu').bind("mouseout",function(event){
var obj = $(this);
var number = obj.val();
$("#menu-content-"+ number).toggle();
event.stopPropagation();
})
$("#menu-content-1").hide();
$("#menu-content-2").hide();
$("#menu-content-3").hide();
});
</script>
4、完整页面内容
<!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>
div { background-color:#fff; border: 1px solid #000;margin:5px; }
.menu_container {
width:40%;
text-align:center;
}
.level_one_menu {
display : inline;
padding : 5px;
width:30%;
}
.level_two_menu {
width:90%;
}
.level_three_menu {
width:90%;
}
</style>
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.level_two_menu').bind("click",function(){
$(".level_three_menu",this).toggle();
return false;
})
$('.level_one_menu').bind("click",function(event){
var obj = $(this);
var offset = obj.offset();
var right = offset.left+obj.width();
var down = offset.top+obj.height();
event.stopPropagation();
})
$('.level_three_menu').bind("click",function(event){
alert($(this).text());
event.stopPropagation();
})
$('.level_one_menu').bind("mouseover",function(event){
var obj = $(this);
var number = obj.val();
var offset = obj.offset();
var right = offset.left+obj.width();
var down = offset.top+obj.height();
$("#menu-content-"+ number).css("position","absolute");
$("#menu-content-"+ number).css("left",offset.left -5);
$("#menu-content-"+ number).css("top",down + 10 );
$("#menu-content-"+ number).show();
event.stopPropagation();
})
$('.level_one_menu').bind("mouseout",function(event){
var obj = $(this);
var number = obj.val();
$("#menu-content-"+ number).toggle();
event.stopPropagation();
})
$("#menu-content-1").hide();
$("#menu-content-2").hide();
$("#menu-content-3").hide();
});
</script>
</head>
<body>
<div class="menu_container">
<div class="level_one_menu" value="1">计算机分类</div>
<div class="level_one_menu" value="2">出版社分类</div>
<div class="level_one_menu" value="3">出版日期分类</div>
</div>
<div id="menu-content-1">
<div class="level_two_menu">编程语言
<div class="level_three_menu">Java</div>
<div class="level_three_menu">.net</div>
<div class="level_three_menu">C/C++</div>
<div class="level_three_menu">PHP</div>
<div class="level_three_menu">Python</div>
<div class="level_three_menu">Javascript</div>
<div class="level_three_menu">Object-C</div>
<div class="level_three_menu">Perl</div>
<div class="level_three_menu">Shell</div>
</div>
<div class="level_two_menu">操作系统
<div class="level_three_menu">Linux</div>
<div class="level_three_menu">Windows</div>
<div class="level_three_menu">Mac</div>
<div class="level_three_menu">Unix</div>
</div>
<div class="level_two_menu">数据库
<div class="level_three_menu">Mysql</div>
<div class="level_three_menu">Oracle</div>
<div class="level_three_menu">DB2</div>
<div class="level_three_menu">PostgreSQL</div>
<div class="level_three_menu">MS SQL Server</div>
<div class="level_three_menu">Sybase</div>
</div>
</div>
<div id="menu-content-2">
<div class="level_two_menu">Addison-Wesley</div>
<div class="level_two_menu">Apress</div>
<div class="level_two_menu">Dummies</div>
<div class="level_two_menu">friendsofED</div>
<div class="level_two_menu">JohnWiley</div>
<div class="level_two_menu">Manning</div>
<div class="level_two_menu">McGraw</div>
<div class="level_two_menu">NewRiders</div>
<div class="level_two_menu">NoStarch</div>
<div class="level_two_menu">OReilly</div>
<div class="level_two_menu">Packt</div>
<div class="level_two_menu">Pearson</div>
<div class="level_two_menu">Pragmatic</div>
<div class="level_two_menu">Prentice</div>
<div class="level_two_menu">Que</div>
<div class="level_two_menu">Sams</div>
<div class="level_two_menu">SitePoint</div>
<div class="level_two_menu">SYBEX</div>
<div class="level_two_menu">Syngress</div>
<div class="level_two_menu">Wrox</div>
</div>
<div id="menu-content-3">
<div class="level_two_menu">2015</div>
<div class="level_two_menu">2014</div>
<div class="level_two_menu">2013</div>
<div class="level_two_menu">2012</div>
<div class="level_two_menu">2011</div>
<div class="level_two_menu">2010</div>
<div class="level_two_menu">2009</div>
<div class="level_two_menu">2008</div>
<div class="level_two_menu">2007</div>
<div class="level_two_menu">2006</div>
<div class="level_two_menu">2005</div>
<div class="level_two_menu">2004</div>
<div class="level_two_menu">2003</div>
<div class="level_two_menu">2002</div>
<div class="level_two_menu">2001</div>
<div class="level_two_menu">2000</div>
<div class="level_two_menu">2000年之前</div>
</div>
</body>
</html>
5、界面效果