Fold-Out External Menu Help

**Salem** · 01-30-2006, 09:36 PM

Hi

I have just used the Fold-Out External Menu script on my webpage, and so far it's working great, and was very easy to implement. I just have one suggestion.

Can i set the menu up so that it always stays in view, ie even when the page is scrolled down. Sort of like having it always on top?

Please can you help

Thanks in advance

**jscheuer1** · 01-31-2006, 11:10 AM

Well, there are other ways but, I like this one. First, you will need a DOCTYPE. Almost any will do, this one shouldn't cause many, if any problems with your average page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>

It is shown in red, placed just above the opening <html> tag for the page, which is where it belongs. Next, use this style section:

Code:

<style type="text/css">
* html {
overflow: hidden;
}
* html body {
margin: 0;
padding: 0;
height:100%;
height:expression(document.documentElement.clientHeight+'px');
width:expression(document.documentElement.clientWidth+'px');
overflow: auto;
}
* html #container {
margin:15px 10px;
}
#slidemenubar, #slidemenubar2{
position:fixed!important;
position:absolute;
border:1.5px solid black;
line-height:20px;
}
</style>

Substitute it for the one that comes with the script. Finally, add these two comment blocks, the first one right after the script:

Code:

</script>
<!--[if IE]>
<div id="container">
<![endif]-->

The second one, right before the closing </body> tag (after all of the rest of your page's content):

Code:

<!--[if IE]>
</div>
<![endif]-->
</body>

**Salem** · 02-12-2006, 10:55 PM

Originally Posted by jscheuer1

Well, there are other ways but, I like this one. First, you will need a DOCTYPE. Almost any will do, this one shouldn't cause many, if any problems with your average page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>

It is shown in red, placed just above the opening <html> tag for the page, which is where it belongs. Next, use this style section:

Code:

<style type="text/css">
* html {
overflow: hidden;
}
* html body {
margin: 0;
padding: 0;
height:100%;
height:expression(document.documentElement.clientHeight+'px');
width:expression(document.documentElement.clientWidth+'px');
overflow: auto;
}
* html #container {
margin:15px 10px;
}
#slidemenubar, #slidemenubar2{
position:fixed!important;
position:absolute;
border:1.5px solid black;
line-height:20px;
}
</style>

Substitute it for the one that comes with the script. Finally, add these two comment blocks, the first one right after the script:

Code:

</script>
<!--[if IE]>
<div id="container">
<![endif]-->

The second one, right before the closing </body> tag (after all of the rest of your page's content):

Code:

<!--[if IE]>
</div>
<![endif]-->
</body>

I used this method. However it doesn't work in Internet Explorer 7 Public Preview (Beta 2). Is there a way to get it to work

**jscheuer1** · 02-13-2006, 12:02 AM

I used this method. However it doesn't work in Internet Explorer 7 Public Preview (Beta 2). Is there a way to get it to work

I wouldn't worry about that until they come out with the full release. Until that time, very few folks will be using that browser and the chances that its interface will change before full public release are too great to warrant specific code for it. However, the comment code blocks can be made to test for <v7 and the IE specific styles could be similarly ensconced in version specific comment tags. Assuming then that the v7 browser will behave as all other non IE browsers do as regards the fixed property value, then it should work fine.

For more on version specific comment blocks see:

Conditional comments

at Quirksmode.org

**jscheuer1** · 02-13-2006, 02:44 AM

In other words, use the same or similar DOCTYPE, this for the style:

Code:

<style type="text/css">
#slidemenubar, #slidemenubar2{
position:fixed;
border:1.5px solid black;
line-height:20px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
* html {
overflow: hidden;
}
* html body {
margin: 0;
padding: 0;
height:100%;
height:expression(document.documentElement.clientHeight+'px');
width:expression(document.documentElement.clientWidth+'px');
overflow: auto;
}
* html #container {
margin:15px 10px;
}
#slidemenubar, #slidemenubar2{
position:absolute;
}
</style>
<![endif]-->

And these for the previously used/mentioned comment blocks:

Finally, add these two comment blocks, the first one right after the script:

Code:

</script>
<!--[if lte IE 6]>
<div id="container">
<![endif]-->

The second one, right before the closing </body> tag (after all of the rest of your page's content):

Code:

<!--[if lte IE 6]>
</div>
<![endif]-->
</body>

Note: This will only work if the new IE beta identifies itself internally as greater than version 6 (which it should) and uses style properly which, I've heard a rumor that it does. If not, just live with it until the full release comes out.

**Salem** · 02-17-2006, 11:15 PM

Hi

Me again.

I used the script successfully on one website. But now, when using it on another the menu doesn't slide out when hovered on. I tried adding the script into a blank "test" document. But still nothing.

The side of the menu appears, but it doesnt slide out.

My entire pages code is below

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<style type="text/css">
* html {
overflow: hidden;
}
* html body {
margin: 0;
padding: 0;
height:100%;
height:expression(document.documentElement.clientHeight+'px');
width:expression(document.documentElement.clientWidth+'px');
overflow: auto;
}
* html #container {
margin:15px 10px;
}
#slidemenubar, #slidemenubar2{
position:fixed!important;
position:absolute;
border:1.5px solid black;
line-height:20px;
}
</style>

