Menu Box With Colors

[Total: 0    Average: 0/5]

This example shows how to have a menu based on a box with non changing heights.

Head Code:

<script language="JavaScript">
//These are the texts to appear in the textframe 
var twoa = 'You have choosen 2a'; 
var twob = 'You have choosen 2b' 
var onea = 'You have choosen 1a' 
var oneb = 'You have choosen 1b' 
var msg1 = 'You have made Choice 1' 
var msg2 = 'You have made Choice2' 
var msg1a = 'You have made Choice 1a' 
var msg1b = 'You have made Choice 1b' 
var msg2a = 'You have made Choice 2a' 
var msg2b = 'You have made Choice 2b' 

//These are the submenu's to appear in the menu frame 
var submenu1 = '<a href="#" onClick="htmlChange('textframe',onea);" ><span class="blue">Choice 1a</span></a><br><a href="#" onClick="htmlChange('textframe',oneb);"><span class="blue">Choice 1b</span></a>'; 
var submenu1white = '<a href="#" onmouseover="htmlChange('submenu',submenu1red);" onClick="htmlChange('textframe',onea);"><span class="white">Choice 1a</span></a><br><a href="#" onClick="htmlChange('textframe',oneb);"><span class="white">Choice 1b</span></a>'; 
var submenu1red = '<a href="#" onmouseout="htmlChange('submenu',submenu1white);" onClick="htmlChange('textframe',onea);"><span class="red">Choice 1a</span></a><br><a href="#" onClick="htmlChange('textframe',oneb);"><span class="white">Choice 1b</span></a>'; 
var submenu2 = '<a href="#" onClick="htmlChange('textframe',twoa);"><span class="blue">Choice 2a</span></a><br><a href="#" onClick="htmlChange('textframe',twob);"><span class="blue">Choice 2b</span></a>'; 
var submenu2white = '<a href="#" onClick="htmlChange('textframe',twoa);"><span class="white">Choice 2a</span></a><br><a href="#" onClick="htmlChange('textframe',twob);"><span class="white">Choice 2b</span></a>';

//This is the function to change text: 
function htmlChange(id, message, bg){ 
d=document; 
re=d.all?d.all[id]:getElementById(id); 
re.innerHTML=message; 
re.style.background = "url("+bg+")"; 
} 
</script> 

<script language="JavaScript">
function getonme() { 
el = event.srcElement ; 
if (el.getAttribute("litUp1") != null) { 
el.className = "onme1" ; 
} 
} 
function getoffme() { 
el = event.srcElement ; 
if (el.getAttribute("litUp1") != null) { 
el.className = "offme"; 
} 
} 
document.onmouseover = getonme ; 
document.onmouseout = getoffme ; 
</script> 
<style type="text/css"><!-- 
.blue { color: navy; font-size: 13px; text-decoration: none} 
.white { color: #a0a0a0; font-size: 13px; text-decoration: none} 
.red   { color: red; font-size: 13px; text-decoration: none} 
.offme { color: #e0e030; font-size: 13px; text-decoration: none} 
.onme1 { color: #4169e1; font-size: 13px; text-decoration: none } 
span { color: white; font-size: 13px; text-decoration: none}--> 
</style> 

Body Code:

<table name="bigtable" border="1" bordercolor="purple" width="300" height="200" cellpadding="0" cellspacing="0"> 
<tr height="10"> 
<td id="headmenu" height="10"><a href="#" onmouseover="htmlChange('submenu',submenu1);" onClick="htmlChange('textframe',msg1);" onmouseout="htmlChange('submenu',submenu1white);"><span litup1>Choice1</span></a><br> <a href="#" onClick="htmlChange('textframe',msg2); htmlChange('submenu',submenu2);" onmouseover="htmlChange('submenu',submenu2);" onmouseout="htmlChange('submenu',submenu2white);"><span litup1>Choice2</span></a></td> 
</tr> 
<tr height="100"> 
<td id="textframe">Message</td> 
</tr> 
<tr> 
<td id="submenu" heigth="10"> </td> 
</tr> 
</table> 

Times Viewed: 3

Leave a Reply

Your email address will not be published. Required fields are marked *