HTML Programming
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > HTML Programming
Reload this Page

Page 2 - Slide Out Menu Problem

Page 2 - Discuss Slide Out Menu Problem in the HTML Programming forum on Dev Shed.
Slide Out Menu Problem HTML Programming forum covering discussions of HTML and XHTML, as well as HTML-related issues such as writing W3C Compliant code. Use HyperText Markup Language for building websites.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Page 2 of 2 < 1 2
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #16  
Old October 21st, 2003, 10:51 AM
Hotlink Lady Hotlink Lady is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Posts: 13 Hotlink Lady User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 28 m 20 sec
Reputation Power: 0
Copy and paste
Here... you should be able to open notepad, copy, paste, and name as a .html file... the only thing you'll need to be concerned is make sure the .js file pointed to the correct url. Everything else is pretty much irrelevant the images may appear broken and links won't go anywhere but the code will still work.

Code:
<script language="javascript" src="ypSlideOutMenusC.js"></script>
<script language="javascript"> 
new ypSlideOutMenu("menu1", "down", 3, 30, 106, 130), 
new ypSlideOutMenu("menu2", "down", 114, 30, 106, 130), 
new ypSlideOutMenu("menu3", "down", 215, 30, 106, 130) 
</script> 



<div align="center"> 

<table cellpadding="0" cellspacing="0" border="0" width=""> 
<tr valign="top"> 
<td width="1" bgcolor="#ADADAD"><img src="pics/pix_ADADAD.gif" width="1" height="1"></td> 
<td> 
<a id="act0" href="#" onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')"><img src="pics/nav_0.jpg" width="106" height="29"></a><div id="menu1Container"> 
<div id="menu1Content" class="nav"> 
<a href="#">option 1</a><br> 
<a href="#">option 2</a><br> 
<a href="#">option 3</a><br> 
<a href="#">option 4</a><br> 
<a href="#">option 5</a><br> 
<a href="#">option 6</a> 
</div></div></td> 
<td> 
<a id="act1" href="#" onmouseover="ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')"><img src="pics/nav_0.jpg" width="106" height="29"></a><div id="menu2Container"> 
<div id="menu2Content" class="nav"> 
<a href="#">option 1</a><br> 
<a href="#">option 2</a><br> 
<a href="#">option 3</a><br> 
<a href="#">option 4</a><br> 
<a href="#">option 5</a><br> 
<a href="#">option 6</a> 
</div></div></td> 
<td> 
<a id="act3" href="#" onmouseover="ypSlideOutMenu.showMenu('menu3')" onmouseout="ypSlideOutMenu.hideMenu('menu3')"><img src="pics/nav_0.jpg" width="106" height="29"></a><div id="menu3Container"> 
<div id="menu3Content" class="nav"> 
<a href="#">option 1</a><br> 
<a href="#">option 2</a><br> 
<a href="#">option 3</a><br> 
<a href="#">option 4</a><br> 
<a href="#">option 5</a><br> 
<a href="#">option 6</a> 
</div></div></td> 
<td width="1" bgcolor="#ADADAD"><img src="pics/pix_ADADAD.gif" width="1" height="1"></td> 
</tr> 
</table> 

</div>



- Hotlink Lady
Reply With Quote
  #17  
Old October 21st, 2003, 11:13 AM
proy01 proy01 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Posts: 14 proy01 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
menus
Right ive made a start for you......ive put all the code in a layer which should help with the positioning, i havent got time to sort it fully for you but youll just need to tweak it to get it right.

<script language="javascript" src="ypSlideOutMenusC.js"></script>
<script language="javascript">
new ypSlideOutMenu("menu1", "down", 0, 30, 106, 130),
new ypSlideOutMenu("menu2", "down", 120, 30, 106, 130),
new ypSlideOutMenu("menu3", "down", 215, 30, 106, 130)
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>




