Created on 20 July 2017, over 7 years ago
Updated 27 June 2024, 6 months ago

It appears from the documentation and the code that w3css has support for drop down menus. I have been trying to get this working without success. The situation is that I have a long menu listing photo albums and links to them that I put into the left sidebar. However, I'd like to sub-group them with first and second level menus where you could hover or click on the first level to expose the second level links. The secret to this seems to be in block configuration to have the number of levels to display set to 2 (for my situation, just trying for a two level menu) and then to have the menu itself set up with items and sub-items with the sub-items referencing the first level items.

It appears W3css "tries" to do this by inserting a "w3-dropdown-content" class in the menu output (from view page source) when the number of levels is set to 2. The same class is not inserted if number of levels is set to 1. Here is sample output for levels = 2:

 <ul class="w3-ul w3-menu-0-photo-galleries-__submenu w3-mobile w3-dropdown-content w3-card-2 w3-animate-bottom">
                          <li class="w3-bar-item w3-mobile w3-padding-0 w3-menu-photo-galleries-__item">
        <a href="/laguna2017" title="Laguna Beach 2017" class="w3-menu-photo-galleries-__link w3-bar w3-button" data-drupal-link-system-path="node/186">Laguna 2017</a>
              </li>
                      <li class="w3-bar-item w3-mobile w3-padding-0 w3-menu-photo-galleries-__item">
        <a href="/fitzmck" title="Fitz and Mackenna in 2017" class="w3-menu-photo-galleries-__link w3-bar w3-button" data-drupal-link-system-path="node/185">Fitz and Mackenna 2017</a>
              </li>
                      <li class="w3-bar-item w3-mobile w3-padding-0 w3-menu-photo-galleries-__item">
        <a href="/rhythm" title="Rhythm Collision 2017 Riverside CA." class="w3-menu-photo-galleries-__link w3-bar w3-button" data-drupal-link-system-path="node/182">Rhythm Collision 2017 Riverside CA.</a>
              </li>

... I spared repeating additional list items.

and the same ul when number of levels is set to 1:

<ul  class="w3-ul w3-bar w3-mobile w3-menu-photo-galleries-">
                          <li class="w3-bar-item w3-mobile w3-padding-0 w3-menu-photo-galleries-__item w3-menu-photo-galleries-__item--collapsed w3-menu-photo-galleries-__item--active-trail">
        <a href="/home" title="Photos from California and Laguna Beach trips" class="w3-menu-photo-galleries-__link w3-bar w3-button" data-drupal-link-system-path="node/108">Laguna and California </a>
              </li>
        </ul>

So somewhere in its code W3CSS is detecting that a w3-dropdown-content class is needed for the two level situation. However, the results upon display only show one level (i.e., not the list items themselves) no matter how the block and menu are set up.

Is there anything else needed to get this working?

πŸ’¬ Support request
Status

Fixed

Version

1.6

Component

User interface

Created by

πŸ‡ΊπŸ‡ΈUnited States fkelly

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024