Submenu where art thou?

[DV1]

Hi, haven’t posted in awhile. :-)

Recently I discovered Dave Bushell’s Off Canvas menu. His description of it is here:

https://www.smashingmagazine.com/2013/01/off-canvas-navigation-for-responsive-website/

It’s a nice menu and I’ve been able to incorporate it into a website. But what I have been trying to do yet not able is to have a submenu(s) drop down from the categories. An example of this is the W3 Schools simple css menu:

http://www.w3schools.com/css/css_dropdowns.asp

The coding is simple enough and I thought I could use it for Bushell’s menu. When I did so the submenus appear on the page like the other categories. When collapsed to mobile the submenus show (fixed, not where you click/touch for drodown) so in that sense it’s okay since for the moment I don’t need that many submenus.

So, the thing is how can I code it for a simple dropdown when you hover over a category? I’ve tried different methods along with the W3 example but I usually end up with things like half the dropdowns showing, the submenus showing in the collapsed part but with erratic results completely different than what is originally there, and so on.

I’m sure for someone here on the forum it’s a breeze to do this but for me it’s been a little on the windy side. :-)

Thanks for any help and suggestions.

Daniel

[Beverleyh]

When collapsed to mobile the submenus show (fixed, not where you click/touch for drodown)

how can I code it for a simple dropdown when you hover over a category?

There seems to be some confusion in what you want to do. I would personally stick with a click/tap action so that sub-menus aren’t expanding/contracting wildly under the random swipe of a mouse cursor.

I’ve tried different methods along with the W3 example

I end up with … erratic results completely different than what is originally there

I imagine that you’re describing the display:block/none reveal (W3) compared to the off-canvas sweep of the original? To pull in some consistency you’d be better off mimicking the off-canvas transform for sub-menus too.

It’s difficult to offer further suggestions on your particular setup when we can’t see your code. All I can do is give an example of something that seems like it already does as described. Feel free to extract the CSS and JS and take ideas from it or manipulate to your needs. This demo uses checkboxes to emulate clicks but you can try removing them from the markup to see what happens (the IE7/8 fallback JS should be forwards-compatible and replace the checkbox behaviour). Or, you can use as-is. http://fofwebdesign.co.uk/freebies-for-websites/css/multi-side-menu-js-ie8.htm

[DV1]

Beverleygh

Thank you for responding. :-)

Yes, basic tap or click.

Here’s the direct link to the demo page of the Bushell menu. You can see the html and css source files from there:

http://dbushell.github.io/Responsive-Off-Canvas-Menu/step4.html

Basically, just some dropdowns for one or two of the ‘chapters’ seen on top and then if possible for them to be also dropdowns in the mobile menu.

I’ll be looking at the link you gave. Before employing that I want to see if anything can be done simply from what is already in the Bushell coding.

Btw, Happy New Year! :-)

Daniel

[Beverleyh]

I didn’t realise it had the horizontal desktop layout (I’m on mobile at the mo and only just rotated into landscape to see it). In that case, here’s a different version of the menu, with a dropdown desktop layout that you can examine http://fofwebdesign.co.uk/freebies-for-websites/css/multi-rwd-drop-down-menu.htm

There’s an alternative, really simple dropdown menu here too, which might be easier to digest (just the basics, under ‘Demo 2’) http://fofwebdesign.co.uk/template/_testing/ios-sticky-hover-fix.htm

From memory, both use the same hover-to-reveal-sub-menus CSS on desktop, it’s just that the off-canvas one uses the checkbox hack to trigger sub-menus, via a tap, using that same sweeping off-canvas motion, on mobile. I imagine that the simpler dropdown CSS can be transferred to your off-canvas menu though (with a bit of manipulation).

Happy New Year to you (and everyone else) also! :D

[DV1]

Beverleyh

Please excuse the time in responding. With the beginning of the year and all the non-internet concerns to deal with, well, you get the picture.

Anyway, tried some suggestions and eventually did get the submenus to show. But there is an issue with the mobile-view nav. Rather than take up space here, the following link goes to a page with the menu and a description in the paragraphs below.

http://sitesetis.com/ROCM/navtest.html

Thank You

Daniel

[Beverleyh]

The sub-menu UL is set as position:absolute; which pulls it out of the flow of the doc and makes it overlap LIs in the parent menu.

If you change it to position: static; when the LIs are hovered, it should push them down.

Probably;

#nav li:hover ul {
    position:static;
}

[DV1]

Beverleyh

Beautiful. :-)

If you go back to the Nav Test page you’ll note that I added a slight, color offset background to the submenu line. This works nicely with the mobile view to separate the submenu sections from main titles. I even changed the font to a serif for extra difference. Of course, since desktop and mobile can be coded different from each other I will play around to see what dwells best at each.

I mentioned at the end that I’d like for a way to keep the dropdown visible after hovering – especially for those with less than sterling cursor control after a night’s partying. :-D It would also help in the mobile view since if for example you tap on Chapter 3 it quickly closes Ch2 and Ch3 slips back rapidly without linking. What and where could I code that?

Thanks

Daniel

http://sitesetis.com/ROCM/navtest.html

[Beverleyh]

You’d need JavaScript to do that. I think this is the essence of what you’re after (the basics to start you off) https://jsbin.com/bivamejife/edit?html,css,js,output

[Author]

Posts