<div align="center">
<div id="Layer1" style="position:absolute; width:338px; height:115px; z-index:1; left: 367px; top: 11px;">
<table width="" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="1" bgcolor="#ADADAD"><img src="pics/pix_ADADAD.gif" width="1" height="1"></td>
<td> <a id="act0" href="#" onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')"><img src="pics/nav_0.jpg" width="106" height="29"></a>
<div id="menu1Container">
<div id="menu1Content" class="nav"> <a href="#">option 1</a><br>
<a href="#">option 2</a><br>
<a href="#">option 3</a><br>
<a href="#">option 4</a><br>
<a href="#">option 5</a><br>
<a href="#">option 6</a> </div>
</div></td>
<td> <a id="act1" href="#" onmouseover="ypSlideOutMenu.showMenu('menu2')" onmouseout="ypSlideOutMenu.hideMenu('menu2')"><img src="pics/nav_0.jpg" width="106" height="29"></a>
<div id="menu2Container">
<div id="menu2Content" class="nav"> <a href="#">option 1</a><br>
<a href="#">option 2</a><br>
<a href="#">option 3</a><br>
<a href="#">option 4</a><br>
<a href="#">option 5</a><br>
<a href="#">option 6</a> </div>
</div></td>
<td> <a id="act3" href="#" onmouseover="ypSlideOutMenu.showMenu('menu3')" onmouseout="ypSlideOutMenu.hideMenu('menu3')"><img src="pics/nav_0.jpg" width="106" height="29"></a>
<div id="menu3Container">
<div id="menu3Content" class="nav"> <a href="#">option 1</a><br>
<a href="#">option 2</a><br>
<a href="#">option 3</a><br>
<a href="#">option 4</a><br>
<a href="#">option 5</a><br>
<a href="#">option 6</a> </div>
</div></td>
<td width="1" bgcolor="#ADADAD"><img src="pics/pix_ADADAD.gif" width="1" height="1"></td>
</tr>
</table>
</div>
</div>
Reply With Quote
  #18  
Old October 21st, 2003, 11:46 AM
Hotlink Lady Hotlink Lady is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Posts: 13 Hotlink Lady User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 28 m 20 sec
Reputation Power: 0
Your Awesome
Ah... your awesome...

I had to change a line of code

from:
<div id="Layer1" style="position:absolute; width:338px; height:115px; z-index:1; left: 367px; top: 11px;">

To:
<div id="Layer1" style="position:relative; width:338px; z-index:1; top: 11px;">

But it works great!


Thanks for the assistance.


- Hotlink Lady
Reply With Quote
  #19  
Old October 21st, 2003, 11:54 AM
proy01 proy01 is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Oct 2003
Posts: 14 proy01 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
menus
I aim to please!!

No problem
Reply With Quote
  #20  
Old April 11th, 2004, 08:02 AM
skycast skycast is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2004
Posts: 7 skycast User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
hey hav eyou tried placing the menu relative to the main section image? I am having the same alignment problem as you hotlink lady my website is www.skycast.co.uk - perhaps you can help. thanks

tom
Reply With Quote
  #21  
Old April 11th, 2004, 01:15 PM
skycast skycast is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2004
Posts: 7 skycast User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Problems aligning ypslideoutmenu according to resolution
Hey I've tried anything I possibly can to get my folding menus to align with my nav buttons regardless of resolution but so far have had very little success. Here is my code (you can see a working version of this @ http://skycast.co.uk):

