Revision [11662]

This is an old revision of PopOutSideMenu made by GmBowen on 2005-11-05 21:43:23.

 

This is a modification of a script obtained from www.dynamicdrive.com. I use it as a popout menu from the left side on all of the admin pages on my site, but you could use it for anything...and even make it dynamic I suppose so you could load items in as a paramter string. You have to do two things....(1) put the first set of code in the header.php file just before and (2) put the second set of code in the actions directory with whatever file name you want (I use sidemenu.php) and setting the pages and pagenames that you want (just replace mine). Then that action (e.g., {{sidemenu}}) can be placed on whatever pages you like. My wikka implementation also has another javascript drp-down menu and to get this to work with mine I had to comment out a line (See "Line below commented out by GMBowen....") so if you don't have that dropdown you may have to un-comment out the line. Have fun.

	<style>
	<!--
	#slidemenubar, #slidemenubar2{
	position:absolute;
	border:2px solid red;
	background-color:#F2F2F2;
	layer-background-color:#F2F2F2;
	font:bold 11px Verdana;
	line-height:18px;
	padding: 3px;
	}
	-->
	</style>


<script language="JavaScript1.2">

// MODIFIED by GmBowen to work with Wikka Wiki, 2005, for a SSHRC research project.

/***********************************************
* Sliding Menu Bar Script- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
***********************************************/

var slidemenu_width = '145px'; //specify width of menu (in pixels)
var slidemenu_reveal = '1px'; //specify amount that menu should protrude initially
var slidemenu_top = '150px';   //specify vertical offset of menu on page

var ns4 = document.layers?1:0;
var ie4 = document.all;
var ns6 = document.getElementById&&!document.all?1:0;

if (ie4||ns6) {
    document.write('<div id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+'" onMouseover="pull()" onMouseout="draw()">');
}
else if (ns4){
    document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
    document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' onMouseover="pull()" onMouseout="draw()" visibility="hide">');
}

var sitems=new Array()

///////////Edit below/////////////////////////////////

//siteitems[x]=["Item Text", "Optional URL associated with text"]

sitems[0]=["<big><font face='Arial' color='red'>User Tools</font></big>", ""]
sitems[1]=["HomePage", "<?php echo $this->GetConfigValue('base_url'); ?>"]
sitems[2]=["Graphing Tool", "<?php echo $this->GetConfigValue('base_url').'GraphTool'; ?>"]
sitems[3]=["Bookmarks", "<?php echo $this->GetConfigValue('base_url').'MyBookmarks'; ?>"]
sitems[4]=["My Image Gallery", "<?php echo $this->GetConfigValue('base_url').'MyGallery'; ?>"]
sitems[5]=["Image Uploader", "<?php echo $this->GetConfigValue('base_url').'ImageUploader'; ?>"]
sitems[6]=["Your Pages", "<?php echo $this->GetConfigValue('base_url').'MyPages'; ?>"]
sitems[7]=["Task Manager", "<?php echo $this->GetConfigValue('base_url').'MyTasks'; ?>"]
sitems[8]=["Your Page Notes", "<?php echo $this->GetConfigValue('base_url').'MyPageNotes'; ?>"]
sitems[9]=["Enter Schedules", "<?php echo $this->GetConfigValue('base_url').'Scheduler'; ?>"]
sitems[10]=["Wiki Draw Tool", "<?php echo $this->GetConfigValue('base_url').'WikiDraw'; ?>"]
sitems[11]=["Create a.....", "<?php echo $this->GetConfigValue('base_url').'CreaTe'; ?>"]

//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""

/////////////////////////////////////////////////////////

if (ie4||ns4||ns6) {
    for (i=0;i<sitems.length;i++) {
        if (sitems[i][1])
            document.write('<a href="'+sitems[i][1]+'" target="'+target+'">');
        document.write(sitems[i][0]);
        if (sitems[i][1])
            document.write('</a>');
        document.write('<br>\n');
    }
}

function regenerate() {
    window.location.reload();
}
function regenerate2() {
    if (ns4) {
        document.slidemenubar.left = ((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1);
        document.slidemenubar.visibility = "show";
        setTimeout("window.onresize=regenerate",400);
    }
}

// LINE below commented out by GMBowen to work in Wikka Wiki in Firefox (with other java menu pgm)
// window.onload = regenerate2();

rightboundary = 0
leftboundary = (parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1

if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}

function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10+"px"
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}

function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10+"px"
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}

</script>


CodeContributions
There are no comments on this page.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki