Alright so you have the header, horizontal menu, then content below it.
The horizontal menu has to expand PUSHING the content down slightly expanding the wrapper. I'm hoping someone can help me out with this because right now it's not even horizontal. When I flip it it all breaks
http://img51.imageshack.us/img51/9020/webhelp.png
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Accordion Menu Using jQuery</title> <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> <style type="text/css"> body,html { margin:0; padding:0; font: 75%/120% Verdana, Arial, Helvetica, sans-serif; } .wrapper { width: 800px; margin:0 auto } .menu_head { padding:5px 10px; cursor:pointer; position:relative; margin:1px; font-weight:bold; background:#eef4d3 url(left.png) center right no-repeat; } .menu_body { display:none; } .menu_body a { display:block; color:#006699; background-color:#EFEFEF; padding-left:10px; font-weight:bold; text-decoration:none; } .menu_body a:hover { color:#000000; text-decoration:underline; } div menu_head { border:1px solid red;display:inline-block;float:left; } .exp { width:100%;padding:50px 0;text-align:center;color:#fff;font-size:16px;font-weight:bold;background:#000 } </style> </head> <body> <div class="wrapper"> <div class="exp">Header</div> <div class="menu_head">Menu-1</div> <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div> <div class="menu_head">Menu-2</div> <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div> <div class="menu_head">Menu-3</div> <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div> <div class="exp">Footer</div> </div> <script type="text/javascript"> $(document).ready(function() { $("div.menu_head") .bind("mouseenter", function() { $(this).css({backgroundImage:"url(down.png)", }) .next("div.menu_body") .slideDown(200) .siblings("div.menu_body") }) .bind("mouseleave", function() { $(this).css({backgroundImage:"url(left.png)", }) .next("div.menu_body") .slideUp(200) .siblings("div.menu_body") }); }); </script> </body> </html>
Reply With Quote
Bookmarks