Slide Out Menu/navigation

**madnhate** · 06-19-2012, 10:59 PM

I've seen many as a kid on this website of those slide out menu/navigation. Would I be able to customize or would I have to write my own to make it look like this: EXAMPLE

Is there a way to make the menu slide in/out on hover of a button or press of the button? How to make it adjust to the screen-size if the menu is full-screen or almost full-screen? I think only one menu here stays slid out after pressed, how would I achieve that? Thanks in advance!

**ApacheTech** · 06-20-2012, 11:10 AM

That site is majorly messed up. It doesn't work at all. There's a 3 second video of some tart swishing her hair and a button at the right hand side that, if pressed, crashed the website. There's no menu or content on the page at all.

Do you have another example of what you want?

I think this may be what you're after:

http://tympanus.net/codrops/2009/11/...uery-tutorial/

**vwphillips** · 06-20-2012, 03:26 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:absolute;left:0px;top:0px;width:100%;height:400px;background-Color:red;
}

#tst1 {
  position:absolute;left:0px;top:410px;width:100%;height:400px;background-Color:green;
}

.tab {
  float:right;
}

/*]]>*/
</style></head>

<body>

 <div id="tst" >
   <img class="tab" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="75" onmouseup="zxcSlideTab.toggle('tst');" />
 </div>
 <div id="tst1"  onmouseout="zxcSlideTab.close('tst1',true);" onmouseover="zxcSlideTab.toggle('tst1',false);" >
   <img class="tab" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="75" />
 </div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcSlideTab={

 init:function(o){
  var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0],show=o.Show,show=typeof(show)=='number'?show:100,src=o.ImageSwap,ms=o.Animate;
  obj.style.left=-obj.offsetWidth+show+'px';
  zxcSlideTab['zxc'+o.ID]={
   obj:obj,
   img:img,
   show:show,
   src:img&&typeof(src)=='string'?[src,img.src]:false,
   ms:typeof(ms)=='number'?ms:1000,
   ud:false
  }
 },

 toggle:function(id,ud){
  var o=this['zxc'+id];
  if (o){
   var f=parseInt(o.obj.style.left),min=-o.obj.offsetWidth+o.show,ud=typeof(ud)=='boolean'?ud:o.ud,t=ud?min:0;
   o.ud=!ud;
   clearTimeout(o.to);
   clearTimeout(o.dly);
   this.animate(o,'left',f,t,new Date(),o.ms*Math.abs((t-f)/min),ud);
  }
 },

 close:function(id){
  var o=this['zxc'+id],oop=this;
  if (o){
   o.dly=setTimeout(function(){ oop.toggle(id,true); },200);
  }
 },

 animate:function(o,mde,f,t,srt,mS,ud){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.obj.style[mde]=now+'px';
  }
  if (ms<mS){
   o.to=setTimeout(function(){ oop.animate(o,mde,f,t,srt,mS,ud); },10);
  }
  else {
   o.obj.style[mde]=t+'px';
   if (o.src){
    o.img.src=o.src[ud?1:0];
   }
  }
 }

}

zxcSlideTab.init({
 ID:'tst',               // the unique ID nameof the Slide DIV.                           (string)
 Show:100,               //(optional) the amount of the Slide DIV to show when retracted. (number, default = 100)
 ImageSwap:'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg', // the swap image file path and name.                            (string, default = no image src swap)
 Animate:1000            //(optional) the slide duration in milli seconds.                (number, default = 1000)
})

zxcSlideTab.init({
 ID:'tst1'
})

window.onresize=function(){
 zxcSlideTab.toggle('tst',true);
 zxcSlideTab.toggle('tst1',true);
}
/*]]>*/
</script>

</body>

</html>

**madnhate** · 06-20-2012, 07:05 PM

Thanks guys.

Apache I have actually seen that design before and really like it and sorry for the crashing I'll make a screenshot of it for you to see.

