First of all i wanted to say THANKS for the amazing work you've been doing on this theme. It is the BEST theme I've found to use when creating custom themes for clients (even better than zen IMHO) and i truly enjoy working with the power of this theme.

I just wanted to bring up how the superfish dropdown menus appear to function out of the box if Javascript is turned off.

I have discovered the following:

  • If Javascript is turned on, the menus work great (for me) EXCEPT for the first second(s) as the page loads the ENTIRE menu flashes up before the javascript adds the display:none; style to ".primary-menu-inner ul.sf-menu li ul.menu". Indeed, perhaps this only shows up if the page has a lot of DOM elements, etc... but it still "disappoints" (haha) my clients when they see this. My temporary fix for this is to set ".primary-menu-inner ul.sf-menu li ul.menu" to display:none; in local.css. This of course results in NO dropdown menus being shown if JS is turned off in a reader's browser.
  • If Javascript is turned off, the dropdown menus ALL display, do not work correctly, and display over page content. Would it not be ideal to have the dropdown menus work purely with CSS (like this for example: http://www.lwis.net/free-css-drop-down-menu/) even if JS is turned off. Again using my temporary fix mentioned above, if JS is turned off then no dropdown menus appear.

What are your thoughts on this? Is this something that could be fixed in future updates? I'm thinking of integrating the framework at http://www.lwis.net/free-css-drop-down-menu/ for my usage of this theme, but i'm not sure yet if its worth the time. If i fix this myself, i will of course share it, but for now the functionality display:none; for ".primary-menu-inner ul.sf-menu li ul.menu" is sufficient for my client- since JS is almost always turned on in peoples browsers.

Comments

stephthegeek’s picture

stephthegeek commented
Assigned: Unassigned » jeremycaldwell
jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Fixed

This CSS below will hide the second level primary menu from users who have JavaScript enabled so they don't see the flash of the second level menu items when the site initially loads. Notice the "html.js" class, that is targeting just users with JavaScript enabled so it should be safe to use as a fallback in your case. So if the user has JavaScript disabled they wouldn't get the same class of "html.js" as it wouldn't apply to them and the menu would be present.

html.js .primary-menu-inner ul li ul {
  display: none;
}

As the theme is no if JavaScript is disabled the menu still works and is accessible so not sure what improvements we could make on our end there. The dropdowns work and all menu items are clickable and appear just fine in that case.

SchwebDesign’s picture

SchwebDesign commented

I just wanted to say thanks for this great solution and response! ... i didn't even think of targeting js being on/off with CSS. I will implement this solution soon and give any feedback if necessary; regardless, i'm confident it will work great. Thanks again!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.