Categories:

CSS hover menu with onMouseover text descriptions

The below example builds on the CSS hover menu in the previous page with a JavaScript effect that shows us a description of each menu item onMouseover:

Example:

Source:

<style type="text/css">

#coolmenu{
border: 1px solid black;
width: 170px;
background-color: #E6E6E6;
}

#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

#tabledescription{
width: 100%;
height: 3em;
padding: 2px;
filter:alpha(opacity=0);
opacity:0;
}

</style>

<script type="text/javascript">

var baseopacity=0

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : "standard"
instantset(baseopacity)
textcontainerobj.innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else
textcontainerobj.style.opacity=degree
textcontainerobj.innerHTML=""
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="standard" && cur2.style.opacity<1)
cur2.style.opacity=Math.min(parseFloat(cur2.style.opacity)+0.2, 1)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

<div id="coolmenu">
<a href="http://www.javascriptkit.com" onMouseover="showtext('JavaScript tutorials and scripts!')" onMouseout="hidetext()">JavaScript Kit</a>
<a href="http://www.javascriptkit.com/cutpastejava.shtml" onMouseover="showtext('300+ free JavaScripts')" onMouseout="hidetext()">Free JavaScripts</a>
<a href="http://www.javascriptkit.com/jsref/" onMouseover="showtext('Comprehensive JavaScript Reference')" onMouseout="hidetext()">JavaScript Reference</a>
<a href="http://www.codingforums.com" onMouseover="showtext('Web coding and development forums!')" onMouseout="hidetext()">Coding Forums</a>
<a href="http://www.dynamicdrive.com" onMouseover="showtext('Award winning DHTML and JavaScripts')" onMouseout="hidetext()">Dynamic Drive</a>
<div id="tabledescription"></div>
</div>

The CSS properties in red is new, and is what makes the fading effect possible. By using the proprietary CSS properties "filter" in older versions of IE, and "opacity" in everything else to apply opacity, I then use JavaScript to manipulate the degree of opacity of the "tabledescription" DIV.