But I want it to be a hover menu, not a click menu. I need that link on the MES|WMS Solutions tab.
If the second level dropdown is to be made visible on :hover and not on click, then that means it will not be available to mobile users. Is that correct?
For right now, it will have to be. We have plans to move to a responsive template, but that is on hold for now.
Do you mind if I follow that logic backwards and suggest that it is probably premature to make the dropdowns from the top level menu require a click. Doing so sends mixed messages to the user about the behavior of the menu. It is common to use indicators such as arrows or triangles to indicate menus items that have dropdowns or flyouts so the mobile user will know that they should be tapped/clicked. In other words, it might be better to stick with dropdown on :hover for now until the mobile/click menu system is ready to be integrated into the layout.
@PaulOB’s recommendation works well with the :hover menu (the link that was posted first, not the current live one).
The dropdowns seem to have a fixed width so I added one line to Paul’s code to accommodate the pale text within the span that was overflowing its container.
This is how I posted it at the top of the HTML page for testing.
<style>
.sf-menu li:hover ul, .sf-menu li.sfHover ul {top:100%} /* was 50px */
.sf-menu a {display:block}
.sf-menu ul a {white-space:normal;line-height:1.2;}
.sf-menu ul a .desc {white-space:normal;line-height:1.2;}
.sf-menu li li:first-child {margin-top:0}
</style>
1 Like
Ok. I will try to implement this tomorrow a.m. and follow back up here then. Thanks for jumping in! 
1 Like
OK. I’ll probably still be asleep so @PaulOB or @SamA74 or someone else will likely continue with you tomorrow.
1 Like
I am away Friday so may not answer until Saturday so someone else can jump in
I’m more than confused by this topic anyway as it keeps changing from click to hover without notice:)
We had a fully working hover menu right at the beginning with my code? Then you changed it to a click menu on another page.
Just include it as the first link in the dropdown.
Your menus must make sense logically and sub menu triggers ‘generally’ should not travel to a link destination.
1 Like
Understood. I will update the links for the click menu. Sorry for the confusion, this is the first time I’ve had to make one of these. Thank you for all your help!
Hi, stanw.
What is the status of your test site at this time? Hover menus or Click menus? I understood you to say that you wanted hover menus at this time, but in your last post you said that you would update the links for the click menu, so I’m a bit confused. Should they be Click for mobile or Hover for desktop? Please post the link to the current page that we should be testing.
Thanks
The menus have been fixed. I updated them to be click menus. Everything’s live now at www.radley.com/supplychainsolutions.html
I would like to touch on 3 observations, if I may.
(1) It is commonplace for click menus to include some method that allows users to tell whether the menu opens a dropdown menu or whether it goes directly to a page. Yours does not. IMO, it would be worthwhile to add that feature.
(2) If for some reason JavaScript is unavailable to the user, your fallback menus still suffer from the same problem that they exhibitied in the beginning… the dropdown disappears before one can reach it with the mouse.
(3) Your HTML shows 20 validation errors. I’m not sure how significant all of them are, but I am sure that mismatched tags are invitations for browsers to misinterpret the HTML, and that invalid attributes can be cleaned up by substituting the CSS equivalent.
Cheers, stanw
2 Likes
Thanks for all that great information. Unfortunately, I have no idea how to clean up any of the items you mentioned. I did notice that the menu on this page www.radley.com/barcoding-rfid.html doesn’t seem to be working. If you could let me know how to fix that, that would be most helpful. As for the other items you mentioned, I think I’ll just have to make do as is until I have time to move everything to the new responsive template.
I’m not a JS person, so this is just a guess:
You seem to be calling jQuery twice in the <head> of http://www.radley.com/barcoding-rfid.html page,
lines 21-22 and 29-30. jQuery should be called only once. Lines 29-30 do not exist on the page that works.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/supersubs.js"></script>
<script type="text/javascript" src="js/supposition.js"></script>
<script type="text/javascript" src="js/resolution.js"></script>
<!-- My guess is that you should delete these two script lines, 29-30 -->
<!-- InstanceBeginEditable name="head" -->
<script src="/jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script>
If I remove lines 29-30 then my tabs don’t work.
Decide whether you are going to run the old 1.8 version of jQuery or the newer 1.11 version. You cant’ run both in the same page.
Ok. How do I know which one I should be using, and how do I correct the code?
If you use 1.11 then you need to replace the version of jquery-ui.min.js that you have with one that works on 1.11
If you decide on 1.8 then you need an obsolete version of tabs.min.js that will work on 1.8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.