Thanks Vwphillips how would I make only the button(or in your coding, the image) be visible before hover/pressing of button? Sorry that part of the website is too dark to see. Also is there a way to make the menu stay opened until the button is pressed again to close it, for the second design that you did?(green menu)

Screenshots for better visual idea:

Example menu/navigation before slide-out

Example of menu/navigation when opened

**ApacheTech** · 06-20-2012, 08:00 PM

That menu works on the same principle as this one:

http://www.building58.com/examples/tabSlideOut.html

Once you get your head around the example given, it's easy enough to modify the end result to your needs.

Full instructions are given on that page, which are relatively easy to follow and customise. Play around with the options and the code and if it messes up, grap the .zip file again and start afresh.

**vwphillips** · 06-21-2012, 10:41 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:absolute;left:0px;top:0px;width:100%;height:400px;
}

.div {
  position:absolute;overflow:hidden;left:0px;top:0px;width:500px;height:400px;background-Color:red;text-Align:center;
}

#tst1 {
  position:absolute;left:0px;top:410px;width:100%;height:400px;background-Color:green;
}

.tab {
  position:absolute;right:0px;
}


/*]]>*/
</style></head>

<body>

 <div id="tst" >
   <img class="tab" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="75" onmouseup="zxcSlideTab.toggle('tst');" />
   <div class="div" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" style="width:80%;height:80%;" /></div>
 </div>
 <div id="tst1"  onmouseout="zxcSlideTab.close('tst1',true);" onmouseover="zxcSlideTab.toggle('tst1',false);" >
   <img class="tab" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="75" />
 </div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcSlideTab={

 init:function(o){
  var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0],div=obj.getElementsByTagName('DIV')[0],show=o.Show,show=typeof(show)=='number'?show:100,src=o.ImageSwap,ms=o.Animate;
  obj.style.left=-obj.offsetWidth+show+'px';
  zxcSlideTab['zxc'+o.ID]={
   obj:obj,
   img:img,
   div:o.ResizeDiv===true&&div?div:false,
   show:show,
   src:img&&typeof(src)=='string'?[src,img.src]:false,
   ms:typeof(ms)=='number'?ms:1000,
   ud:false
  }
 },

 toggle:function(id,ud){
  var o=this['zxc'+id];
  if (o){
   var f=parseInt(o.obj.style.left),min=-o.obj.offsetWidth+o.show,ud=typeof(ud)=='boolean'?ud:o.ud,t=ud?min:0;
   if (o.div){
    o.div.style.width=o.obj.offsetWidth-o.show+'px';
   }
   o.ud=!ud;
   clearTimeout(o.to);
   clearTimeout(o.dly);
   this.animate(o,'left',f,t,new Date(),o.ms*Math.abs((t-f)/min),ud);
  }
 },

 close:function(id){
  var o=this['zxc'+id],oop=this;
  if (o){
   o.dly=setTimeout(function(){ oop.toggle(id,true); },200);
  }
 },

 animate:function(o,mde,f,t,srt,mS,ud){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.obj.style[mde]=now+'px';
  }
  if (ms<mS){
   o.to=setTimeout(function(){ oop.animate(o,mde,f,t,srt,mS,ud); },10);
  }
  else {
   o.obj.style[mde]=t+'px';
   if (o.src){
    o.img.src=o.src[ud?1:0];
   }
  }
 }

}

zxcSlideTab.init({
 ID:'tst',               // the unique ID nameof the Slide DIV.                           (string)
 Show:100,               //(optional) the amount of the Slide DIV to show when retracted. (number, default = 100)
 ImageSwap:'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg', // the swap image file path and name.                            (string, default = no image src swap)
 ResizeDiv:true,         //(optional) true = resize the first Slide DIV div to the Side DIV width. (boolean, default = no resize)
 Animate:1000            //(optional) the slide duration in milli seconds.                (number, default = 1000)
})

zxcSlideTab.init({
 ID:'tst1'
})

window.onresize=function(){
 zxcSlideTab.toggle('tst',true);
 zxcSlideTab.toggle('tst1',true);
}
/*]]>*/
</script>

</body>

</html>

**madnhate** · 07-13-2012, 12:31 AM

Thanks guys,

vwphillips so the menu that hovers out can not stay opened until the button(or image in this case) is pressed only will stay open when hovered? Or is there a way to make it stay opened even after you stopped hovering over the menu button?

Also for top menu (the red menu) is there a way to make the image change (button change) right after you press it instead of when the menu is fully opened to full width?

Thanks

**vwphillips** · 07-13-2012, 11:06 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:absolute;left:0px;top:0px;width:100%;height:400px;
}

.div {
  position:absolute;overflow:hidden;left:0px;top:0px;width:500px;height:400px;background-Color:red;text-Align:center;
}

#tst1 {
  position:absolute;left:0px;top:410px;width:100%;height:400px;background-Color:green;
}

.tab {
  position:absolute;right:0px;
}


/*]]>*/
</style></head>

<body>

 <div id="tst" >
   <img class="tab" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="75" onmouseup="zxcSlideTab.toggle('tst');" />
   <div class="div" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" style="width:80%;height:80%;" /></div>
 </div>
 <div id="tst1" >
<input type="button" name="" value="Close"  onmouseup="zxcSlideTab.close('tst1',true);"  />
   <img class="tab" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="75"  onmouseover="zxcSlideTab.toggle('tst1',false);"/>
 </div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcSlideTab={

 init:function(o){
  var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0],div=obj.getElementsByTagName('DIV')[0],show=o.Show,show=typeof(show)=='number'?show:100,src=o.ImageSwap,ms=o.Animate;
  obj.style.left=-obj.offsetWidth+show+'px';
  zxcSlideTab['zxc'+o.ID]={
   obj:obj,
   img:img,
   div:o.ResizeDiv===true&&div?div:false,
   show:show,
   src:img&&typeof(src)=='string'?[src,img.src]:false,
   ms:typeof(ms)=='number'?ms:1000,
   ud:false
  }
 },

 toggle:function(id,ud){
  var o=this['zxc'+id];
  if (o){
   var f=parseInt(o.obj.style.left),min=-o.obj.offsetWidth+o.show,ud=typeof(ud)=='boolean'?ud:o.ud,t=ud?min:0;
   if (o.div){
    o.div.style.width=o.obj.offsetWidth-o.show+'px';
   }
   o.ud=!ud;
   clearTimeout(o.to);
   clearTimeout(o.dly);
   if (o.src){
    o.img.src=o.src[ud?1:0];
   }
   this.animate(o,'left',f,t,new Date(),o.ms*Math.abs((t-f)/min),ud);
  }
 },

 close:function(id){
  var o=this['zxc'+id],oop=this;
  if (o){
   o.dly=setTimeout(function(){ oop.toggle(id,true); },200);
  }
 },

 animate:function(o,mde,f,t,srt,mS,ud){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.obj.style[mde]=now+'px';
  }
  if (ms<mS){
   o.to=setTimeout(function(){ oop.animate(o,mde,f,t,srt,mS,ud); },10);
  }
  else {
   o.obj.style[mde]=t+'px';
  }
 }

}

zxcSlideTab.init({
 ID:'tst',               // the unique ID nameof the Slide DIV.                           (string)
 Show:100,               //(optional) the amount of the Slide DIV to show when retracted. (number, default = 100)
 ImageSwap:'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg', // the swap image file path and name.                            (string, default = no image src swap)
 ResizeDiv:true,         //(optional) true = resize the first Slide DIV div to the Side DIV width. (boolean, default = no resize)
 Animate:1000            //(optional) the slide duration in milli seconds.                (number, default = 1000)
})

zxcSlideTab.init({
 ID:'tst1'
})

window.onresize=function(){
 zxcSlideTab.toggle('tst',true);
 zxcSlideTab.toggle('tst1',true);
}
/*]]>*/
</script>

</body>

</html>

**madnhate** · 12-07-2013, 05:05 AM

Thanks vwphillips,

Is there a way to make the menu/navigation slide out on page load but also keep the same features?

**vwphillips** · 12-07-2013, 11:03 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:absolute;left:0px;top:0px;width:100%;height:400px;
}

.div {
  position:absolute;overflow:hidden;left:0px;top:0px;width:500px;height:400px;background-Color:red;text-Align:center;
}

#tst1 {
  position:absolute;left:0px;top:410px;width:100%;height:400px;background-Color:green;
}

.tab {
  position:absolute;right:0px;
}


/*]]>*/
</style></head>

<body>

 <div id="tst" >
   <img class="tab" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="75" onmouseup="zxcSlideTab.toggle('tst');" />
   <div class="div" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" style="width:80%;height:80%;" /></div>
 </div>
 <div id="tst1" >
<input type="button" name="" value="Close"  onmouseup="zxcSlideTab.close('tst1',true);"  />
   <img class="tab" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" width="100" height="75"  onmouseover="zxcSlideTab.toggle('tst1',false);"/>
 </div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcSlideTab={

 init:function(o){
  var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0],div=obj.getElementsByTagName('DIV')[0],show=o.Show,show=typeof(show)=='number'?show:100,src=o.ImageSwap,ms=o.Animate,srt=o.AutoOpen;
  if (obj){
   obj.style.left=-obj.offsetWidth+show+'px';
   zxcSlideTab['zxc'+o.ID]={
    obj:obj,
    img:img,
    div:o.ResizeDiv===true&&div?div:false,
    show:show,
    src:img&&typeof(src)=='string'?[src,img.src]:false,
    ms:typeof(ms)=='number'?ms:1000,
    ud:false
   }
   typeof(srt)=='number'&&srt>0?o.to=setTimeout(function(){ oop.toggle(o.ID,false); },srt):null;
  }
 },

 toggle:function(id,ud){
  var o=this['zxc'+id];
  if (o){
   var f=parseInt(o.obj.style.left),min=-o.obj.offsetWidth+o.show,ud=typeof(ud)=='boolean'?ud:o.ud,t=ud?min:0;
   if (o.div){
    o.div.style.width=o.obj.offsetWidth-o.show+'px';
   }
   o.ud=!ud;
   clearTimeout(o.to);
   clearTimeout(o.dly);
   if (o.src){
    o.img.src=o.src[ud?1:0];
   }
   this.animate(o,'left',f,t,new Date(),o.ms*Math.abs((t-f)/min),ud);
  }
 },

 close:function(id){
  var o=this['zxc'+id],oop=this;
  if (o){
   o.dly=setTimeout(function(){ oop.toggle(id,true); },200);
  }
 },

 animate:function(o,mde,f,t,srt,mS,ud){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.obj.style[mde]=now+'px';
  }
  if (ms<mS){
   o.to=setTimeout(function(){ oop.animate(o,mde,f,t,srt,mS,ud); },10);
  }
  else {
   o.obj.style[mde]=t+'px';
  }
 }

}

zxcSlideTab.init({
 ID:'tst',               // the unique ID nameof the Slide DIV.                                    (string)
 Show:100,               //(optional) the amount of the Slide DIV to show when retracted.          (number, default = 100)
 ImageSwap:'http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg', // the swap image file path and name.                            (string, default = no image src swap)
 ResizeDiv:true,         //(optional) true = resize the first Slide DIV div to the Side DIV width. (boolean, default = no resize)
 Animate:1000,           //(optional) the slide duration in milli seconds.                         (number, default = 1000)
 AutoOpen:1000           //(optional) open the panel after n milli seconds on page load.           (number, default = no auto open)
})

zxcSlideTab.init({
 ID:'tst1'
})

window.onresize=function(){
 zxcSlideTab.toggle('tst',true);
 zxcSlideTab.toggle('tst1',true);
}
/*]]>*/
</script>

</body>

</html>

Thread: Slide Out Menu/navigation

Thread Tools

Search Thread

Slide Out Menu/navigation

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions