Hover for Links?

[ellenjones]

Not exactly sure if this forum is entirley active, buuut; I've been working on my test forum lately because I destroyed my old forum. So, I'm getting everything ready and then I'll make a new board and transfer it. But anyway, that's besides the point. I was working on my sidetables, filling them in, etc, etc. When I finished my "setting" section I moved onto the next, which was; quicklinks. So that was my big story on how I got here. Basically I was wanted a link page where you hover, and the links appear and you just click on them for shortcuts. If you can't get the hover code, it's find if you give me the drop down menu.

Hover examples:
Caution 2.0(<Although, this is invision free)
Young Forever

Drop Down Menu Examples:
Childhood Memories, rather dead, but an example none the less.

My new website!

[JZSquared]

Mar 19, 2010 21:54:50 GMT -5 ellenjones said:

Not exactly sure if this forum is entirley active, buuut; I've been working on my test forum lately because I destroyed my old forum. So, I'm getting everything ready and then I'll make a new board and transfer it. But anyway, that's besides the point. I was working on my sidetables, filling them in, etc, etc. When I finished my "setting" section I moved onto the next, which was; quicklinks. So that was my big story on how I got here. Basically I was wanted a link page where you hover, and the links appear and you just click on them for shortcuts. If you can't get the hover code, it's find if you give me the drop down menu.

Hover examples:
Caution 2.0(<Although, this is invision free)
Young Forever

Drop Down Menu Examples:
Childhood Memories, rather dead, but an example none the less.

My new website!

Hello and welcome to PB Codes. I apologize for the delayed response. Now I took a look at Childhood Memories, and here is what they are using to get a drop down menu:

<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://childhood-memories.proboards.com/index.cgi?board=firststop&action=display&thread=1&page=1">CHILDHOOD MEMORIES *!</option>
<option value="http://childhood-memories.proboards.com/index.cgi?board=firststop&action=display&thread=1&page=1">rules/guidelines</option>
<option value="http://childhood-memories.proboards.com/index.cgi?board=registering&action=display&thread=2">application form</option>
<option value="http://childhood-memories.proboards.com/index.cgi?board=claimscenter">check out claims</option>

<option value="http://childhood-memories.proboards.com/index.cgi?board=wantedads">the wanted ads</option>
<option value="http://childhood-memories.proboards.com/index.cgi?action=display&board=yearbook&thread=6&page=1">sign the yearbook</option>
<option value="http://childhood-memories.proboards.com/index.cgi?action=display&board=advertise&thread=12">our advertisement</option>
</select>
</form>

All you have to do is change the URLs to your own, and the text between the option tags to have it display the text you want in the drop down menu. And for the hover code, this is what Young Forever is using:

<script type="text/javascript">

/***********************************************
* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var defaultMenuWidth="125px" //set default menu width.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<a href="http://young-forever.proboards.com/index.cgi">01. HOME</a>'
linkset[0]+='<a href="http://young-forever.proboards.com/index.cgi?board=general&action=display&thread=5&page=1">02. PLOT</a>'
linkset[0]+='<a href="http://young-forever.proboards.com/index.cgi?board=general&action=display&thread=1">03. RULES</a>'
linkset[0]+='<a href="http://young-forever.proboards.com/index.cgi?board=setup">04. CLAIMS</a>'
linkset[0]+='<a href="http://young-forever.proboards.com/index.cgi?board=signup&action=display&thread=2">05. APPLICATION</a>'
linkset[0]+='<a href="http://young-forever.proboards.com/index.cgi?board=plug">06. PLUGS</A>'


////No need to edit beyond here

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script>

And then they use this in their side table to complete it:

<img src="http://i647.photobucket.com/albums/uu195/TeamCullen92xo/Young%20Forever/links.png" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">

Those all appear to be main page header codes.