Responsive Side Toggle Menu

[jdadwilson]

1) Script Title:
Responsive Side Toggle Menu

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

3) Describe problem:
I am using the Side Toggle Menu and like it very much. I notice that when the page loads the menu flashes. Is there some way to stop the flashing. I have structured the site so that the javascripts load at the end as opposed to the beginning. I moved the <nav> section to the end after the javascript loads and this seems to help. Is there another way to solve the problem?

p.s. I cannot use the .txt feature as all of the menus are dynamically created.

jdadwilson

[Beverleyh]

Flashes? You mean like a flicker or just a delay before it loads? I don't see a flash in the demo. Have you got a link to demonstrate the problem?

[jdadwilson]

Link as follows: http://www.txfannin.org/new-site/index.php

When the page loads note on the left of the viewport you will see a flash of the menu. I suspect this is due to the menu loading at the top of the script and the javascript loading at the bottom.

[Beverleyh]

Not sure, but there might be a glitch in the CSS.

Try removing the apostrophes around hidden;

.sidetogglemenu{ visibility: 'hidden'; }

[jdadwilson]

That did the trick.

Thanks again for all your help.
jdadwilson

[jdadwilson]

Is it possible to have the 'side toggle menu' display visible on page load?

jdadwilson

[Beverleyh]

Try putting curstate: 'open', in the menu = new sidetogglemenu({...}) initialisation code. No end comma needed if its the last parameter.

And also try modifying the JS file with the addition in red - This line;

$menu.css({visibility: 'visible'})

Becomes this;

$menu.css({visibility: 'visible', left:0})

[sjmdesigns]

For me the menu shows for a split second then disappears. I fixed the CSS from 'hidden' and removed the quotes, but the menu still shows before hiding on page load. Other than that, it's an awesome script and easy to install.

[edit] Okay, I fixed it from showing on load. Although, If I decide to use it for the right side of the page, I'll have to adjust my edit, but at least it doesn't even show (for that split second) page load.

I fixed (added) this line in the JS script:
$menu = $(menuref).css({top: 0, left:-290, visibility: 'hidden', zIndex: 1000}).prependTo(document.body)

Above edit to the script "left:-290" matches my width in my CSS file

[EDIT] Okay, I just made the "left:-290px" in my css file instead, sorry to bother anyone, issue resolved. I'm old, I'll catch up :-)