【发布时间】：2013-08-26 05:18:14
【问题描述】：
所以我在 codrops 上发现了这个非常不错的 jQuery 菜单
http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-jquery/
我已经为自己弄清楚了如何修改的大部分内容。大部分都是有道理的，但我意识到当我想将普通链接放入“boxcontent”部分时，我做不到。 CSS有这个-
.littleBoxes{
width:350px;
height:350px;
margin:0 auto;
position:relative;
}
.littleBoxes > div{
position:absolute;
width:90px;
height:90px;
text-align:center;
border:2px solid white;
overflow:hidden;
background-color:#f7f7f7;
-moz-box-shadow:0px 0px 3px #555;
-webkit-box-shadow:0px 0px 3px #555;
box-shadow:0px 0px 3px #555;
background-position:center center;
z-index:999;
}
.littleBoxes div a{
text-transform:uppercase;
font-size: 18px;
font-weight:bold;
letter-spacing:-1px;
display:block;
line-height:90px;
text-decoration:none;
color:#fff;
background:#91EF4A url(../bgItem.png) repeat-x top left;
outline:none;
text-shadow:1px 1px 1px #888;
-moz-box-shadow:1px 1px 3px #777;
-webkit-box-shadow:1px 1px 3px #777;
box-shadow:1px 1px 3px #777;
}
.littleBoxes div.boxcontent{
width:334px;
height:246px;
text-align:left;
padding:10px;
font-size:16px;
background-color:#f0f0f0;
border:2px solid #fff;
margin:10px 0px 0px 10px;
text-shadow:1px 1px 1px #fff;
-moz-box-shadow:1px 1px 3px #777;
-webkit-box-shadow:1px 1px 3px #777;
box-shadow:1px 1px 3px #777;
opacity:0.8;
display:none;
}
我创建的任何链接都会有背景，并且会遵循脚本命令而不是访问网站。我查看了 cmets 并有解决方案，但每次我这样做时，菜单都会停止运行。
它说我必须为框内的每个顶部链接元素添加一个类。 然后，我所要做的就是将这个类添加到脚本内的绑定函数中，例如： $('#littleBoxes a.myClass').bind('click',function(e){ var $this = $(this); var $currentBox = $this.parent();
我整个周末都在绞尽脑汁，遇到了伪类，并认为我会为每个链接放置一个特定的类，但主要的 CSS 用它的特性覆盖了它。
这是我第一次在这里提出问题，我希望有人可以帮助我了解如何正确解决这个问题。试图制作链接到其他网站的正常超链接时，我已经筋疲力尽了。 :P
抱歉这个新问题。
我想我会添加网站的一般小部分
<html>
<head>
<title>Little Boxes Menu with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Little Boxes Menu or Navigation with jQuery -
radnomly animate the menu items to show content, accodion like boxes menu" />
<meta name="keywords" content="jquery, boxes, menu, navigation, animate"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
background:#E4FFCF url(on-music/wood.jpg) no-repeat top center;
font-family:Futura, "Century Gothic", AppleGothic, sans-serif;
overflow:hidden;
}
h1{
color:#fff;
margin:40px 0px 20px 40px;
text-shadow:1px 1px 1px #555;
font-weight:normal;
}
a.back{
position:absolute;
bottom:5px;
right:5px;
}
.reference{
position:absolute;
bottom:5px;
left:5px;
}
.reference p a, a.back{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:16px;
font-weight:bold;
}
.reference p a:hover, a.back:hover{
color:#000;
}
</style>
</head>
<body>
<div class="title">
<h1>Little Boxes Menu with jQuery</h1>
</div>
<div id="content">
<div class="reference">
<p><a href="http://www.flickr.com/photos/adforce1/">Photos from
williamcho's photostream on Flickr</a></p>
</div>
<a class="back" href="http://tympanus.net/codrops/2010/05/18/little-boxes-menu-
with-jquery">Back to Codrops</a>
<div id="littleBoxes" class="littleBoxes">
<div class="boxlink bg1" style="top:0px;left:0px;">
<a href="">About click me to see how far</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="bg5" style="background-position:-90px 0;top:0px;left:95px;"></
div>
<div class="bg5" style="background-position:-180px
0;top:0px;left:190px;"></div>
<div class="bg5" style="background-position:-270px
0;top:0px;left:285px;"></div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/* object to save the initial positions of each box */
var divinfo = {"initial": []};
/* index of the selected / clicked box */
var current = -1;
/* we save the index,top and left of each one of the boxes */
$('#littleBoxes > div').each(function(){
var $this = $(this);
var initial = {
'index' : $this.index(),
'top' : $this.css('top'),
'left' : $this.css('left')
};
divinfo.initial.push(initial);
});
/* clcik event for the anchors inside of the boxes */
$('#littleBoxes a').bind('click',function(e){
var $this = $(this);
var $currentBox = $this.parent();
/* set a z-index lower than all the other boxes,
to see the other boxes animation on the top*/
$currentBox.css('z-index','1');
/* if we are clicking on a expanded box : */
if(current == $currentBox.index()){
/* put it back (decrease width,height, and set the top and
left like it was before).
the previous positions are saved in the divinfo obj*/
$currentBox.stop().animate({
'top' : divinfo.initial[$currentBox.inde
()].top,
'left' : divinfo.initial[$currentBox.inde
()].left,
'width' : '90px',
'height' : '90px'
},800,'easeOutBack').find('.boxcontent').fadeOut();
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
var elemTop = divinfo.initial[$ele.index()].top;
var elemLeft = divinfo.initial[$ele.index()].left;
$ele.stop().show().animate({
'top' : elemTop,
'left' : elemLeft,
'opacity' : 1
},800);
});
current = -1;
}
/* if we are clicking on a small box : */
else{
/* randomly animate all the other boxes.
Math.floor(Math.random()*601) - 150 gives a random number
between -150 and 450.
This range is considering the initial lefts/tops of the
elements. It's not the exact right
range, since we would have to calculate the range based on
each one of the boxes. Anyway, it
fits our needs...
*/
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
$ele.stop().animate({
'top' : (Math.floor(Math.random()*601) - 150) +'px',
'left': (Math.floor(Math.random()*601) - 150) +'px',
'opacity':0
},800,function(){
$(this).hide();
});
});
/* expand the clicked one. Also, fadeIn the content(boxcontent)
if you want it to fill the space of the littleBoxes container,
then these are the right values */
var newwidth = 379;
var newheight = 379;
$currentBox.stop().animate({
'top' : '0px',
'left' : '0px',
'width' : newwidth +'px',
'height': newheight+'px'
},800,'easeOutBack',function(){
current = $currentBox.index();
$(this).find('.boxcontent').fadeIn();
});
}
e.preventDefault();
});
});
</script>
</body>
</html>
【问题讨论】：