www.webdeveloper.com
Results 1 to 2 of 2

Thread: Horizontal Yet Vertical Accordian Menu? (So hard to explain...see pics)

  1. #1
    Join Date
    Mar 2009
    Posts
    70

    Horizontal Yet Vertical Accordian Menu? (So hard to explain...see pics)

    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&#37;/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>

  2. #2
    Join Date
    Mar 2009
    Posts
    70
    come on it's not that serious, no one?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles