Re: How to make a floating menu

by Godzone on Tue Sep 15, 2009 9:17 pm

Frequently Asked: How To Make A Floating Menu!

Step one - Activate your homepage message. You can do this by opening Admin-control panel. Then go Display < Homepage - Generalities < Homepage message

Step two - In the "message content" box paste the code below.

Code:: <head><style type="text/css"> #topbar{ position:absolute; border: 1px solid black; padding: 2px; background-color: black; width: 87px; visibility: hidden; z-index: 100; } </style> <script type="text/javascript"> /*********************************************** * Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com) * Sliding routine by Roy Whittle (http://www.javascript-fx.com/) * This notice must stay intact for legal use. * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session var startX = 30 //set x offset of bar in pixels var startY = 5 //set y offset of bar in pixels var verticalpos="fromtop" //enter "fromtop" or "frombottom" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document·cookie.length > 0) { offset = document·cookie.indexOf(search) if (offset != -1) { offset += search.length end = document·cookie.indexOf(";", offset); if (end == -1) end = document·cookie.length; returnvalue=unescape(document·cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document·cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar </script></head> <body> <div id="topbar"> <a href="" onClick="closebar(); return false"><img src="http://img.photobucket.com/albums/v328/stardragon588/x.jpg" border="0" /></a> <font color="white"><table border="1"><tr></tr><th rowspan="2">Home <hr> Portal <hr>Members <hr> Groups</th><th colspan="2">Navigation Bar</th></tr><tr><td>Text Here</td><td>Other Text</td></tr></table></font> </div>

Note: At the end of the code is where the actual menu is located.

Changing Color, Size, and location.

1. Change Properties in bold to change color, borders, and size. (At the beginning of the full code)

position:absolute;
border: 1px solid black;
padding: 2px;
background-color: black;
width: 87px;
visibility: hidden;
z-index: 100;

2. Change position of the menu (Under the big notation of legal use, near the beginning)

var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels

Example:
It appears at the top left.
http://jennyscape.omgforum.net/TestingArea-h1.htm

Credits:
90% - http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_74.html
10% - Me