T his script provides descriptions for the links* on your menus. It is styled entirely using CSS, making it very easy to customize. Just place your cursor over any of the links and see the effect.
* And to answer your next question, Yes, the links can be opened in a new window. See below tutorial on howto.
W e have tested the code in IE5.5, IE6.0, Firefox1.0, Opera7.54u2 and Netscape7.02. This script worked well in all platforms with no variations observed.
D epending on your knowlwdge of HTML, javascripts and CSS, this is an easy two part, copy and paste code with configurations in both the <HEAD> (CSS configurations) and <BODY> (links, targets, discriptive text, etc.).
Head Section Reconfigurations
<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{
width: auto;
}
#coolmenu a:hover{
background-color: black;
color: white;
}
#tabledescription{
width: 100%;
height: 3em;
padding: 2px;
filter:alpha(opacity=0);
-moz-opacity:0;
}
-->
</style>
A nything that we have color-coded in the above portion of code you can change the color(s). Just keep experimenting until you find the color scheme you like. This is basically just a CSS tag that has been elaborated.
Body Section Reconfigurations
<div id="coolmenu">
<a href="URL Goes Here" onMouseover="showtext('Descriptive Text Here')" onMouseout="hidetext()">Link Name Goes Here</a>
<a href="URL Goes Here" onMouseover="showtext('Descriptive Text Here')" onMouseout="hidetext()">Link Name Goes Here</a>
<a href="URL Goes Here" onMouseover="showtext('Descriptive Text Here')" onMouseout="hidetext()">Link Name Goes Here</a>
<a href="URL Goes Here" onMouseover="showtext('Descriptive Text Here')" onMouseout="hidetext()">Link Name Goes Here</a>
<a href="URL Goes Here" onMouseover="showtext('Descriptive Text Here')" onMouseout="hidetext()">Link Name Goes Here</a>
<div id="tabledescription"></div>
</div>
E arlier, we told you that the links can be opened in a new browser window as opposed to opening in the same window where you would lose this menu effect. All you need to do is add the attribute of target="_blank". See below on howto:
<a href="URL Goes Here"target="_blank" onMouseover="showtext('Descriptive Text Here')" onMouseout="hidetext()">Link Name Goes Here</a>
Y ou can also add or delete as many links as you want. Just follow the pattern where you add links and be sure they are all before the 2 closing </div> tags. In other words, just add the below piece of code for each additional link you want added into this menu effect.
<a href="URL Goes Here" onMouseover="showtext('Descriptive Text Here')" onMouseout="hidetext()">Link Name Goes Here</a>
I
f you would like to add this effect into your pages, grab the below link and you are there. If you have any problems with this, feel free to contact us.
[
Get Code Here ]
