以下是 HoverAccordion jQuery层式菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为HoverAccordion jQuery层式菜单，属于站长常用代码" />
<title>HoverAccordion jQuery层式菜单</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style media="screen" type="text/css">
/* General Styles */
* {
margin: 0;
padding: 0;
border: 0px none #FFFFFF;
}
* html ul ul li {
margin-bottom: -1px;
}
* html ul ul li a, * html ul li a {
height: 100%;
}
a {
color: #FFFFFF;
text-decoration: underline;
}
body {
margin: 20px;
padding: 0 0 0 0;
background: #808080 repeat-y center;
color: #F0F0F0;
font-family: 'Lucida Grande','Segoe UI',Arial,Helvetica,sans-serif;
font-size: 85%;
line-height: 140%;
}
code {
padding: 0.5em;
border-top: 1px solid #666666;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #666666;
margin: 0.5em 0 0.5em 0;
display: block;
}
h1 {
margin: 1em 0 0.5em 0;
display: block;
font-weight: normal;
}
h2 {
border-top: 1px solid #F0F0F0;
padding-top: 0.5em;
margin: 1em 0 1em 0;
display: block;
font-weight: normal;
}
#content {
margin: 30px;
width: 400px;
border-top: 1px solid #999999;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #999999;
padding: 20px;
}
/* Styles for Example #1 */
#example1 {
margin: 0;
padding: 0;
width: 200px;
list-style-type: none;
line-height: 120%;
}
#example1 .closed {
background-image: url(ha-down.gif);
}
#example1 .closed, #example1 .opened {
padding-right: 10px;
background-position: 98% 50%;
background-repeat: no-repeat;
}
#example1 .header {
background-color: #7B7B7B;
}
#example1 .opened {
background-image: url(ha-up.gif);
}
#example1 a {
display: block;
font-weight: bold;
text-decoration: none;
}
#example1 a.hover {
border-top: 1px solid #5F5F5F;
border-bottom: 1px solid #7B7B7B;
background-color: #7B7B7B;
color: #FFFFFF;
}
#example1 ul {
overflow: hidden;
}
#example1 li {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #848484;
color: #FFFFFF;
}
#example1 li a {
padding: 2px 10px 2px 4px;
border-top: 1px solid #9A9A9A;
border-left: 1px solid #9A9A9A;
border-right: 1px solid #696969;
border-bottom: 1px solid #757575;
background-color: #848484;
color: #FFFFFF;
}
#example1 li.active a, #example1 li li.active a {
border-top: 1px solid #5F5F5F;
border-bottom: 1px solid #7B7B7B;
border-left: 1px solid #757575;
border-right: 1px solid #9A9A9A;
background-color: #404040;
color: #FFFFFF;
}
#example1 li.active li a, #example1 li li a {
padding: 2px 4px 2px 8px;
border-top: 1px solid #696969;
border-left: 1px solid #696969;
border-right: 1px solid #8A8A8A;
border-bottom: 1px solid #7B7B7B;
background-color: #757575;
color: #FFFFFF;
}
/* Styles for Example #2 */
#example2 {
margin: 0;
padding: 0;
width: 300px;
list-style-type: none;
background-color: #FFFFFF;
color: #000000;
line-height: 120%;
height: 300px;
}
#example2 a {
display: block;
font-weight: normal;
text-decoration: none;
}
#example2 ul {
overflow: hidden;
}
#example2 li {
margin: 0;
padding: 0;
list-style-type: none;
}
#example2 li a {
width: 285px;
padding: 5px 0 0 15px;
display: block;
color: #000000;
background-image: url(ha-header.jpg);
height: 25px;
}
#example2 li a.closed {
color: #000000 !important;
background-image: url(ha-header.jpg) !important;
}
#example2 li.firstitem a.closed {
color: #000000 !important;
background-image: url(ha-header-first.jpg) !important;
}
#example2 li.lastitem a.closed {
color: #000000 !important;
background-image: url(ha-header-last.jpg) !important;
}
#example2 li li {
border-left: 1px solid #E5E5E5;
border-right: 1px solid #E5E5E5;
padding: 0 15px 0 15px;
height: 175px;
}
#example2 li a.opened {
background-image: url(ha-header-active.jpg);
color: #FFFFFF;
}
#example2 li.firstitem a.opened {
background-image: url(ha-header-first-active.jpg);
color: #FFFFFF;
}
#example2 li.lastitem li {
margin-bottom: -4px;
}
#example2 li.lastitem ul {
background-image: url(ha-footer.jpg);
background-repeat: no-repeat;
background-position: bottom;
padding-bottom: 4px;
}
</style>
<script type="text/javascript" src="jquery.hoverIntent.min.js"></script>
<script type="text/javascript" src="jquery.hoveraccordion.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Setup HoverAccordion for Example 1
$('#example1').hoverAccordion();
// Setup HoverAccordion for Example 2 with some custom options
$('#example2').hoverAccordion({
activateitem: '1',
speed: 'fast'
});
$('#example2').children('li:first').addClass('firstitem');
$('#example2').children('li:last').addClass('lastitem');
});
</script>
</head>
<body>
<div id="content">
<ul id="example1">
<li><a href="#">Item 1</a></li>
<li>
<a href="#">Item 2</a>
<ul>
<li><a href="index.php?id=2a#ex1">Subitem 2a</a></li>
<li><a href="index.php?id=2b#ex1">Subitem 2b</a></li>
<li><a href="index.php?id=2c#ex1">Subitem 2c</a></li>
<li><a href="index.php?id=2d#ex1">Subitem 2d</a></li>
<li><a href="index.php?id=2e#ex1">Subitem 2e</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li>
<a href="#">Item 5</a>
<ul>
<li><a href="index.php?id=5a#ex1">Subitem 5a</a></li>
<li><a href="index.php?id=5b#ex1">Subitem 5b</a></li>
<li><a href="index.php?id=5c#ex1">Subitem 5c</a></li>
</ul>
</li>
<li><a href="#">Item 6</a></li>
<li>
<a href="#">Item 7</a>
<ul>
<li><a href="index.php?id=7a#ex1">Subitem 7a</a></li>
<li><a href="index.php?id=7b#ex1">Subitem 7b</a></li>
<li><a href="index.php?id=7c#ex1">Subitem 7c</a></li>
<li><a href="index.php?id=7d#ex1">Subitem 7d</a></li>
</ul>
</li>
<li>
<a href="#">Item 8</a>
<ul>
<li><a href="index.php?id=8a#ex1">Subitem 8a</a></li>
<li><a href="index.php?id=8b#ex1">Subitem 8b</a></li>
<li><a href="index.php?id=8c#ex1">Subitem 8c</a></li>
<li><a href="index.php?id=8d#ex1">Subitem 8d</a></li>
<li><a href="index.php?id=8e#ex1">Subitem 8e</a></li>
<li><a href="index.php?id=8f#ex1">Subitem 8f</a></li>
</ul>
</li>
<li>
<a href="#">Item 9</a>
<ul>
<li><a href="index.php?id=9a#ex1">Subitem 9a</a></li>
<li><a href="index.php?id=9b#ex1">Subitem 9b</a></li>
<li><a href="index.php?id=9c#ex1">Subitem 9c</a></li>
<li><a href="index.php?id=9d#ex1">Subitem 9d</a></li>
<li><a href="index.php?id=9e#ex1">Subitem 9e</a></li>
</ul>
</li>
</ul>
<br />
<!--http://hi.baidu.com/comasp -->
<br />
<div style="width:300px;height:300px;background-color:#FFFFFF;padding:50px;">
<a name="ex2" id="ex2"></a>
<ul id="example2">
<li>
<a href="#">Item 1</a>
<ul>
<li>
Content #1 - Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.
</li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul>
<li>
Content #2 - At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul>
<li>Content #3 - Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
</ul>
</li>
<li>
<a href="#">Item 4</a>
<ul>
<li>
Content #4 - Vet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
et ea rebum. Vet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
et ea rebum.
</li>
</ul>
</li>
</ul>
</div>
<p><a href="http://hi.baidu.com/comasp">Author's blog</a></p>
<p>
<br />
</p>
<p> </p>
<p></p>
<p> </p>
</div>
<p> </p>
</body>
</html>
JS代码(jquery.hoveraccordion.min.js):
/** * HoverAccordion - jQuery plugin for intuitively opening accordions and menus * http://berndmatzner.de/jquery/hoveraccordion/ * Copyright (c) 2007 Bernd Matzner * Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * Version:0.4 */
(function($){
$.fn.hoverAccordion=function(options){
options=jQuery.extend({
speed:'fast',activateitem:'true',active:'active',header:'header',hover:'hover',opened:'opened',closed:'closed',keepheight:'true'}
,options);
thislist=$(this);
thislist.attr('hovering','false');
var thisurl=window.location.href;
function doHover(obj){
if($(obj).html()==undefined)obj=this;
if(thislist.attr('hovering')=='false'){
var newelem=$(obj).parent().children('ul');
var oldelem=$(obj).parent().parent().children('li').children('ul:visible');
if(options.keepheight=='true'){
thisheight=maxheight}
else{
thisheight=newelem.height()}
if(!newelem.is(':visible')){
thislist.attr('hovering','true');
if(!oldelem.length>0){
newelem.animate({
height:thisheight}
,{
duration:options.speed,easing:'linear'}
)}
else{
newelem.show()}
oldelem.animate({
height:'hide'}
,{
step:function(n){
newelem.height(Math.ceil(thisheight-n))}
,duration:options.speed,easing:'linear'}
);
oldelem.parent().children('a').addClass(options.closed).removeClass(options.opened);
newelem.parent().children('a').addClass(options.opened).removeClass(options.closed);
resetHover=window.setTimeout("thislist.attr('hovering','false');
",600)}
}
}
;
function doNothing(){
}
;
var itemNo=0;
var maxheight=0;
$(this).children('li').each(function(){
var thisitem=$(this);
itemNo++;
var thislink=thisitem.children('a');
if(thislink.length>0){
thislink.hover(function(){
$(this).addClass(options.hover)}
,function(){
$(this).removeClass(options.hover)}
);
var thishref=thislink.attr('href');
if(thishref=='#'){
thislink.click(function(){
thislist.attr('hovering','false');
doHover(this);
this.blur();
return false}
)}
else if(options.activateitem=='true'&&thisurl.indexOf(thishref)>0&&thisurl.length-thisurl.lastIndexOf(thishref)==thishref.length){
thislink.parent().addClass(options.active)}
}
var thischild=thisitem.children('ul');
if(thischild.length>0){
if(maxheight<thischild.height())maxheight=thischild.height();
thischild.children('li.'+options.active).parent().parent().children('a').addClass(options.header);
try{
thislink.hoverIntent({
sensitivity:1,interval:80,over:doHover,timeout:600,out:doNothing}
)}
catch(err){
thislink.hover(function(){
doHover(this)}
,function(){
doNothing()}
)}
if(options.activateitem=='true'){
thischild.children('li').each(function(){
var m=$(this).children('a').attr('href');
if(m){
if(thisurl.indexOf(m)>0&&thisurl.length-thisurl.lastIndexOf(m)==m.length){
$(this).addClass(options.active).parent().parent().children('a').addClass(options.opened)}
}
}
)}
else if(parseInt(options.activateitem)==itemNo){
thisitem.addClass(options.active).children('a').addClass(options.opened)}
}
thischild.not($(this).parent().children('li.'+options.active).children('ul')).not(thischild.children('li.'+options.active).parent()).hide().parent().children('a').addClass(options.closed)}
)}
}
)(jQuery);
分享到QQ
分享到微博
微信扫一扫
