www.webdeveloper.com
Results 1 to 7 of 7

Thread: Creating Submenu....plz help!!!

  1. #1
    Join Date
    Oct 2008
    Posts
    14

    Creating Submenu....plz help!!!

    I am creating a menu where if I click on a menu item it opens a submenu by PUSHING other menu items.......how can I achieve this......need some concept plz.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    Question So many questions ... so little time ...

    How many levels?
    What sort of entries?
    How many per push?

    What do you have as a start if you are "creating a menu"?

  3. #3
    Join Date
    Oct 2008
    Posts
    14
    Initially my menu (vertical menu on one side of webpage) looks like this:

    _____________
    HOME |
    _____________|
    REVIEWS |
    _____________|
    HOT N NEW |
    _____________|
    CONTACT US |
    _____________|



    Now when I click on the home button menu changes as following:
    ______________
    HOME |
    _____________|
    About Us |
    _____________|
    New Hits |
    _____________|
    REVIEWS |
    _____________|
    HOT N NEW |
    _____________|
    CONTACT US |
    _____________|



    Thnx in Advance!

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    Lightbulb Consider this ...

    That looks like a regular vertical menu. Where does the push part come in?
    Do you mean that the new choices move in between the earlier choices?

    There are tons of vertical menus to choose from, this is a very simple one:

    HTML/JS portion:
    Code:
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Vertical Menu</title>
    <link rel="stylesheet" type="text/css" href="menuV.css">
    
    <script type="text/javascript">
    function SwitchMenu(id){
     if(document.getElementById){
      var el;
      for (i=1; i<=6; i++) {
        spick = 'sub'+i;
        if (spick != id) { document.getElementById(spick).style.display = 'none'; }
    		else { el = document.getElementById(id);
      		       el.style.display = (el.style.display != "block")?'block':'none' }
      }
     }
    }
    </script>
    </head>
    <body onload="SwitchMenu('')">
    
    <noscript>
    <div align="center">
    <b>This site is best viewed and navigated with Javascript enabled. 
    <a href="http://support.microsoft.com/gp/howtoscript" target="_blank" class="center">
    Click here</a> to learn how to do so.</b><p>
    </div>
    </noscript>
    
    <!-- table border="0" align="left"><tr><td -->
    
    <div id="masterdiv" style="margin:5px;"> <!-- align="center" -->
    
    <div class="menutitle" onclick="SwitchMenu('sub1')"> Upper Body
      <div class="submenu" id="sub1">
    	<a href="#" class="menu">Blouse</a>
    	<a href="#" class="menu">Dri-fits</a>
    	<a href="#" class="menu">Dri-fit Polos</a>
    	<a href="#" class="menu">Polos</a>
    
    	<a href="#" class="menu">Pullovers</a>
    	<a href="#" class="menu">T-Shirts</a>
      </div>
    </div>
    
    <div class="menutitle" onclick="SwitchMenu('sub2')"> Lower Body
      <div class="submenu" id="sub2">
    	<a href="#" class="menu"> Skirts</a>
    
    	<a href="#" class="menu"> Athletic Shorts</a>
      </div>
    </div>
    
    <div class="menutitle" onclick="SwitchMenu('sub3')"> Arm
      <div class="submenu" id="sub3">
    	<a href="#" class="menu"> Sleeves</a>
    	<a href="#" class="menu"> Bracelets</a>
    
    	<a href="#" class="menu"> Watches</a>
      </div>
    </div>
    
    <p class="clear">
    
    <div class="menutitle" onclick="SwitchMenu('sub4')"> Headwear
      <div class="submenu" id="sub4">
    	<a href="#" class="menu">"Sweet" Flex Fit Hats</a>
      </div>
    
    </div>
    
    <div class="menutitle" onclick="SwitchMenu('sub5')"> Weightroom
      <div class="submenu" id="sub5">
    	<a href="#" class="menu">"Sweet" Cut-off Gloves</a>
      </div>
    </div>
    
    <div class="menutitle" onclick="SwitchMenu('sub6')"> Ladies' 
      <div class="submenu" id="sub6">
    	<a href="#" class="menu">3/4 Sleeves</a>
    
            <a href="#" class="menu">Fitted T-Shirts</a>
    	<a href="#" class="menu">Shorts</a>
    	<a href="#" class="menu">"Sweet" Pants</a>
    	<a href="#" class="menu">Tank Tops</a>
    	<a href="#" class="menu">Thongs</a>
      </div>
    
    </div>
    
    </div>
    
    <p class="clear">
    <!-- /td></tr></table -->
    
    <p>
    
    <h4 id="bottom2" style="margin-left:10px">
    <a href="#">Home</a> | 
    <a href="#">About</a> | 
    <a href="#">News</a> | 
    
    <a href="#">Contact</a> | 
    <a href="#">Site Map</a>
    </h4>
    
    </body>
    </html>
    CSS part: menuV.css
    Code:
    /* modified from: http://pacificsites.com/~dglaser/art/WebTips/10display/display.html	*/
    
    * 		{ margin:0; padding:0; }
    
    body 		{ font-family: tahoma; }
    
    .menutitle	{
    		cursor:pointer;
    		margin: 2px;
    		color:black;
    		padding:0px;
    		text-align:left;
    		font-size: 1.2em;
    		font-weight:bold;
    		width: 200px;
    		background-color: #7ca2c7;
    /* for vertical menu, use display:block and no float value */
    	display:block;
    /* for horizontal menu, use display:inline and float:left */
    /* 		display:inline; float:left; 	*/
    }
    .clear		{ clear:both; } 
    
    .submenu	{
    		cursor:pointer;
    		margin-bottom: 0.5em; margin-left: 3px; 
    		font-size: 0.8em;
    		color: black;
    }
    
    a.menu {
    	display: block;
    	color: black;
    	padding: 2px;
    	width: 190px;
    	margin: 2px;
    	text-decoration: none;
    }
    
    div.menutitle:hover { background:#c8d8e8; }	/* used to highligh 1st level */
    
    a.menu:hover {
    	background:#7ca2c7; 	/* #c8d8e8; */
    	color:black;
    }

  5. #5
    Join Date
    Oct 2008
    Posts
    14
    yes i meant that new choices move between earlier choices like "the lips open".......also the motion should be visible.....thnx guys for all your help.......really learning a lot from this forum.....THNX AGAIN TO ALL.

  6. #6
    Join Date
    Oct 2008
    Posts
    14
    The code is working fine but the appearance of submenu on clicking on a menu item occurs in a flash.......i have seen in many webpages where the opening of the submenu is done in a smoother fashion as the motion is visible while the submenu opens...... is this motion possible through javascript?

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354
    Do a search for "accordion menu"s
    or modify the one provided to suit your needs.

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