Results 1 to 10 of 10

Thread: OmniSlide Menu - Fit to screen.

  1. #1
    Join Date
    Jan 2010
    Location
    Tulsa, OK
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default OmniSlide Menu - Fit to screen.

    1) Script Title: OmniSlide Menu

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

    3) Describe problem: How do I get OmniSlide Menu to fit to screen? I.E. - How do I add a scroll bar to the menu? Something whereby the part of OmniSlide that says "Menu" doesn't drop down below the edge of the screen but with a scroll bar in between "Menu" and the first entry in the Menu. Here's what I've got http://hstrial-tedocitycom.homestead...CityTulsa.html Please help. Thanks. Ted.

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    297
    Thanks
    5
    Thanked 18 Times in 18 Posts

    Default

    Your website is being displayed incorrectly
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,774
    Thanks
    2
    Thanked 410 Times in 405 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">
    /*<![CDATA[*/
    
    #menu2 {
      position:fixed;left:200px;top:0px;width:700px;height:20px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menu2 .content {
      position:absolute;visibility:hidden;left:0px;top:20px;width:700px;height:400px;background-Color:#FFFFCC;text-Align:left;overflow-Y:scroll;
    }
    
    #menu2 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menu2 a:active	{color:blue;text-decoration:none;}
    #menu2 a:visited {color:blue;text-decoration:none;}
    #menu2 a:hover {color:navy;background-color:#f0fea8}
    
    
    /*]]>*/
    </style></head>
    
    <body>
     <div id="menu2" onmouseover="zxcSlidePanel.Show('menu2',true);"  onmouseout="zxcSlidePanel.Show('menu2',false);">
     Menu
     <div class="content">
    <TABLE>
    <TBODY>
    <TR><TD class=heading colSpan=3>MyKeytotheCityTulsa.us</TD></TR>
    <TR><TD colSpan=3><A href="http://hstrial-tedocitycom.homestead.com/MyKeyToTheCityTulsa.html#Anchor_454" target="">EMPLOYMENT - Anchor Link Test</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Emergency, Non-Emergency, &amp; Local Information Numbers</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play KRMG Radio</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play White House Press Briefings</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tulsa Demographics</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Getting Married in Tulsa/Anniversaries</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Spirituality/Witnessing/Churches/Synagogues/The Father/The Trinity/The Holy Bible</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Civics/Voting/Government</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Utilities/Internet/WiFi/Telephone/Electric/Natural Gas/TV/Communications</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Business/Finance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Employment/Career</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Insurance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Education/eBooks</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Health Care</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Groceries/Nutrition</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Recipes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Restaurants &amp; Food Delivery</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Exercise</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Shopping</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Clothing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Furniture</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tools</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Automotive/Vehicles</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Transportation/Air, Land, Sea, &amp; Space Travel/Atli/Maps</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Hotel/Motel/Lodging/Resorts/Real Estate/Moving</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">MultiMedia/Movies/Music/News/TV/Radio/Weather/Audio/Video/Newspapers/Magazines/eBooks/Concerts</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">TV Guide</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Grooveshark Music</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theater</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theatre (Stage)  That's Entertainment!</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Bars/Clubs/Taverns/Saloons/Watering Holes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sweepstakes/Contests/Lotto</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sports</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Pets/Animal Husbandry/Kennels/Veterinarians</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Games/Puzzles/Toys</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Computing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target=""></A></TD></TR>
    </TBODY>
    </TABLE>
    
     </div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSlidePanel={
    
     Show:function(id,ud){
      var o=this['zxc'+id],t;
      if (o){
       t=ud?o.a[2]:0;
       o.c.style.visibility='visible';
       this.animate(o,o.a,o.a[3],t,new Date(),o.ms*Math.abs((t-o.a[3])/o.a[2])+5);
      }
     },
    
     init:function(o){
      var id=o.ID,ms=o.Animate,m=document.getElementById(id),c=m?m.getElementsByTagName('DIV')[0]:null;
      if (c){
       o.a=[c,'height',c.offsetHeight,0];
       c.style.height='0px';
       c.style.visibility='hidden';
       o.c=c;
       o.ms=typeof(ms)=='number'&&ms<20?ms:1000;
       o.id=id;
       this['zxc'+id]=o;
      }
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(f<0||t<0?n:0,n);
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
       t==0?a[0].style.visibility='hidden':null;
      }
     }
    
    }
    
    zxcSlidePanel.init({
     ID:'menu2',
     Animate:2000
    
    });
    /*]]>*/
    </script>
    
    </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/

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,774
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    updated for 4 modes

    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[*/
    
    .menuDClass {
      position:fixed;left:200px;top:0px;width:700px;height:20px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menuD  {
      position:absolute;visibility:hidden;left:0px;top:20px;width:700px;height:400px;background-Color:#FFFFCC;text-Align:left;overflow-Y:scroll;
    }
    
    #menuD a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menuD a:active	{color:blue;text-decoration:none;}
    #menuD a:visited {color:blue;text-decoration:none;}
    #menuD a:hover {color:navy;background-color:#f0fea8}
    
    
    .menuUClass {
      position:fixed;left:200px;bottom:0px;width:700px;height:20px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menuU {
      position:absolute;visibility:hidden;left:0px;top:20px;width:700px;height:400px;background-Color:#FFFFCC;text-Align:left;
    }
    
    
    .menuRClass {
      position:fixed;left:0px;top:200px;width:25px;height:200px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menuR {
      position:absolute;visibility:hidden;left:0px;top:0px;width:400px;height:200px;background-Color:#FFFFCC;text-Align:center;
    }
    
    .menuLClass {
      position:fixed;right:0px;top:200px;width:25px;height:200px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menuL {
      position:absolute;visibility:hidden;left:0px;top:0px;width:400px;height:200px;background-Color:#FFFFCC;text-Align:center;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
     <div class="menuDClass" onmouseover="zxcSlidePanel.Show('menuD',true);"  onmouseout="zxcSlidePanel.Show('menuD',false);">
     Menu
     <div id="menuD" >
    <TABLE>
    <TBODY>
    <TR><TD class=heading colSpan=3>MyKeytotheCityTulsa.us</TD></TR>
    <TR><TD colSpan=3><A href="http://hstrial-tedocitycom.homestead.com/MyKeyToTheCityTulsa.html#Anchor_454" target="">EMPLOYMENT - Anchor Link Test</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Emergency, Non-Emergency, &amp; Local Information Numbers</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play KRMG Radio</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play White House Press Briefings</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tulsa Demographics</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Getting Married in Tulsa/Anniversaries</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Spirituality/Witnessing/Churches/Synagogues/The Father/The Trinity/The Holy Bible</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Civics/Voting/Government</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Utilities/Internet/WiFi/Telephone/Electric/Natural Gas/TV/Communications</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Business/Finance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Employment/Career</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Insurance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Education/eBooks</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Health Care</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Groceries/Nutrition</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Recipes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Restaurants &amp; Food Delivery</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Exercise</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Shopping</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Clothing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Furniture</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tools</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Automotive/Vehicles</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Transportation/Air, Land, Sea, &amp; Space Travel/Atli/Maps</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Hotel/Motel/Lodging/Resorts/Real Estate/Moving</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">MultiMedia/Movies/Music/News/TV/Radio/Weather/Audio/Video/Newspapers/Magazines/eBooks/Concerts</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">TV Guide</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Grooveshark Music</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theater</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theatre (Stage)  That's Entertainment!</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Bars/Clubs/Taverns/Saloons/Watering Holes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sweepstakes/Contests/Lotto</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sports</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Pets/Animal Husbandry/Kennels/Veterinarians</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Games/Puzzles/Toys</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Computing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target=""></A></TD></TR>
    </TBODY>
    </TABLE>
    
     </div>
     </div>
    
     <div class="menuUClass" onmouseover="zxcSlidePanel.Show('menuU',true);"  onmouseout="zxcSlidePanel.Show('menuU',false);">
      Menu
      <div id="menuU" >
      </div>
     </div>
    
    
    
     <div class="menuRClass" onmouseover="zxcSlidePanel.Show('menuR',true);"  onmouseout="zxcSlidePanel.Show('menuR',false);">
      <div id="menuR" >
      </div>
      <div style="width:0px;" >M e n u</div>
     </div>
    
     <div class="menuLClass" onmouseover="zxcSlidePanel.Show('menuL',true);"  onmouseout="zxcSlidePanel.Show('menuL',false);">
      <div id="menuL" >
      </div>
      <div style="width:0px;" >M e n u</div>
     </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slide Panel (10-July-2014)
    // by: Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcSlidePanel={
    
     Show:function(id,ud){
      var o=this['zxc'+id],t,ms;
      if (o){
       t=ud?o.h[2]:0;
       ms=o.ms*Math.abs((t-o.h[3])/o.h[2])+5;
       o.c.style.visibility='visible';
       this.animate(o,o.h,o.h[3],t,new Date(),ms);
       o.t?this.animate(o,o.t,o.t[3],ud?o.t[2]:0,new Date(),ms):null;
      }
     },
    
     init:function(o){
      var id=o.ContentID,m=o.Mode,ms=o.Animate,c=document.getElementById(id),p=c?c.parentNode:null,m=typeof(m)=='string'?m.charAt(0).toUpperCase():'D',m=m==='U'||m=='R'||m=='L'?m:'D',m=m=='R'||m=='L'?[m,'width','offsetWidth','left']:[m,'height','offsetHeight','top'];
      if (c){
       o.h=[c,m[1],c[m[2]],0];
       m[0]=='U'||m[0]=='L'?o.t=[c,m[3],-c[m[2]],0]:null;
       c.style[m[1]]='0px';
       c.style[m[3]]=(m[0]=='D'||m[0]=='R'?p[m[2]]:0)+'px';
       c.style.visibility='hidden';
       o.c=c;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.id=id;
       this['zxc'+id]=o;
      }
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(f<0||t<0?n:0,n);
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
       t==0?a[0].style.visibility='hidden':null;
      }
     }
    
    }
    
    zxcSlidePanel.init({
     ContentID:'menuD',  // the unique ID name of the content DIV.                            (string)
     Mode:'Down',        //(optional) the mode of execution, 'Down', 'Up', 'Right' or 'Left'. (string, default = 'Down')
     Animate:2000        //(optional) the animation speed in milliseconds.                    (number, default = 2000)
    });
    
    zxcSlidePanel.init({
     ContentID:'menuU',
     Mode:'Up'
    });
    
    zxcSlidePanel.init({
     ContentID:'menuR',
     Mode:'Right'
    });
    
    zxcSlidePanel.init({
     ContentID:'menuL',
     Mode:'Left',
     Animate:4000
    });
    
    /*]]>*/
    </script>
    
    </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/

  5. #5
    Join Date
    Mar 2007
    Posts
    35
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    only the top menu is working in your updated for 4 modes - tried in chrome & firefox

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,774
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    just tested with IE and FF and works for me
    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/

  7. #7
    Join Date
    Jan 2010
    Location
    Tulsa, OK
    Posts
    40
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    How do I use the code provided by vwphillips? My editor isn't giving me an option to save the file as menuitems.js - it wants to save as .htm

  8. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,774
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    the code I posted is a htm file there is no need for a menuitems.js
    the menu item are defined in the HTML code

    the etyle sheet needs ro go in the page header

    Code:
    <style type="text/css">
    /*<![CDATA[*/
    
    .menuDClass {
      position:fixed;left:200px;top:0px;width:700px;height:20px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menuD  {
      position:absolute;visibility:hidden;left:0px;top:20px;width:700px;height:400px;background-Color:#FFFFCC;text-Align:left;overflow-Y:scroll;
    }
    
    #menuD a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menuD a:active	{color:blue;text-decoration:none;}
    #menuD a:visited {color:blue;text-decoration:none;}
    #menuD a:hover {color:navy;background-color:#f0fea8}
    
    
    
    /*]]>*/
    </style>
    the menu DIV repaces your menu DIV

    Code:
    <div class="menuDClass" onmouseover="zxcSlidePanel.Show('menuD',true);"  onmouseout="zxcSlidePanel.Show('menuD',false);">
     Menu
     <div id="menuD" >
    <TABLE>
    <TBODY>
    <TR><TD class=heading colSpan=3>MyKeytotheCityTulsa.us</TD></TR>
    <TR><TD colSpan=3><A href="http://hstrial-tedocitycom.homestead.com/MyKeyToTheCityTulsa.html#Anchor_454" target="">EMPLOYMENT - Anchor Link Test</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Emergency, Non-Emergency, &amp; Local Information Numbers</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play KRMG Radio</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play White House Press Briefings</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tulsa Demographics</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Getting Married in Tulsa/Anniversaries</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Spirituality/Witnessing/Churches/Synagogues/The Father/The Trinity/The Holy Bible</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Civics/Voting/Government</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Utilities/Internet/WiFi/Telephone/Electric/Natural Gas/TV/Communications</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Business/Finance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Employment/Career</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Insurance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Education/eBooks</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Health Care</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Groceries/Nutrition</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Recipes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Restaurants &amp; Food Delivery</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Exercise</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Shopping</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Clothing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Furniture</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tools</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Automotive/Vehicles</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Transportation/Air, Land, Sea, &amp; Space Travel/Atli/Maps</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Hotel/Motel/Lodging/Resorts/Real Estate/Moving</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">MultiMedia/Movies/Music/News/TV/Radio/Weather/Audio/Video/Newspapers/Magazines/eBooks/Concerts</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">TV Guide</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Grooveshark Music</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theater</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theatre (Stage)  That's Entertainment!</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Bars/Clubs/Taverns/Saloons/Watering Holes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sweepstakes/Contests/Lotto</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sports</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Pets/Animal Husbandry/Kennels/Veterinarians</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Games/Puzzles/Toys</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Computing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target=""></A></TD></TR>
    </TBODY>
    </TABLE>
    
     </div>
     </div>
    and the javascript is placed just before the </BODY> tag

    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slide Panel (10-July-2014)
    // by: Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcSlidePanel={
    
     Show:function(id,ud){
      var o=this['zxc'+id],t,ms;
      if (o){
       t=ud?o.h[2]:0;
       ms=o.ms*Math.abs((t-o.h[3])/o.h[2])+5;
       o.c.style.visibility='visible';
       this.animate(o,o.h,o.h[3],t,new Date(),ms);
       o.t?this.animate(o,o.t,o.t[3],ud?o.t[2]:0,new Date(),ms):null;
      }
     },
    
     init:function(o){
      var id=o.ContentID,m=o.Mode,ms=o.Animate,c=document.getElementById(id),p=c?c.parentNode:null,m=typeof(m)=='string'?m.charAt(0).toUpperCase():'D',m=m==='U'||m=='R'||m=='L'?m:'D',m=m=='R'||m=='L'?[m,'width','offsetWidth','left']:[m,'height','offsetHeight','top'];
      if (c){
       o.h=[c,m[1],c[m[2]],0];
       m[0]=='U'||m[0]=='L'?o.t=[c,m[3],-c[m[2]],0]:null;
       c.style[m[1]]='0px';
       c.style[m[3]]=(m[0]=='D'||m[0]=='R'?p[m[2]]:0)+'px';
       c.style.visibility='hidden';
       o.c=c;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.id=id;
       this['zxc'+id]=o;
      }
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(f<0||t<0?n:0,n);
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
       t==0?a[0].style.visibility='hidden':null;
      }
     }
    
    }
    
    zxcSlidePanel.init({
     ContentID:'menuD',  // the unique ID name of the content DIV.                            (string)
     Mode:'Down',        //(optional) the mode of execution, 'Down', 'Up', 'Right' or 'Left'. (string, default = 'Down')
     Animate:2000        //(optional) the animation speed in milliseconds.                    (number, default = 2000)
    });
    
    
    /*]]>*/
    </script>
    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/

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

    Tedah3143 (07-21-2014)

  10. #9
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    How do I use the code provided by vwphillips?


    carwashwater.com

  11. #10
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,774
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    with the CSS in the header
    and the menu DIVs and the script just before the </BODY> tag
    The four menus works on your page without any problems
    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/

Similar Threads

  1. How to change menu from left of the screen to the right of the screen?
    By EdThaSt0rm in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-31-2009, 09:47 AM
  2. Omnislide Menu
    By lightsoutgolf in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-02-2008, 04:53 PM
  3. Omnislide headers not completely off screen
    By vkbarefoot in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-16-2008, 03:15 PM
  4. omnislide menu
    By candella in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-20-2007, 07:59 PM
  5. omnislide menu need help
    By candella in forum Bug reports
    Replies: 0
    Last Post: 10-07-2007, 01:53 PM

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
  •