Problem/Motivation

I have copied and customized the menu--responsive-v.html.twig, all goes well, except that I have not been able to figure out how to keep the menu expanded after clicking on the link, for it to be visible while browsing the called page on click.

I add a video to try to better illustrate what I'm talking about, in case I do not explain myself clearly enough....

Thank you....

CommentFileSizeAuthor
#5 drupal8_w3css_subtheme.zip36.16 KBflashwebcenter
#5 side-bar-nav.mov40.14 MBflashwebcenter
#3 EVM.mp44.03 MBandrés chandía
keepexpanded.mp42.02 MBandrés chandía

Comments

Andrés Chandía created an issue. See original summary.

flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
commented
Status: Active » Fixed

Hello,
You can use the active class to maintain the sub-menu open:
First add this to a sub-theme

    Drupal.behaviors.addClassToParentUl = {
        attach: function (context, settings) {
            $('ul li.active', context).each(function () {
                $(this).closest('ul').addClass('active');
            });
        }
    };

Then you can use some CSS to expand the UL.
nav ul.active {display: Block;}

Best wishes,
Alaa

andrés chandía’s picture

andrés chandía commented
StatusFileSize
new EVM.mp44.03 MB

Choukran Alaa, it works but it also has a weird behaviour, I can not click on the next menu which is just under the selected menu, the others are clickable. I add a video (EVM.mp4) for you to see what I'm talking about...

By the way, I have added your function code in this file: "drupal8_w3css_subtheme/js/d8w3css-subtheme-script.js"

And the css code in the file I've created to control the menu: "templates/navigation/menu--labelling-system.html.twig"

tnx!

andrés chandía’s picture

andrés chandía commented
Status: Fixed » Active
flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
commented
Component: Miscellaneous » Code
Assigned: Unassigned » flashwebcenter
Status: Active » Fixed
Issue tags: +sidebar
StatusFileSize
new side-bar-nav.mov40.14 MB
new drupal8_w3css_subtheme.zip36.16 KB

Hello,
Here is the js and css for the sidebar menu.

  Drupal.behaviors.addClassToParentUl = {
    attach: function (context, settings) {
      $('.ul-responsive-v ul li.active', context).each(function () {
        var $closestUl = $(this).closest('ul');

        // Add 'active' and 'show' classes if not present
        if (!$closestUl.hasClass('active')) {
          $closestUl.addClass('active');
        }
        if (!$closestUl.hasClass('show')) {
          $closestUl.addClass('show');
        }
      });
    }
  };
.page-wrapper div.ul-responsive-v,
.page-wrapper div.ul-responsive-v ul {
  width: 100%;
  background: #fffefa;
}

.page-wrapper div.ul-responsive-v ul.active > li.active > a {
  font-weight: bold;
}

.page-wrapper div.ul-responsive-v ul.active,
.page-wrapper .ul-responsive-v ul.ul-parent li.active.li-expanded:hover > ul,
.page-wrapper .ul-responsive-v ul.ul-parent li.active.li-expanded > ul > li.active.li-expanded:hover > ul {
  display: block;
}

.page-wrapper .ul-responsive-v ul.ul-parent li .active.li-expanded:hover ul {
  left: auto;
}

.page-wrapper div.ul-responsive-v ul.active:hover {
  display: block !important;
  opacity: 1 !important
}

.page-wrapper div.ul-responsive-v .ul-parent .li-expanded:hover > ul {
  opacity: 1 !important;
}

Here is a video for the menu Sidebar
Here is the sub-theme with everything. Sub Theme

Best wishes,
Alaa

andrés chandía’s picture

andrés chandía commented

Superb!!!
Thanks as always great master!!

I just had to add a couple of details to make fit width of background colour in some menus

.page-wrapper div.ul-responsive-v ul.active > li.active > a {
  font-weight: bold;
  width: 100%; /* this one added */
}

li.li-expanded:nth-child(4) > a:nth-child(1), li.li-expanded:nth-child(5) > a:nth-child(1) { width: 100%; } /* this one added */

For the second line added, it was the only way I could make it work....

Thanks again

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

flashwebcenter’s picture

flashwebcenter
he/him
Primary language English
Location Austin TX
commented