PDA

View Full Version : Responsive Side Toggle Menu



jdadwilson
11-11-2015, 09:19 PM
1) Script Title:
Responsive Side Toggle Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/sidetogglemenu.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
11-11-2015, 09:26 PM
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
11-12-2015, 12:53 AM
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
11-12-2015, 08:23 AM
Not sure, but there might be a glitch in the CSS.

Try removing the apostrophes around hidden;

.sidetogglemenu{ visibility: 'hidden'; }

jdadwilson
11-12-2015, 03:54 PM
That did the trick.

Thanks again for all your help.
jdadwilson

jdadwilson
11-18-2015, 10:14 PM
Is it possible to have the 'side toggle menu' display visible on page load?

jdadwilson

Beverleyh
11-19-2015, 08:43 AM
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
12-16-2015, 06:45 PM
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 :-)