我正在为一个摄影网站设计菜单。我想要的是悬停时做两件事的菜单:弹出与菜单 <li> 一致的单个图像。 , 并且还在菜单下方显示一些在页面居中的文本，即 position:fixed; .我已经解决了第一个要求，但我对如何实现文本显示感到困惑。这是我到目前为止所得到的......
<body>
<div id="wrapper">
<div id="menuholder"></div><!--end menuholder-->
<div id="header">
</div><!--end header-->
<div id="content">
<div id="primary">
</div><!--end primary-->
<div id="secondary">
</div><!--end secondary-->
</div><!--end content-->
<div id="spacer"></div><!--end spacer-->
<div id="footer">
<div id="nav">
<script type="text/javascript"><!--js for the menu-->
$(document).ready(function()
{
$('#menuBar li').click(function()
{
var url = $(this).find('a').attr('href');
document.location.href = url;
});
$('#menuBar li').hover(function()
{
$(this).find('.menuInfo').slideDown();
$(this).find('.menuText').slideDown();
},
function()
{
$(this).find('.menuInfo').slideUp();
$(this).find('.menuText').slideUp();
});
});
</script>
<ul id="menuBar">
<li class="firstchild"><a href="link">Home</a>
<div class="menuInfo"><img src="images/link1.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li><a href="javascript:#">PHOTO1</a>
<div class="menuInfo"><img src="images/link2.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li><a href="javascript:#">PHOTO2</a>
<div class="menuInfo"><img src="images/link3.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li><a href="javascript:#">PHOTO3</a>
<div class="menuInfo"><img src="images/link4.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li><a href="javascript:#">PHOTO4</a>
<div class="menuInfo"><img src="images/link5.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li><a href="javascript:#">PHOTO5</a>
<div class="menuInfo"><img src="images/link6.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li><a href="javascript:#">PHOTO6</a>
<div class="menuInfo"><img src="images/link7.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
<li><a href="javascript:#">PHOTO7</a>
<div class="menuInfo"><img src="images/link8.png" /></div>
<div id="menuholder" class="menuText"><p>some text and possibly an image</p></div></li>
</ul>
</div><!--end nav-->
</div><!--end footer-->
</div><!--end wrapper-->
</body>
是的，菜单在页脚中。这不是错误 ;)
#footer {
position:relative;
width:100%;
background-image:url();/*remove if not using background image*/
text-align:center;
margin:0 auto;
margin-top:-100px;
clear:both;
}
#footer h1 {
font-size:1.2em;
margin:0;
padding:10px;
}
#footer p {
padding:4px;
}
#footer a:hover {
color:#999;
}
#nav {
width:650px;
height:45px;
background-color:#000;
color:#fff;
font-size:14px;
margin:20px auto 0;
}
#nav ul {
list-style-type:none;
display:block;
}
#menuBar li {
float:left;
padding:15px;
height:16px;
width:50px;
border-right:1px solid #ccc;
}
#menuBar li a {
color:#fff;
text-decoration:none;
letter-spacing:-1px;
font-weight:bold;
}
.menuHover {
background-color:#999;
}
.firstchild {
border-left:1px solid #ccc;
}
#menuholder {
position:fixed;
width:100%;
top:656px;
}
.menuInfo {
background-color:#000;
width:74px;
height:100px;
padding:3px;
display:none;
position:absolute;
margin:-100px 0 0 -15px;
}
.menuText {
background-color:#000;
color:#fff;
padding:0;
display:none;
font-size:14px;
}
到目前为止，这是它的样子......
最佳答案
在 #menuholder 上尝试 left: 0; 它应该可以解决问题。
关于javascript - css js 菜单帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3692668/