This site requires JavaScript turned on. Your browser does not support JavaScript, or it has JavaScript disabled. If you want to correctly view all the pages on this site, please upgrade your browser or enable JavaScript support. Thank you for taking the time to visit.

« Links open in new window/tab »

Free Site Search Engine at JRank.org

« Links open in new window/tab »

Web Design & Development

Monitor Page for Changes

Share |

CSS - Hover Menu with Text Descriptions III
PayneLess Designs

Link to Working Hover Menu

with Text Descriptions

CSS Used:

a:link {
font: bold 80% verdana, serif, sans-serif;
color: #006800;
background: #e0ffff;
text-decoration: none;
}
a:visited {
font: bold 80% verdana, serif, sans-serif;
color: #900;
background-color: #e0ffff;
text-decoration: none;
}
a:hover {
font: italic 80% verdana, serif, sans-serif;
font-weight: bold;
color: #00f;
background: #fa8072;
text-decoration: none;
}
a:active {
font: bold 80% verdana, serif, sans-serif;
color: #700;
text-decoration: none;
}

.hover_menu_sidebaritem {
width: 120px;
padding: 1px;
margin-bottom: 5px;
background: #bdb76b;
color: #f4a460;
border: 1px solid #f4a460;
font-weight: bold;
text-align: center;
}

.horiz {
float: left;
}

#textdescription {
width: 100%;
height: 250px;
padding: 2px;
filter:alpha(opacity=0);
-moz-opacity:0;
font: bold 1em Verdana;
color: #f0f;
background: #000;
}

div#hover_menu_container {
width: 497px;
height: 48px;
margin: 0 auto;
border: 1px solid #f00;
}

div#hover_menu_sub_container {
width: 500px;
height: 250px;
margin: 3% auto;
border: 1px solid #f00;
}

JavaScript Used (keeps IE happy):

var baseopacity=0

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("textdescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("textdescription").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("textdescription").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)
}

HTML:

<div id="hover_menu_container">
<div class="hover_menu_sidebaritem horiz" id="coolmenu"><a href="futurelinks.html" title="Link One" onMouseover="showtext('Link One Text Description Here')" onMouseout="hidetext()">Link One</a></div>
<div class="hover_menu_sidebaritem horiz"><a href="futurelinks.html" title="Link Two" onMouseover="showtext('Link Two Text Description Here')" onMouseout="hidetext()">Link Two</a></div>
<div class="hover_menu_sidebaritem horiz"><a href="futurelinks.html" title="Link Three" onMouseover="showtext('Link Three Text Description Here')" onMouseout="hidetext()">Link Three</a></div>
<div class="hover_menu_sidebaritem horiz"><a href="futurelinks.html" title="Link Four" onMouseover="showtext('Link Four Text Description Here')" onMouseout="hidetext()">Link Four</a></div>
<div class="hover_menu_sidebaritem horiz"><a href="futurelinks.html" title="Link Five" onMouseover="showtext('Link Five Text Description Here')" onMouseout="hidetext()">Link Five</a></div>
<div class="hover_menu_sidebaritem horiz"><a href="futurelinks.html" title="Link Six" onMouseover="showtext('Link Six Text Description Here')" onMouseout="hidetext()">Link Six</a></div>
</div>

<div id="hover_menu_sub_container"><div id="textdescription"></div></div>

If you have found any services on my site to be beneficial and would like to donate, please feel free to donate ANY amount you want. Thank you very much.

« Links open in new window/tab »

« Links open in new window/tab »

Monitor Page for Changes

CSS - Hover Menu with Text Descriptions IIIPayneLess Designs

CSS - Hover Menu with Text Descriptions III
PayneLess Designs