CSS Codes
CSS Layouts
Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: OmniSlide Menu - Fit to screen.

  1. 07-09-2014, 05:05 PM #1
    Tedah3143
    Tedah3143 is offline Junior Coders
    Join Date
    Jan 2010
    Location
    Tulsa, OK
    Posts
    48
    Thanks
    7
    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.
    Reply With Quote Reply With Quote
  2. 07-10-2014, 08:33 AM #2
    Deadweight's Avatar
    Deadweight
    Deadweight is offline Senior Coders
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 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
    Reply With Quote Reply With Quote
  3. 07-10-2014, 10:18 AM #3
    vwphillips
    vwphillips is offline Elite Coders
    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">
/*<![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/
    Reply With Quote Reply With Quote
  4. 07-10-2014, 12:41 PM #4
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 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/
    Reply With Quote Reply With Quote

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

    Tedah3143 (08-15-2014)
  6. 07-10-2014, 12:57 PM #5
    asiatic
    asiatic is offline Junior Coders
    Join Date
    Mar 2007
    Posts
    40
    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
    Reply With Quote Reply With Quote
  7. 07-10-2014, 01:48 PM #6
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 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/
    Reply With Quote Reply With Quote
  8. 07-16-2014, 09:06 PM #7
    Tedah3143
    Tedah3143 is offline Junior Coders
    Join Date
    Jan 2010
    Location
    Tulsa, OK
    Posts
    48
    Thanks
    7
    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
    Reply With Quote Reply With Quote
  9. 07-17-2014, 09:10 AM #8
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 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/
    Reply With Quote Reply With Quote

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

    Tedah3143 (07-21-2014)
  11. 07-21-2014, 12:25 PM #9
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 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/
    Reply With Quote Reply With Quote
  12. 07-31-2014, 08:26 AM #10
    Tedah3143
    Tedah3143 is offline Junior Coders
    Join Date
    Jan 2010
    Location
    Tulsa, OK
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    vwphillips. Someone. Is there a way to get OmniSlide menu to reside at the bottom of the screen, away from the browser tabs?
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules