Menu flashes

HTML & CSS
1

My menu flashes an unstyled list for the menu everytime you click to a new page. I have the CSS (menusm.css). Is this CSS or javascript causing the menu to flash unstyled.

Edit: link removed at OP’s request, but test page given below: http://ksm.fm/misc/testmenu.html

2

You are linking to a whole load of style sheets there. It takes time to load all that stuff, so you are seeing the page before all the styles are loaded.
I guess that’s what they mean by bloat when using frameworks.

2 Likes
3

In my testing, should it still be affected by “bloat” when I move the CSS file to the top of the html head? the menu is the first thing to load and the nav it still flashes unstyled as the rest of the page loads… please advise!

4

Looking again, I think the javascript is not helping. I see the menu in vertical format while the 4 boxes showing stats do the “count up” effect. It seems to be running that before all the css is loaded. Some of the css is already loaded, as it does have some styling.
I’m not used to working with frameworks, or very much js, but I would maybe try putting all the css links before the js.

I counted 20 links to css files in the page, bloat is not about order, but quantity and potential for redundant code among all that. Though getting the order right may help in this case, as the delay it seems is happening while the count-up is running.

1 Like
5

The web-developer toolbar shows this:

Each one of those scripts and style sheets involves a separate call to the server, which will slow down your page rendering.

3 Likes
6

I missed two style sheets :anguished:

2 Likes
7

I know - I was shocked!

1 Like
8

I’ve cleaned up/consolidated all of the critical CSS and now there are 3 CSS calls and I am still getting the flashing. Keep in mind this is locally, the link in the OP is the old/the original bloated version.

There does seem to be a connection to any page that runs a javascript chart. Some pages load instantly, and others with charts take a moment… any ideas to hide the menu until everything is loaded?

PS- With 22 CSS calls, I hope I’ve provided some entertainment as well :smiley:

9

It would be better for your navigation styles to be served up via CSS rather than via JS, as it’s taking a lot of time for the scripts to load. You can see what’s taking a long time to load via the Network panel in Chrome.

1 Like
10

I’ve switched to a new menu Ralph and its working great now!.. just one thing, the new menu UL code is styling/breaking other unordered lists…

I’ve uploaded a working example here:
http://ksm.fm/misc/testmenu.html

I’d like for the CSS styles on the page to be customized to only apply to the menu. I’ve tried adding the class to the code like .newmenu ul li {}, however it keeps breaking the code… I know Im close but have been trying for the past hour. Any ideas?

11

You still have rules like this:

ul li:hover {
  background: #017db6;
  color: #000;
}

That will apply to any lis unless you specify otherwise. E.g.

.newmenu li:hover {
  background: #017db6;
  color: #000;
}
1 Like
12

Hmm I tried that but now the hover stopped working for the menu and no longer turns blue

13

Doesn’t look like you’ve updated the test page?

14

Sure, its an HTML page, I thought you had it locally. Here is the page updated:

http://ksm.fm/misc/testmenu.html

15

Ok I got the menu working, thanks everyone

16

The hover isn’t working now, though, because you’ve done this:

.newmenu ul li:hover {
  background: #017db6;
  color: #000;
}

That should be

.newmenu li:hover {
  background: #017db6;
  color: #000;
}

or

ul.newmenu li:hover {
  background: #017db6;
  color: #000;
}
1 Like
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.