Add scrollbar to menu item which has submenu items, without submenu items being hidden

Question

I need to add a scrollbar to the courses menu list (see picture below). There are too many courses, and therefore goes over the page fold. The top navbar is fixed and therefore scrolling the page doesn't help.

When I add the css:

.navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu.courses {
   overflow-y: auto; /* or : scroll */
}

the ul for the course modules then does not display (ie. Orientation Module in the example picture below). I am assuming this is because the sub-submenu is nested in the ul that has overflow-y:auto and therefore is not displaying. How do I solve this issue of adding a scrollbar to the courses submenu but with the course submenu items not being hidden. Any solution is fine, css, jquery etc.

The HTML and css is quite excessive as it is built in moodle, so there is a lot going on. The basic HTML structure is as follows:

<ul class='nav'>
   <li class='dropdown'>
       <ul class='dropdown-menu'>
          <li class='dropdown-submenu courses'>
              <ul class='dropdown-menu'>
                 <li class='dropdown-submenu courses'>
                     <ul class='dropdown-menu'>
                         <li class='dropdown-submenu course-submenu'>
                         </li>
                         .
                         .
                         .
                     </ul>
                 </li>
                 .
                 .
                 .
              </ul>
          </li>
       </ul>
   </ul>
</ul>

EDIT: As I said, there is a lot of css that contributes to this but I will post a snippet:

.navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu {
  border: none;
  background: #2d2e2e;
  padding: 0px;
  border-radius: 0px;
  max-height: none !important;
}

.navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu.courses{
  overflow-y: auto !important;
}

Sonny Prince · Answer 1 · 2016-01-27T09:15:51.870

1

you should give the ul a max height of X pixels and apply overflow-y: scroll;.

edited Jan 27 '16 at 09:15

answered Jan 27 '16 at 09:09

Sonny Prince

1,094
7
15

1

That has the same problem. The scroll works fine, that's not the issue. It's that the sub-submenu items disappear when the scroll functionality is added. I think this is because the sub-submenu is nested in the courses submenu and therefore the css thinks it is part of the overflow. – David North Jan 27 '16 at 09:12
Could you post up the CSS? – Sonny Prince Jan 27 '16 at 09:15
I have added some css now. Even if I change the max-height to pixels, it works the same. As I said, it's not the scroll that is the problem it is that the overflow hides the nested menu items. – David North Jan 27 '16 at 09:22
I'm struggling to resolve the issue with the code supplied, could you create a codepen or fiddle with all of the code in? – Sonny Prince Jan 27 '16 at 09:32

score 1 · Answer 2 · answered Jan 27 '16 at 10:25

This will be awful UI and the UX wont be good either. But on that note you could add a container to the whole sub nav, give that a max-height of less than what you expect a browser to show and overflow scroll it. That way the whole nav will be opening in this element and will show the scroll bar - as you have your mouse pointer in there already you can just wheel the mouse to show further down items. As I said though you should consider a cleaner solution like mega menu style etc.

score 0 · Accepted Answer · answered Jan 27 '16 at 12:00

0

I used this to solve my problem, it's a jquery solution. https://css-tricks.com/long-dropdowns-solution/

It's not exactly what I was looking for but actually turned out to be more elegant than the scrollbar and I didn't have the nested menu problem.

answered Jan 27 '16 at 12:00

David North

437
1
4
17

Add scrollbar to menu item which has submenu items, without submenu items being hidden

3 Answers3