PDA

View Full Version : Need help with Slide-In Menu Bar



emanuelle
05-05-2006, 06:39 PM
http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm

I do not want this menu to opens or close with a mouseover effect but by clicking a little button "hide menu" and then becomes "show menu".
The menu has to be open by default.
Does anyone know where I can find a script like that?

jscheuer1
05-05-2006, 09:47 PM
Configuration may be hard if you want changes to the dimensions of some of the items, ask if you need help:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
border:1.5px solid black;
background-color:palegreen;
layer-background-color:palegreen;
font:bold 12px Verdana;
line-height:20px;
}
#menu {
background-color:#F2F2F2;
width:171px;
padding:0 5px;
}
-->
</style>
</head>
<body>
<script language="JavaScript1.2">

/***********************************************
* 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='200px' //specify width of menu (in pixels)
var slidemenu_reveal='20px' //specify amount that menu should protrude initially
var slidemenu_top='170px' //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){
var topA=document.body.filters?1 :2;
document.write('<div id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+';">')
document.write('<div id="control" title="Click to Open" style="font-family:cursive;cursor:pointer;text-align:center;position:absolute;right:-5px;top:-'+topA+'px;width:23px;border-left:1px solid black;" onclick="pull(this);"><div></div><div style="line-height:85%;position:relative;top:'+(5-topA*topA)+'px;">O&nbsp;<br>P&nbsp;<br>E&nbsp;<br>N&nbsp;</div></div><div id="menu">')
}
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'>Site Menu</font></big>", ""]
sitems[1]=["Menus And Navigation", "http://www.dynamicdrive.com/dynamicindex1/"]
sitems[2]=["Document Effects", "http://www.dynamicdrive.com/dynamicindex3/"]
sitems[3]=["Scrollers", "http://www.dynamicdrive.com/dynamicindex2/"]
sitems[4]=["Image Effects", "http://www.dynamicdrive.com/dynamicindex4/"]
sitems[5]=["Links And Buttons", "http://www.dynamicdrive.com/dynamicindex5/"]
sitems[6]=["Dynamic Clocks & Dates", "http://www.dynamicdrive.com/dynamicindex6/"]
sitems[7]=["Text Animations", "http://www.dynamicdrive.com/dynamicindex10/"]
sitems[8]=["Browser Window", "http://www.dynamicdrive.com/dynamicindex8/"]
sitems[9]=["User System Information", "http://www.dynamicdrive.com/dynamicindex9/"]
sitems[10]=["Other", "http://www.dynamicdrive.com/dynamicindex11/"]

//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)
}
}
window.onload=regenerate2

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

if (ie4||ns6){
document.write('</div></div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
document.getElementById('control').style.height=document.getElementById("slidemenubar2").offsetHeight+'px'
document.getElementById('control').firstChild.style.height=document.getElementById("slidemenubar2").offsetHeight/2-document.getElementById('control').firstChild.nextSibling.offsetHeight/2+'px'
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}

function pull(obj){
obj.firstChild.nextSibling.innerHTML='C&nbsp;<br>L&nbsp;<br>O&nbsp;<br>S&nbsp;<br>E&nbsp;'
obj.firstChild.nextSibling.style.top=(2-topA*topA)+'px'
obj.title="Click to Close"
obj.onclick=new Function('draw(this)')
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(obj){
obj.firstChild.nextSibling.innerHTML='O&nbsp;<br>P&nbsp;<br>E&nbsp;<br>N&nbsp;'
obj.firstChild.nextSibling.style.top=(5-topA*topA)+'px'
obj.title="Click to Open"
obj.onclick=new Function('pull(this)')
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>
</body>
</html>

emanuelle
05-07-2006, 10:12 AM
thank you....

emanuelle
05-07-2006, 10:33 AM
In fact every row in the menu has a checkbox and a title and by clicking on the checkbox it display what was hidden.Is it possible to adapt it in the script?
I am attaching a picture

jscheuer1
05-07-2006, 06:00 PM
A picture is usually worth 1,000 words but, in this case I suspect that the exact amount may vary. In any case, the words (the code) would be of much greater value to me than the picture. We probably can initialize the height of the control bar each time the menu height changes. This may not be required though, and if it is, the best method for your setup would most easily be determined by examining your code, rather than any picture:

Please post a link to the page on your site that contains the problematic script so we can check it out.

emanuelle
05-07-2006, 06:25 PM
Hi John,

the thing is that I havent build it yet cause I am trying to figure out how. First I have found the DHTML menu that fit my needs but now I need to know if we can implement in the code what u see in the picture.
This means having a form in the DHTML menu that diplay information when the checkbox is clicked.
This needs to be for IE and Firefox.
So first of all I need to know if it is possible to do it and if yes then I need to get some help to apply it.

Thank you

jscheuer1
05-07-2006, 07:51 PM
Well, I can't say 100% that it is possible but, 99% yes. Knock off about another 5% from that since it looks like it is just me trying to do this and, I could miss some things.

At the same time, I prefer not to work too much in the dark. Do you even have the internal part of the menu, the part with the expanding checkbox sections and the little stub for controlling the slide of the menu. If you have that much, then it would just be a matter of animating its sliding action while not messing with the checkbox activities and not letting the changes in height that those checkbox activities would entail mess up the overall appearance of the sliding container. I'd be up for that but, if what you really want is for this entire thing to be coded from scratch for you from just an idea represented by your picture and description, hire a web designer.

emanuelle
05-07-2006, 08:12 PM
would you be my webdesigner?

jscheuer1
05-08-2006, 04:43 AM
would you be my webdesigner?

Thank you for asking but, no. I am a bit too tied up right now to take on any more paying clients. Perhaps by late June I might be able to add in another account or two.