css js menu help

I'm designing a menu for a photography site. What I would like is a menu that on hover does two things: pops up an individual image in line with the menu <li>, and also displays just below the menu some text that stays centered in the page, i.e. has position:fixed;. I've taken care of the first requirement, but I'm stuck as to how to achieve the text display. Here's what I've got so far...

<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>

Yes, the menu is in the footer. That's not a mistake ;)

#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;
}

And here's how it looks, so far...

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

ansaurus

tags:

views:

answers:

related questions