<script
language="JavaScript1.2">
//Hover-up Menu Bar: By Dynamicdrive.com
//Credit must stay intact for use
//Visit http://www.dynamicdrive.com for this script and more
//CSS stylesheet for menu bar
//Customize background color (#FFF2BF) and link color (black):
var cssdefinition='<style>\n.menuitems{\nborder:2.5px solid
#FFF2BF;\n}\n\n.menuitems a{\ntext-decoration:none;\ncolor:black;\n}\n<\/style>'
//No need to edit beyond here
if (document.all||document.getElementById)
document.write(cssdefinition)
function over_effect(e,state, bgcolor){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
else{
while(source4.tagName!="DIV"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
}
}
}
</script><!--Customize menu dimension, initial menu color (#FFF2BF) and hover
color (#FFE271) -->
<div style="background-color:#FFF2BF;width:80%;height:23px;padding-top:5px"
onMouseover="over_effect(event,'outset','#FFE271')"
onMouseout="over_effect(event,'solid','#FFF2BF')"
onMousedown="over_effect(event,'inset')"
onMouseup="over_effect(event,'outset')">
<font face="Arial" size="2">
<span><b>Great links </b></span>
<span class="menuitems"><a
href="http://javascriptkit.com">JavaScript Kit</a></span>
<span class="menuitems"><a
href="http://freewarejava.com">Freewarejava.com</a></span>
<span class="menuitems"><a
href="http://freewarejava.com/cgi-bin/Ultimate.cgi">Webmaster Help
Forum</a></span>
<span class="menuitems"><a
href="http://www.flamingtext.com">Flaming Text</a></span>
<span class="menuitems"><a
href="http://www.thefreesite.com">The Free Site</a></span>
</font>
</div>
Configuring the menu
The code of Step 2 illustrates what must be done to
transform your menu links into a hover-up bar. Firstly, create a <DIV> with the
following codes inside of it:
<div style="background-color:#FFF2BF;width:80%;height:23px;padding-top:5px"
onMouseover="over_effect(event,'outset','#FFE271')"
onMouseout="over_effect(event,'solid','#FFF2BF')"
onMousedown="over_effect(event,'inset')"
onMouseup="over_effect(event,'outset')">
Then, add <span> tags inside this <DIV> to
create the individual menu links.
<span class="menuitems"><a
href="http://javascriptkit.com">JavaScript Kit</a></span>
The CSS code "class='menuitems'" causes the
<SPAN> in question to actually receive the hover effect. Remove this CSS code to
disable the effect for it. |
