Question

我正在为摄影网站设计一个菜单。我想要的是一个菜单，在悬停时做两件事：弹出与菜单<li>一致的单个图像，并且还在菜单下方显示一些保持在页面中心的文本，即具有{{ 1}}。我已经处理了第一个要求，但我仍然坚持如何实现文本显示。这是我到目前为止所得到的......

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>

到目前为止，这是它的外观......

http://www.erisdesigns.net/STAGE/ScottHevener/

Answer 1

在left: 0;上尝试#menuholder它应该可以解决问题。

css js菜单帮助

1 个答案: