Necesito agregar una barra de desplazamiento a la lista del menú de cursos (vea la imagen a continuación). Hay demasiados cursos y, por lo tanto, pasa el pliegue de la página. La barra de navegación superior está fija y, por lo tanto, desplazarse por la página no ayuda.

Cuando agrego el css:

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

El ul de los módulos del curso no se muestra (es decir, el módulo de orientación en la imagen de ejemplo a continuación). Supongo que esto se debe a que el submenú está anidado en el ul que tiene overflow-y: auto y, por lo tanto, no se muestra. ¿Cómo soluciono este problema de agregar una barra de desplazamiento al submenú de cursos pero con los elementos del submenú del curso no ocultos? Cualquier solución está bien, css, jquery, etc.

El HTML y el CSS son bastante excesivos, ya que están integrados en Moodle, por lo que están sucediendo muchas cosas. La estructura básica de HTML es la siguiente:

<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>

EDITAR: Como dije, hay mucho CSS que contribuye a esto, pero publicaré un fragmento:

.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;
}

add scroll to menu

3
David North 27 ene. 2016 a las 12:05

3 respuestas

La mejor respuesta

Usé esto para resolver mi problema, es una solución de jquery. https://css-tricks.com/long-dropdowns-solution/

No es exactamente lo que estaba buscando, pero en realidad resultó ser más elegante que la barra de desplazamiento y no tuve el problema del menú anidado.

0
David North 27 ene. 2016 a las 12:00

Debe darle a ul una altura máxima de X píxeles y aplicar overflow-y: scroll;.

1
Sonny Prince 27 ene. 2016 a las 09:15

Esta será una interfaz de usuario horrible y la UX tampoco será buena. Pero en esa nota, podría agregar un contenedor a toda la navegación secundaria, darle una altura máxima de menos de lo que espera que muestre un navegador y desplazarse por él. De esa manera, toda la navegación se abrirá en este elemento y mostrará la barra de desplazamiento; como ya tiene el puntero del mouse allí, puede simplemente girar el mouse para mostrar los elementos más abajo. Como dije, debería considerar una solución más limpia como el estilo de mega menú, etc.

1
Jamie Paterson 27 ene. 2016 a las 10:25