The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make a floating menu

View previous topic View next topic Go down

How to make a floating menu

Post by Godzone on September 16th 2009, 5:17 am

How to make a floating menu


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
Forumember

Male Posts : 100
Reputation : 2
Language : English and Bosnian
Location : Georgia

Back to top Go down

Re: How to make a floating menu

Post by SLGray on April 7th 2016, 6:53 pm

Members who use Chrome beware of an issue with this tutorial.  It causes issues with the editor, and you can not remove the code from the homepage message.

If you have used it and having issues, please read this post:  http://help.forumotion.com/t146701-floating-menu-code-broke-forum-description#1008501 .


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35661
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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