Website pop-up menu system help

Toggle sidebar Toggle sidebar
I

imported_Rampage

Senior member
Jun 6, 2005
935
0
0
Can anyone help me with the following code, I'm a total noob at this and I'm learning so bear with me.

I need to do the following things, at minimum.
Put this menu on the left hand side of the screen.
Possibly make it so that it pushes whatever else is on the webpage automatically over (forcing its own space instead of overlapping things on
the left hand side of the screen. If not possible this is not crucial, I can just design the pages around this menu system instead.
How to change the secondary and 3rd rank popup menu text colors to white (the main menu bar is fine).

I had to edit out some of the corporate information so theres alot of X's ect



<style>
.menu a{
color: green;
text-decoration: none;
}
.menu a:hover{
color: yellow;
}
.menuBar{
background-color: #006400;
position: absolute;
top: 0;
left: 0;
height: 15;
z-index: 1;
padding: 4px;
}
.menuTrigger{
font: 10pt Verdana, sans-serif;
color: white;
background-color: #006400;
position: absolute;
top: 0;
padding: 4px;
width: 100;
height: 15;
z-index: 2;
cursor: pointer;
cursor: hand;
}
.menu{
font: 8pt Verdana, sans-serif;
color: white;
background-color: #006400;
position: absolute;
top: 23;
padding: 4px;
width: 100;
visibility: hidden;
z-index: 2;
}
</style>
<script language="JavaScript">
var mnuSelected = '';
var subMnuSelected = '';
function showMenu(menu){
hideMenu(mnuSelected);
document.getElementById(menu).style.visibility = 'visible';
mnuSelected = menu;
}
function hideMenu(menu){
if(mnuSelected!='')
document.getElementById(menu).style.visibility = 'hidden';
}
function showSubMenu(menu){
hideSubMenu(subMnuSelected);
document.getElementById(menu).style.visibility = 'visible';
subMnuSelected = menu;
}
function hideSubMenu(menu){
if(subMnuSelected!='')
document.getElementById(menu).style.visibility = 'hidden';
}
function init(){
if(document.all){
aWidth = document.body.clientWidth;
document.getElementById('menuBar').style.width = aWidth;
}else{
aWidth = innerWidth;
document.getElementById('menuBar').style.width = aWidth-7;
}
document.getElementById('About').style.left = parseInt((aWidth/2 - 200));
document.getElementById('Services').style.left = parseInt((aWidth/2 - 100));
document.getElementById('Samples').style.left = parseInt(aWidth/2);
document.getElementById('Contact').style.left = parseInt((aWidth/2 + 100));
document.getElementById('mnuAbout').style.left = document.getElementById('About').style.left;
document.getElementById('mnuServices').style.left = document.getElementById('Services').style.left;
document.getElementById('mnuSamples').style.left = document.getElementById('Samples').style.left;
document.getElementById('mnuContact').style.left = document.getElementById('Contact').style.left;
document.getElementById('mnuAboutSub1').style.left = parseInt(document.getElementById('About').style.left) + 100;
}
</script>
</head>
<body onLoad="init()" onResize="history.go(0)">
<div id="menuBar" class="menuBar"></div>
<div id="About" class="menuTrigger" onMouseOut="this.style.color='';" onMouseOver="showMenu('mnuAbout'); hideSubMenu(subMnuSelected);this.style.color='yellow';">Waterloo Works Results</div>
<div id="Services" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnuServices'); hideSubMenu(subMnuSelected);this.style.color='yellow';">Presentation Information</div>
<div id="Samples" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnuSamples'); hideSubMenu(subMnuSelected);this.style.color='yellow';">Training and Information</div>
<div id="Contact" class="menuTrigger" onMouseOut="this.style.color='white';" onMouseOver="showMenu('mnuContact'); hideSubMenu(subMnuSelected);this.style.color='yellow';">Other DPS sites</div>
<div id="mnuAbout" class="menu" onMouseOut="hideMenu(mnuSelected);hideSubMenu(subMnuSelected);" onMouseOver="showMenu(mnuSelected)">
<p onMouseOver="this.style.backgroundColor='#006400'; showSubMenu('mnuAboutSub1');" onMouseOut="this.style.backgroundColor='';event.cancelBubble=true;"><a href="#">Baseline Results</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Midterm Results</a></p>
</div>
<div id="mnuServices" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Placeholder 1</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Placeholder 2</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Placeholder 3</a></p>
</div>
<div id="mnuSamples" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">ex 1</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">ex 2</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">ex 3</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">ex 4</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">ex 5</a></p>
</div>
<div id="mnuContact" class="menu" onMouseOut="hideMenu(mnuSelected)" onMouseOver="showMenu(mnuSelected)">
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Ottumwa, Iowa</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">East Moline, Illinois (Harvester)</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Thibodaux, Louisiana (Cameco)</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Augusta, Georgia</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Welland, Ontario</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Mannheim, Germany</a></p>
</div>
<div id="mnuAboutSub1" class="menu" style="top: 30" onMouseOut="hideMenu(mnuSelected); hideSubMenu(subMnuSelected)" onMouseOver="showMenu(mnuSelected); showSubMenu(subMnuSelected)">
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
<p onMouseOver="this.style.backgroundColor='#006400'" onMouseOut="this.style.backgroundColor=''"><a href="#">Sub About 1</a></p>
</div>
</body>
</html>
Click to expand...
 
X

xtknight

Elite Member
Oct 15, 2004
12,974
0
71
Give this a whirl.

[*]I put the menu to the left.
[*]As for the 'pushing over' of content, it really doesn't do that, it overlays over it, but honestly I think pushing over the content is too intensive and I haven't seen any other site do it. I don't know how to do it anyway, sorry.
[*]I made the menu bar taller to fit your text better.
[*]2nd and 3rd-level popup menus are white now. (1st-level one was and still is as well). [*]Fixed order of HTML (added missing HTML and HEAD tags to beginning).
[*]Added a line of text to the body.
[*]Condensed onMouseOut/onMouseOver in to .a and .a:hover.
 
I

imported_Rampage

Senior member
Jun 6, 2005
935
0
0
OMG I'm eternally indebted to you xtknight.
if i get a namechange i'll be xtsquire LOL

im going to try that code and take a look at the changes to figure out whats going on here.

THANK YOU
:beer:

Im sending off a bottle of bourbon to Rollo (he helped me get this new job by helping me write a thank you letter to my current boss after the interview), I think I might have to send one your way as well!
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom