Results 1 to 4 of 4

Thread: Add smoothness to javascript menu

  1. #1
    Join Date
    Apr 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Add smoothness to javascript menu

    1) Script Title:
    Switch Menu

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...switchmenu.htm

    3) Describe problem:
    I'm wondering how to/what code to add to make it drop down smoothly, aka slide down instead of just appear and dissapear. I imagine it's not that difficult to do but I'm not a great whiz at javascript so any help would be appreciated, thanks!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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">
    .menutitle{
    cursor:pointer;
    margin-bottom: 5px;
    background-color:#ECECFF;
    color:#000000;
    width:140px;
    padding:2px;
    text-align:center;
    font-weight:bold;
    /*/*/border:1px solid #000000;/* */
    }
    
    .submenu{
    margin-bottom: 0.5em;
    }
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Switch Menu script- by Martial B of http://getElementById.com/
    * Modified by Dynamic Drive for format & NS4/IE4 compatibility
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
    var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
    var duration=1000;
    
    if (document.getElementById){ //DynamicDrive.com change
    document.write('<style type="text/css">\n')
    document.write('.submenu{display:none;overflow:hidden}\n')
    document.write('</style>\n')
    }
    
    function SwitchMenu(nu){
     var ary = SwitchMenu.ary[nu-1],lst;
     if (SwitchMenu.lst&&SwitchMenu.lst!=ary){
      lst=SwitchMenu.lst;
      clearTimeout(lst[4]);
      animate(lst,lst[2],0,new Date(),duration*Math.abs((lst[2])/lst[1]));
     }
     if(ary){      //[object],76,0,1,
      ary[0].style.display='block';
      clearTimeout(ary[4]);
      animate(ary,ary[2],ary[1],new Date(),duration*Math.abs((ary[2]-ary[1])/ary[1]));
      SwitchMenu.lst=ary;
      savemenustate(ary[3]);
     }
    }
    
    function animate(ary,f,t,srt,mS){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      ary[2]=Math.max(now,f<0||t<0?now:0);
      ary[0].style.height=ary[2]+'px';
     }
     if (ms<mS){
      ary[4]=setTimeout(function(){ oop.animate(ary,f,t,srt,mS); },10);
     }
     else {
      ary[2]=t;
      ary[0].style.height=t+'px';
      if (t==0){
       ary[0].style.display='none';
      }
     }
    }
    
    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 onloadfunction(){
     var inc=1,obj;
     SwitchMenu.ary=[];
     while (document.getElementById("sub"+inc)){
      obj=document.getElementById("sub"+inc);
      obj.style.display='block';
      SwitchMenu.ary.push([obj,obj.scrollHeight,0,inc-1]);
      obj.style.display='none';
      inc++
     }
     if (persistmenu=="yes"){
      var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
      var ary=SwitchMenu.ary[get_cookie(cookiename)];
      if (ary){
       ary[2]=ary[1];
       ary[0].style.display='block';
       SwitchMenu.lst=ary;
      }
     }
    }
    
    function savemenustate(nu){
     if (persistmenu=="yes"){
      var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
      var cookievalue=(persisttype=="sitewide")? nu+";path=/" : nu
      document.cookie=cookiename+"="+cookievalue
     }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", onloadfunction, false)
    else if (window.attachEvent)
    window.attachEvent("onload", onloadfunction)
    else if (document.getElementById)
    window.onload=onloadfunction
    
    
    </script>
    
    </head>
    
    <body>
    <!-- Keep all menus within masterdiv-->
    <div id="masterdiv">
    
    	<div class="menutitle" onclick="SwitchMenu(1)">Site Menu</div>
    	<div class="submenu" id="sub1">
    		- <a href="new.htm">What's New</a><br>
    		- <a href="hot.htm">What's hot</a><br>
    		- <a href="revised.htm">Revised Scripts</a><br>
    		- <a href="morezone/">More Zone</a>
    	</div>
    
    	<div class="menutitle" onclick="SwitchMenu(2)">FAQ/Help</div>
    	<div class="submenu" id="sub2">
    		- <a href="notice.htm">Usage Terms</a><br>
    		- <a href="faqs.htm">DHTML FAQs</a><br>
    		- <a href="help.htm">Scripts FAQs</a>
    	</div>
    
    	<div class="menutitle" onclick="SwitchMenu(3)">Help Forum</div>
    	<div class="submenu" id="sub3">
    		- <a href="http://www.codingforums.com">Coding Forums</a><br>
    	</div>
    
    	<div class="menutitle" onclick="SwitchMenu(4)">Cool Links</div>
    	<div class="submenu" id="sub4">
    		- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
    		- <a href="http://www.freewarejava.com">Freewarejava</a><br>
    		- <a href="http://www.cooltext.com">Cool Text</a><br>
    		- <a href="http://www.google.com">Google.com</a>
    	</div>
    
    	<img src="about.gif" onclick="SwitchMenu(5)"><br>
    	<div class="submenu" id="sub5">
    		- <a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
    		- <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
    		- <a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
    	</div>
    
    </div>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    crazymao (04-09-2012)

  4. #3
    Join Date
    Apr 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks alot, is there any way for it to close back the same way?

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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">
    .menutitle{
    cursor:pointer;
    margin-bottom: 5px;
    background-color:#ECECFF;
    color:#000000;
    width:140px;
    padding:2px;
    text-align:center;
    font-weight:bold;
    /*/*/border:1px solid #000000;/* */
    }
    
    .submenu{
    margin-bottom: 0.5em;
    }
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Switch Menu script- by Martial B of http://getElementById.com/
    * Modified by Dynamic Drive for format & NS4/IE4 compatibility
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
    var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
    var duration=1000;
    var toggle=true;
    
    if (document.getElementById){ //DynamicDrive.com change
    document.write('<style type="text/css">\n')
    document.write('.submenu{display:none;overflow:hidden}\n')
    document.write('</style>\n')
    }
    
    function SwitchMenu(nu){
     var ary = SwitchMenu.ary[nu-1],lst,to;
     if (SwitchMenu.lst&&SwitchMenu.lst!=ary){
      lst=SwitchMenu.lst;
      clearTimeout(lst[5]);
      animate(lst,lst[2],0,new Date(),duration*Math.abs((lst[2])/lst[1]));
      lst[4]=false;
     }
     if(ary){
      ary[0].style.display='block';
      clearTimeout(ary[5]);
      to=toggle!==true||ary[4]?ary[1]:0;
      animate(ary,ary[2],to,new Date(),duration*Math.abs((ary[2]-to)/ary[1]));
      savemenustate(-1);
      if (to!=0){
       savemenustate(ary[3]);
      }
      ary[4]=!ary[4];
      SwitchMenu.lst=ary;
     }
    }
    
    function animate(ary,f,t,srt,mS){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      ary[2]=Math.max(now,f<0||t<0?now:0);
      ary[0].style.height=ary[2]+'px';
     }
     if (ms<mS){
      ary[5]=setTimeout(function(){ oop.animate(ary,f,t,srt,mS); },10);
     }
     else {
      ary[2]=t;
      ary[0].style.height=t+'px';
      if (t==0){
       ary[0].style.display='none';
      }
     }
    }
    
    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 onloadfunction(){
     var inc=1,obj;
     SwitchMenu.ary=[];
     while (document.getElementById("sub"+inc)){
      obj=document.getElementById("sub"+inc);
      obj.style.display='block';
      SwitchMenu.ary.push([obj,obj.scrollHeight,0,inc-1,true]);
      obj.style.display='none';
      inc++
     }
     if (persistmenu=="yes"){
      var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
      var ary=SwitchMenu.ary[get_cookie(cookiename)];
      if (ary){
       ary[2]=ary[1];
       ary[4]=false;
       ary[0].style.display='block';
       SwitchMenu.lst=ary;
      }
     }
    }
    
    function savemenustate(nu){
     if (persistmenu=="yes"){
      var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
      var cookievalue=(persisttype=="sitewide")? nu+";path=/" : nu
      document.cookie=cookiename+"="+cookievalue
     }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", onloadfunction, false)
    else if (window.attachEvent)
    window.attachEvent("onload", onloadfunction)
    else if (document.getElementById)
    window.onload=onloadfunction
    
    
    </script>
    
    </head>
    
    <body>
    <!-- Keep all menus within masterdiv-->
    <div id="masterdiv">
    
    	<div class="menutitle" onclick="SwitchMenu(1)">Site Menu</div>
    	<div class="submenu" id="sub1">
    		- <a href="new.htm">What's New</a><br>
    		- <a href="hot.htm">What's hot</a><br>
    		- <a href="revised.htm">Revised Scripts</a><br>
    		- <a href="morezone/">More Zone</a>
    	</div>
    
    	<div class="menutitle" onclick="SwitchMenu(2)">FAQ/Help</div>
    	<div class="submenu" id="sub2">
    		- <a href="notice.htm">Usage Terms</a><br>
    		- <a href="faqs.htm">DHTML FAQs</a><br>
    		- <a href="help.htm">Scripts FAQs</a>
    	</div>
    
    	<div class="menutitle" onclick="SwitchMenu(3)">Help Forum</div>
    	<div class="submenu" id="sub3">
    		- <a href="http://www.codingforums.com">Coding Forums</a><br>
    	</div>
    
    	<div class="menutitle" onclick="SwitchMenu(4)">Cool Links</div>
    	<div class="submenu" id="sub4">
    		- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
    		- <a href="http://www.freewarejava.com">Freewarejava</a><br>
    		- <a href="http://www.cooltext.com">Cool Text</a><br>
    		- <a href="http://www.google.com">Google.com</a>
    	</div>
    
    	<img src="about.gif" onclick="SwitchMenu(5)"><br>
    	<div class="submenu" id="sub5">
    		- <a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
    		- <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
    		- <a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
    	</div>
    
    </div>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •