Jump to content

Submenu where art thou?


DV1

Recommended Posts

Hi, first post. :)

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 figure for submenu(s) dropdowns from the categories. An example of this is the W3 Schools simple css dropdowns:

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 dropown) 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 styling 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

Link to comment
Share on other sites

I haven't uploaded my page yet but here is the page I've been working from. You can get the source code and css from it. Notice the chapter 1-5 titles. I just want a dropdown from one or two of them and if possible that they show in the collapsed mobile view. As to whether in the mobile view they show fixed or with dropdown I'm not sure if that's automatic or requires other code..

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

Link to comment
Share on other sites

It definitely requires additional CSS for the <ul> you will add for dropdown and also some additional JS to handle it when it is collapsed.

You need to apply display: block; to the <li>s in the dropdown menu so that they stack up on top of each other. Also, you might need to remove overflow: hidden; from the #nav or the dropdown will always be hidden under it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...