</head>

<body>
<script language="JavaScript1.2">

/***********************************************
* Fold-out external menu- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var slidemenu_height='315px' //specify height of menu (in pixels throughout)
var slidemenu_width='180px' //specify width of menu
var slidemenu_reveal='15px' //specify amount that menu should protrude initially
var slidemenu_top='170px'   //specify vertical offset of menu on page
var slidemenu_url="Private/Shared/Web%20Pages/PHP/menu.php" //specify path to menu file

var ns4=document.layers?1:0
var ie4=document.all
var ns6=document.getElementById&&!document.all?1:0

if (ie4||ns6)
document.write('<iframe id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+'; height:'+slidemenu_height+'" src="'+slidemenu_url+'"></iframe>')
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' height='+slidemenu_height+' onMouseover="pull()" onMouseout="draw()" src="'+slidemenu_url+'" visibility=hide></layer>')
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}

window.onload=regenerate2

rightboundary=0
leftboundary=(parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1

if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}

function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10+"px"
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}

function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10+"px"
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}

</script>
<!--[if IE]>
<div id="container">
<![endif]-->

<p>Test</p>

<!--[if IE]>
</div>
<![endif]-->
</body>

</html>

Can you suggest anything. I dunno what i'm doing wrong, i managed to get it to work perfectly on my first page, but some reason it won't anymore

~Salem

**jscheuer1** · 02-18-2006, 06:29 AM

Your code works here as long as I substitute a valid external filename for:

Code:

var slidemenu_url="Private/Shared/Web%20Pages/PHP/menu.php" //specify path to menu file

That doesn't cause the menu to exhibit scrollbars.

**Salem** · 02-19-2006, 11:54 AM

Originally Posted by jscheuer1

Your code works here as long as I substitute a valid external filename for:

Code:

var slidemenu_url="Private/Shared/Web%20Pages/PHP/menu.php" //specify path to menu file

That doesn't cause the menu to exhibit scrollbars.

I just modified the "slidemenu_url" field. It needed a "/" at the beginning. However, it still did not act as expected. The little menu was displayed with what appeard to be the correct menu page (when looking at the part sticking out), but it still won't slide out (using Firefox 1.5).

Please see attached file

**jscheuer1** · 02-19-2006, 03:55 PM

Well, I just double checked and the result was the same. I used your code exactly as you have it in your post. I substituted menu.htm (the one from the demo page) as the external file. It worked fine in FF1.5 as well as IE6 and Opera8.52. I even kicked up the resolution, as it looks like you have a wider screen than mine, to 1280x1024 and still fine. One thing I notice is that when the mouse is over a portion of the menu that isn't considered (for whatever odd reason) a part of the body of the external page, the menu retracts. The only substantive difference between a flawless external file and the demo one that had this problem was that I removed all whitespace from the end of the external file, that is left absolutely nothing, not even a single blank line, after the closing </html> tag. This reminds me that there is code that belongs on the external menu page to enable it to slide in and out. If you have omitted this, it would cause just such a problem as you report. The code is a part of the body tag on the external menu page:

HTML Code:

<body onMouseover="if ((document.all||document.getElementById)&&window.parent.pull) window.parent.pull()"
onMouseout="if ((document.all||document.getElementById)&&window.parent.pull) window.parent.draw()" topmargin="5" leftmargin="5"
marginwidth="5" marginheight="5" bgcolor=>

Without this, it won't slide, period.

**Salem** · 02-19-2006, 04:49 PM

Originally Posted by jscheuer1

Well, I just double checked and the result was the same. I used your code exactly as you have it in your post. I substituted menu.htm (the one from the demo page) as the external file. It worked fine in FF1.5 as well as IE6 and Opera8.52. I even kicked up the resolution, as it looks like you have a wider screen than mine, to 1280x1024 and still fine. One thing I notice is that when the mouse is over a portion of the menu that isn't considered (for whatever odd reason) a part of the body of the external page, the menu retracts. The only substantive difference between a flawless external file and the demo one that had this problem was that I removed all whitespace from the end of the external file, that is left absolutely nothing, not even a single blank line, after the closing </html> tag. This reminds me that there is code that belongs on the external menu page to enable it to slide in and out. If you have omitted this, it would cause just such a problem as you report. The code is a part of the body tag on the external menu page:

HTML Code:

<body onMouseover="if ((document.all||document.getElementById)&&window.parent.pull) window.parent.pull()"
onMouseout="if ((document.all||document.getElementById)&&window.parent.pull) window.parent.draw()" topmargin="5" leftmargin="5"
marginwidth="5" marginheight="5" bgcolor=>

Without this, it won't slide, period.

Yes, you were right. I did forget that code in the external menu file. After adding it it was fixed.

Thanks

Thread: Fold-Out External Menu Help

Thread Tools

Search Thread

Fold-Out External Menu Help

Bookmarks

Bookmarks

Posting Permissions