How to make a floating menu

Post new topic   Reply to topic

The forum of the forums :: About Forumotion ::   :: Tricks & tips

View previous topic View next topic Go down

Re: How to make a floating menu

Post by Godzone on Tue Sep 15, 2009 10: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

Godzone
Forumotion Member

Male
Posts: 65
Language: English and Bosnian
Location: Georgia
Country:
Join date: 2009-09-09

Back to top Go down

View previous topic View next topic Back to top

Post new topic   Reply to topic

The forum of the forums :: About Forumotion ::   :: Tricks & tips

Permissions of this forum:
You cannot reply to topics in this forum