Advertising

Want to be here?

Navigation

Main Domain Owner Contest

Affiliates

Aila | Anna | Ari | Beth | Bizz & Florin | Catherine | Elisabeth | Fatima | Gunnstein | Jabed | Jack | Katinka | Kristin | Lise | Marius | Michelle & Skye | Miriam | Nina | Taz | Tiffany | Tom | Tonje | Tori | Shahad | Sophie | Vegard | Victoria

MORE?

the owner

Vibeke. 20 years old. February 23. Norway. Asker. green eyes. brown hair. soccer player.
Loves: Jan Christopher. kebab. friends. Dolly+Ferdinand. Kumsen. money. pizza. snowboard. my green car. surprises. candy. coca cola. LOST. Prison Break. Ugly Betty. sun. Nickelback.
Hates: arrogant/fake people. school. toes. rain. stealers/copiers. homework. teachers.

MORE?

Domain

Owner: Vibeke
Host: one
Site name: vejc-design.com
Online since: 4. October '07
Hits:
Online: Online
Last updated: 28. July '08

MORE?

Layout

Layout up since July 28. It was made by Vibeke in Paint Shop Pro 9. Featuring no one. Fonts used: Ambrosia.

link me

MORE?

Updates

July 28

Frontpage

Photos from Ibiza

June 9

7 PNG's

8 photographs

May 29

5 photographs

Photo Gallery

Ads

Discription Menu

Main >> Tutorials >> HTML >> Discription Menu

Discription menu is really cool. You can type in a little discription for each page and when you hover it the discription appears under. Here's an example:

PAGENAME PAGENAME PAGENAME

Step 1: Start by copying the code under and paste it on the page you want to have the menu.
<style type="text/css"> #menu{ border: 1px solid black; width: 300px; background-color: #606060; } #menu a{ font: normal 10px verdana; padding: 2px; padding-left: 4px; display: block; width: 100%; color: black; text-decoration: none; border-bottom: 1px solid black; } 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> <script type="text/javascript"> 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>

Step 2: Then copy this code and paste it where you want the menu to be. You can even paste it in a textbox.
<div id="menu"><center> <a href="PAGEURL" onMouseover="showtext('Description here')" onMouseout="hidetext()">PAGENAME</a> <a href="PAGEURL" onMouseover="showtext('Description here')" onMouseout="hidetext()">PAGENAME</a> <a href="PAGEURL" onMouseover="showtext('Description here')" onMouseout="hidetext()">PAGENAME</a> <div id="tabledescription"> </div></center></div>

Step 3: Where it says PAGEURL you have to paste the URL of the pages you what to have in the menu, where it says Description here you can write a little description of each page you have in the menu, and finally where it says PAGENAME you can type in the names of your pages.

Step 4: The first code you copied is the code that decides the appearences of the menu. Where it says background-color: #606060 you can select another background color by typing in a different color code. If you want to change the width of the menu you have to change this part width: 300px;.
You can also change many other parts of the code, so just take a look at it, get to know it and try different things with it:)

Step 5: If you want more pages in your menu just copy the code under and paste it inside your last code between the div tags.
<a href="PAGEURL" onMouseover="showtext('Description here')" onMouseout="hidetext()">PAGENAME</a>

Copyright © 2007-2008 vejc-design.com. All rights reserved.
CN | ONE | GA | PB | CC