Code:
<HTML>
<SCRIPT language=javascript src="skycast_files/ypSlideOutMenus.js"></SCRIPT>
<body>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</SCRIPT>
<SCRIPT language=javascript>
new ypSlideOutMenu("menu1", "down", 502, 147, 171, 100)
new ypSlideOutMenu("menu2", "down", 602, 147, 171, 100)
new ypSlideOutMenu("menu3", "down", 692, 147, 171, 96)
new ypSlideOutMenu("menu4", "down", 782, 147, 171, 96)
new ypSlideOutMenu("menu5", "down", 872, 147, 171, 96)
</SCRIPT>
<CENTER>
<TABLE height=157 cellSpacing=0 cellPadding=0 width=770 border=0>
  <TBODY>
  <TR>
      <TR>
    <TD colSpan=14><IMG height=60 alt="" 
      src="/WebHostV1-hd_01.gif" width=770></TD></TR>
  <TR>
    <TD colSpan=9 rowSpan=2><IMG height=60 alt="" 
      src="/WebHostV1-hd_02.gif" width=563></TD>
    <TD colSpan=4><IMG height=21 alt="" 
      src="/WebHostV1-hd_dom.gif" width=191></TD>
    <TD rowSpan=4><IMG height=96 alt="" 
      src="/WebHostV1-hd_04.gif" width=16></TD></TR>
  <TR>
    <TD colSpan=4><IMG height=39 alt="" 
      src="/WebHostV1-hd_05.gif" width=191></TD></TR>
  <TR>
    <TD colSpan=3><IMG height=19 alt="" 
      src="/WebHostV1-hd_06.gif" width=289></TD>
    <TD><A 
      onmouseover="MM_swapImgRestore();MM_swapImage('home','','themes/WebHost-V1/images/WebHostV1-hd_b1.gif',1);ypSlideOutMenu.showMenu('menu1')" 
      onmouseout="ypSlideOutMenu.hideMenu('menu1');MM_swapImgRestore()" 
      href="http://skycast.co.uk/index.php"><IMG id=home height=19 alt=Home 
      src="/WebHostV1-hd_b1.gif" width=72 border=0 
name=home></A></TD>
    <TD rowSpan=2><IMG height=36 alt="" 
      src="/WebHostV1-hd_08.gif" width=20></TD>
    <TD><A 
      onmouseover="MM_swapImgRestore();MM_swapImage('radio','','themes/WebHost-V1/images/WebHostV1-hd_b2.gif',1);ypSlideOutMenu.showMenu('menu2')" 
      onmouseout="ypSlideOutMenu.hideMenu('menu2');MM_swapImgRestore()" 
      href="http://skycast.co.uk/index2.php"><IMG id=radio height=19 alt=Radio 
      src="/WebHostV1-hd_b2.gif" width=72 border=0 
    name=radio></A></TD>
    <TD rowSpan=2><IMG height=36 alt="" 
      src="/WebHostV1-hd_10.gif" width=19></TD>
    <TD><A 
      onmouseover="MM_swapImgRestore();MM_swapImage('interact','','themes/WebHost-V1/images/WebHostV1-hd_b3.gif',1);ypSlideOutMenu.showMenu('menu3')" 
      onmouseout="ypSlideOutMenu.hideMenu('menu3');MM_swapImgRestore()" 
      href="http://skycast.co.uk/index3.php"><IMG id=interact height=19 
      alt=Interact src="/WebHostV1-hd_b3.gif" width=72 border=0 
      name=interact></A></TD>
    <TD rowSpan=2><IMG height=36 alt="" 
      src="/WebHostV1-hd_12.gif" width=19></TD>
    <TD><A 
      onmouseover="MM_swapImgRestore();MM_swapImage('members','','themes/WebHost-V1/images/WebHostV1-hd_b4.gif',1);ypSlideOutMenu.showMenu('menu4')" 
      onmouseout="ypSlideOutMenu.hideMenu('menu4');MM_swapImgRestore()" 
      href="http://skycast.co.uk/index4.php"><IMG id=members height=19 
      alt=Members src="/WebHostV1-hd_b4.gif" width=72 border=0 
      name=members></A></TD>
    <TD rowSpan=2><IMG height=36 alt="" 
      src="/WebHostV1-hd_14.gif" width=18></TD>
    <TD><A 
      onmouseover="MM_swapImgRestore();MM_swapImage('links','','themes/WebHost-V1/images/WebHostV1-hd_b5.gif',1);ypSlideOutMenu.showMenu('menu5')" 
      onmouseout="ypSlideOutMenu.hideMenu('menu5');MM_swapImgRestore()" 
      href="http://skycast.co.uk/index5.php"><IMG id=links height=19 alt=Links 
      src="/WebHostV1-hd_b5.gif" width=72 border=0 
    name=links></A></TD>
    <TD rowSpan=2><IMG height=36 alt="" 
      src="/WebHostV1-hd_16.gif" width=29></TD></TR>
  <TR>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_17.gif" 
    width=25></TD>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_user.gif" 
      width=229></TD>
    <TD colSpan=2><IMG height=17 alt="" 
      src="/WebHostV1-hd_19.gif" width=107></TD>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_20.gif" 
    width=72></TD>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_21.gif" 
    width=72></TD>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_22.gif" 
    width=72></TD>
    <TD><IMG height=17 alt="" src="/WebHostV1-hd_23.gif" 
    width=72></TD></TR></TBODY></TABLE>
