Link to home
Start Free TrialLog in
Avatar of Swaminathan K
Swaminathan KFlag for India

asked on

Need help on horizontal menu creation using jquery

Hi ,

I need to create sample menu as below
Main menu consists of 4 main items namely Customers , payments, Support,Ledger. Sub Menus under main menu is shown below :

Customer has 3 sub menu namely New EXISTING and DELETE  For all the main menus , the sub menu should be shown horizontally as below . I have attached the sample code and style sheet for reference.

Main Menu      Sub Menu Horizontally

Customers  ->     NEW   EXISTING  DELETE
PAYMENTS   ->    CREDITCARD   DIRECT DEBIT   CHEQUE
Support -> Contact Info
Ledger -> Ledger Info


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SEARCH PAGE</title>
 
<link href="style/layout.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script>
   $(function(){
        $("#MainMenu > li > div").click(function(){      
             $(this).next().slideToggle(300);
             
             $("#MainMenu > li > div").not($(this)).next().slideUp(300);
             
        });  
                       
        $('#MainMenu ul:eq(0)').show();
                           
 });
</script>


 
</head>
 
<body>
 
<div id="container">
 
<div id="header1">Sam &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
 
<HR WIDTH="100%" style="border: 1px solid #E8E6F1;">
 
<div id="innercontainer">
 
<div class="header2">
 
<div id="header2menu" align="right"><b>Sample Data</b> &nbsp; <b>Information Bars</b>
&nbsp;  &nbsp; <b></b></div>
</div>
 
<HR SIZE="1" WIDTH="100%" style="border: 1px solid #E8E6F1;">
 
<div id="information">
 
<div id="leftpane">
 

 
<ul id="MainMenu" >
                <li>
               
                    <div>Customers &#9660; </div>
                    <ul>
                                    <li><a href="#">New</a></li>
                                    <li><a href="#">Existing</a></li>
                                    <li><a href="#">Delete</a></li>
                    </ul>
                </li>
                <li>
                    <div>Payments &#9660; </div>
                    <ul>
                                    <li><a href="#">Credit Card</a></li>
                                    <li><a href="#">Direct Debit</a></li>
                                    <li><a href="#">Cheque</a></li>
                    </ul>
                </li>
                <li>
                    <div>Support &#9660; </div>
                    <ul>
                                    <li><a href="#">Contact Info
                                                    </a></li>

                    </ul>
                </li>
                <li>
                        <div>Ledger &#9660; </div>
                        <ul>
                                <li><a href="#">Ledger Info
                                                </a></li>
                               
                        </ul>
                </li>
</ul>
 
 
<!-- <HR SIZE="1" WIDTH="100%" style="border: 1px solid #FCFCFE;">
 
-->
 
<div id="menubottom" style="border-right: 5px double #0ff" >
Welcome to my page .
</div>
 


</div>
 
 
<div id="rightpane">More Information</div>
 
 
</div>
 
 
<div id="footer"> Footer information</div>
</div>
 
</div>
</body>
</html>
layout.css
SOLUTION
Avatar of yats
yats
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Swaminathan K

ASKER

Thanks Yats , the solution was as per my expectations..