有人能帮我找出如何将普通链接放入这个Jquery菜单吗？
所以我在codrops上找到了这个非常好的jQuery菜单 我已经为自己弄明白了如何修改它的大部分内容。大部分都是有道理的，但我意识到当我想把普通链接放到“boxcontent”部分时，我做不到。CSS有这样的功能-有人能帮我找出如何将普通链接放入这个Jquery菜单吗？,jquery,css,menu,hyperlink,Jquery,Css,Menu,Hyperlink,所以我在codrops上找到了这个非常好的jQuery菜单 我已经为自己弄明白了如何修改它的大部分内容。大部分都是有道理的，但我意识到当我想把普通链接放到“boxcontent”部分时，我做不到。CSS有这样的功能- .littleBoxes{ width:350px; height:350px; margin:0 auto; position:relative; } .littleBoxes > div{ position:absolute;
.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;
}
<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>
带有jQuery的小方框菜单
*{
保证金：0；
填充：0；
}
身体{
背景：#e4ffcfurl（在music/wood.jpg上）没有重复的顶部中心；
字体系列：Futura，“世纪哥特式”，AppleGothic，无衬线；
溢出：隐藏；
}
h1{
颜色：#fff；
利润率：40px 0px 20px 40px；
文本阴影：1px 1px 1px#555；
字体大小：正常；
}
a、 背{
位置：绝对位置；
底部：5px；
右：5px；
}
.参考{
位置：绝对位置；
底部：5px；
左：5px；
}
.参考p a，a.背面{
文本转换：大写；
文本阴影：1px 1px 1px#fff；
颜色：#666；
文字装饰：无；
字体大小：16px；
字体大小：粗体；
}
参考p a:悬停，a.后退：悬停{
颜色：#000；
}
带有jQuery的小方框菜单
Lorem ipsum dolor sit amet，奉献精英，
劳工和大型企业的临时投资
一个很好的例子，一个很好的例子
ullamco laboris nisi和aliquip ex ea commodo consequat
$（函数（）{
/*对象以保存每个框的初始位置*/
var divinfo={“初始”：[]}；
/*所选/单击框的索引*/
无功电流=-1；
/*我们保存每个框的顶部和左侧的索引*/
$（'#littlebox>div'）。每个（函数（）{
var$this=$（this）；
初始值={
'index'：$this.index（），
'top'：$this.css（'top'），
'left'：$this.css（'left'）
};
divinfo.initial.push（初始）；
});
/*箱体内锚的clcik事件*/
$（'#littlebox a'）.bind（'click'，函数（e）{
var$this=$（this）；
var$currentBox=$this.parent（）；
/*将z索引设置为低于所有其他框，
要查看顶部的其他长方体动画*/
$currentBox.css（'z-index'，'1'）；
/*如果单击展开的框：*/
如果（当前==$currentBox.index（））{
/*放回原处（减少宽度、高度，并设置顶部和底部
像以前一样离开）。
以前的位置保存在DIVIFO obj中*/
$currentBox.stop（）.animate({
“顶部”：divinfo.initial[$currentBox.inde
（））顶部，
“左”：divinfo.initial[$currentBox.inde
（））左，
“宽度”：“90px”，
“高度”：“90px”
}，800，'easeOutBack'）.find（'.boxcontent'）.fadeOut（）；
$（'#LittleBox>div'）。不是（$currentBox）。每个（函数（）{
变量$ele=$（本）；
var elemTop=divinfo.initial[$ele.index（）].top；
var elemLeft=divinfo.initial[$ele.index（）]左；
$ele.stop（）.show（）.animate({
“top”：elemTop，
“左”：elemLeft，
“不透明度”：1
},800);
});
电流=-1；
}
/*如果我们单击一个小框：*/
否则{
/*随机设置所有其他框的动画。
Math.floor（Math.random（）*601）-150给出一个随机数
在-150和450之间。
此范围考虑的是初始的左侧/顶部
元素，不完全正确
范围，因为我们必须根据
每一个盒子。不管怎样，它
适合我们的需要。。。
e.preventDefault();
if(e.href != e.baseURI) { e.preventDefault(); }
$('#littleBoxes > div').each(function(){
$('#littleBoxes > div','myClass').each(function(){
$('myClass').removeClass('#littleBoxes a').addClass('#myClass a');
.myClass div a{
text-transform: none;
font-size: 16px;
font-weight: normal;
letter-spacing: normal;
display: inline;
line-height: normal;
text-decoration: underline;
color:#000000;
background: none;
outline: none;
text-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_self');
});
}
});
<a href="#" onclick="javascript: location = 'http://www.google.com';" >Google</a>