<DIV id=menu1Container>
<DIV id=menu1Content 
style="FILTER: alpha(opacity=90); LEFT: 0px; POSITION: relative; TEXT-ALIGN: left">
<TABLE cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('news12','','themes/WebHost-V1/images/news_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=News">
    <IMG id=news12 alt=News 
      src="/news.png" border=0 name=news12 width="88" height="19"></A></TD></TR>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('about7','','themes/WebHost-V1/images/about_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=About">
    <IMG id=about7 
      alt=About src="/about.png" border=0 
name=about7 width="88" height="19"></A></A></TD></TR>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('contact7','','themes/WebHost-V1/images/contact_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=Contact">
    <IMG id=contact7 
      alt=contact src="/contact.png" border=0 name=news7 width="88" height="19"></A></TD></TR>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('link7','','themes/WebHost-V1/images/link_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=Link">
    <IMG id=link7 alt=about 
      src="/link.png" border=0 name=link7 width="88" height="19"></A></TD></TR>
  </TBODY></TABLE></div></div>
<DIV id=menu2Container>
<DIV id=menu2Content 
style="FILTER: alpha(opacity=90); LEFT: 0px; POSITION: relative; TEXT-ALIGN: left">
<TABLE cellSpacing=0 cellPadding=0 border=0>
  <TBODY>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('listen7','','themes/WebHost-V1/images/listen_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=Listen">
    <IMG id=listen7 
      alt=listen7 src="/listen.png" border=0 name=Listen width="88" height="19"></A></TD></TR>
  <TR>
    <TD><A 
      onmouseover="MM_swapImage('schedule7','','themes/WebHost-V1/images/schedule_on.png',1)" 
      onmouseout=MM_swapImgRestore() 
      href="http://skycast.co.uk/modules.php?name=Schedule">
    <IMG id=schedule7 
      alt=About src="/schedule.png" border=0 
    name=schedule7 width="88" height="19"></A></A></TD></TR></div></div>
   </TBODY></TABLE></DIV></DIV>
</DIV></DIV>
Reply With Quote
Reply
Page 2 of 2 < 1 2

Viewing: Dev Shed Forums > Web Design > HTML Programming > Slide Out Menu Problem

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump



 Free IT White Papers!
 
How to Present Effectively Online
This white paper offers practical and actionable advice on the key steps that any presenter should consider as they plan and execute a Webinar or online meeting.
 
Open Source Security Myths
Open Source Software (OSS) is computer software whose source code is available to the general public with relaxed or non-existent intellectual property restrictions (or arrangement such as the public domain), and is usually developed with the input of many contributors.
 
Power and Cooling Capacity Management for Data Centers
This paper describes the principles for achieving power and cooling capacity management.
 
Scalable, Fault-Tolerant NAS for Oracle - The Next Generation
For several years NAS has been evolving as a storage alternative for Oracle databases, and for good reason: NAS is quite often the simplest, most cost-effective storage approach for Oracle. Learn about the benefits that HP's approach to scalable NAS brings to Oracle environments in this comprehensive white paper.
 
Understanding Web Application Security Challenges
This white paper discusses many common threats and preventive measures for Web application security, and explains what you can do to help protect your organization.
 

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2009 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway. 
Stay green...Green IT