Warning: include(/home/tiramisyu/http/tiramisyu.com/skins/cookiecheck.php) [function.include]: failed to open stream: No such file or directory in /home/.tadd/tiramisyu/http/tiramisyu.com/tuts/descripmenu.php on line 1

Warning: include() [function.include]: Failed opening '/home/tiramisyu/http/tiramisyu.com/skins/cookiecheck.php' for inclusion (include_path='.:/usr/local/php5/lib/php:/usr/local/lib/php') in /home/.tadd/tiramisyu/http/tiramisyu.com/tuts/descripmenu.php on line 1

Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/php5/lib/php:/usr/local/lib/php') in /home/.tadd/tiramisyu/http/tiramisyu.com/tuts/descripmenu.php on line 2

home » tutorials » description menu »

This shows you have to create a menu so that when your visitors hovers over the menu link a small description of the link shows up on the bottom.

1. Copy and paste the following to the page you would like the menu to be displayed on. Change the coding inside the style tags to customise to look of your menu.

#menu{
border: 1px solid #808080;
width: 300px;
background-color: #fcfcfc;
}

#menu a{
font: normal 11px arial;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid red;
}

html, body #menu a{
width: auto;
}

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

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

</style>

var baseopacity=0

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

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

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}

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

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

</script>

2. Copy and paste the following to where you would like your menu to appear.

3. Change the words in CAPS to your links. To add your description to each link, change the "Description here" text to your description and you are done. To add more links to your menu just add another menu link to the bottom.

Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/php5/lib/php:/usr/local/lib/php') in /home/.tadd/tiramisyu/http/tiramisyu.com/tuts/descripmenu.php on line 207