Creating Submenu....plz help!!! [Archive]

rahulpqr

05-09-2009, 01:12 AM

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.

JMRKER

05-09-2009, 10:21 AM

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

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

rahulpqr

05-09-2009, 10:39 AM

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!

JMRKER

05-09-2009, 11:06 AM

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:

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



<div id="masterdiv" style="margin:5px;"> 

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


<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

/* 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;
}

:)

rahulpqr

05-09-2009, 11:58 AM

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.

rahulpqr

05-09-2009, 12:09 PM

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?

JMRKER

05-09-2009, 12:18 PM

Do a search for "accordion menu"s
or modify the one provided to suit your needs.