仿亚马逊菜单 jquery,展开的菜单带图片，速度快
演示地址:http://www.corange.cn/demo/3859/index.html
截图如下
主要代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>仿亚马逊菜单 jquery-www.corange.cn</title>
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
.popover {
width: 400px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
overflow: hidden;
}
.popover-content {
text-align: center;
}
.popover-content img {
height: 150px;
max-width: 150px;
}
.dropdown-menu > li > a:hover {
background-image: none;
color: white;
background-color: rgb(0, 129, 194);
background-color: rgba(0, 129, 194, 0.5);
}
.dropdown-menu > li > a.maintainHover {
color: white;
background-color: #0081C2;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">分类</a>
<ul class="dropdown-menu" role="menu">
<li data-submenu-id="submenu-patas"><a href="#">ASP</a></li>
<li data-submenu-id="submenu-snub-nosed"><a href="http://www.corange.cn/html/corange_2_1.html">PHP</a></li>
<li data-submenu-id="submenu-duoc-langur"><a href="#">JSP</a></li>
<li data-submenu-id="submenu-pygmy"><a href="#">ASP.NET</a></li>
<li data-submenu-id="submenu-tamarin"><a href="#">SQL</a></li>
<li data-submenu-id="submenu-monk"><a href="#">JS</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
</div>
<div id="submenu-patas" class="popover">
<h3 class="popover-title">ASP</h3>
<div class="popover-content"><img src="../demo1.jpg"></div>
</div>
<div id="submenu-snub-nosed" class="popover">
<h3 class="popover-title">PHP</h3>
<div class="popover-content"><img src="../demo2.jpg"></div>
</div>
<div id="submenu-duoc-langur" class="popover">
<h3 class="popover-title">JSP</h3>
<div class="popover-content"><img src="../demo3.jpg"></div>
</div>
<div id="submenu-pygmy" class="popover">
<h3 class="popover-title">ASP.NET</h3>
<div class="popover-content"><img src="../demo4.jpg"></div>
</div>
<div id="submenu-tamarin" class="popover">
<h3 class="popover-title">SQL</h3>
<div class="popover-content"><img src="../demo5.jpg"></div>
</div>
<div id="submenu-monk" class="popover">
<h3 class="popover-title">JS</h3>
<div class="popover-content"><img src="../demo6.jpg"></div>
</div>
<script src="../jquery-1.9.1.min.js"></script>
<script src="js/jquery.menu-aim.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
var $menu = $(".dropdown-menu");
// jQuery-menu-aim: <meaningful part of the example>
// Hook up events to be fired on menu row activation.
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
// jQuery-menu-aim: </meaningful part of the example>
// jQuery-menu-aim: the following JS is used to show and hide the submenu
// contents. Again, this can be done in any number of ways. jQuery-menu-aim
// doesn't care how you do this, it just fires the activate and deactivate
// events at the right times so you know when to show and hide your submenus.
function activateSubmenu(row) {
var $row = $(row),
submenuId = $row.data("submenuId"),
$submenu = $("#" + submenuId),
offset = $menu.offset(),
height = $menu.outerHeight(),
width = $menu.outerWidth();
// Show the submenu
$submenu.css({
display: "block",
top: offset.top,
left: offset.left + width - 5, // main should overlay submenu
height: height - 4 // padding for main dropdown's arrow
});
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
var $row = $(row),
submenuId = $row.data("submenuId"),
$submenu = $("#" + submenuId);
// Hide the submenu and remove the row's highlighted look
$submenu.css("display", "none");
$row.find("a").removeClass("maintainHover");
}
$(document).click(function() {
// Simply hide the submenu on any click. Again, this is just a hacked
// together menu/submenu structure to show the use of jQuery-menu-aim.
$(".popover").css("display", "none");
});
</script>
</body>
</html>
原文地址:http://www.corange.cn/archives/2013/03/3859.html