Exclusive Orchard multi-level dropdown feature triggered only by clicking

Question

Exclusive Orchard multi-level dropdown feature triggered only by clicking

My current project involves working with Orchard on a Bootstrap-based theme. The CSS code for the menu navigation is functioning properly when hovering over the second level menu.

.dropdown-menu .dropdown-menu {
  left: 100% !important;
  top: 0;
}

.dropdown .dropdown:hover > .dropdown-menu,
.dropdown .dropdown .dropdown:hover > .dropdown-menu,
.dropdown .dropdown .dropdown .dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu i {
  line-height: 1.42857143;
}

I now want to modify the drop-down menu so that all levels open only on click, as this feature currently does not work on touch-based devices. When I change ':hover' to ':focus', everything closes when the second-level 'nav-bar' is clicked. I am not very experienced in HTML/CSS coding, so I am uncertain about how this operates. I assume 'dropdown' is the name of the 'ul' class and 'dropdown-menu' signifies the 'div' where the menu is located, but since all the code is generated automatically, I may be mistaken. Additionally, I apologize for any language barriers. Thank you.

html css twitter-bootstrap razor orchardcms

Answer 1

Answer №1

In this specific example, it is evident that :focus does not function as expected due to the limitations of CSS3. Unlike :hover, which allows for bubbling, :focus only targets one element and lacks memory.

To address this issue, a workaround involving radio buttons with the :checked selector and adjacent combinator (A + B) can be implemented.

For reference, check out: http://codepen.io/HerrSerker/pen/obWBVG

The approach involves hiding the radio buttons and leveraging labels for functionality:

nav ul label {
  display: block;
}
nav ul > li > label > input:checked + ul {
  display: block;
}
nav ul.lvl-2 {
  display: none;
}

<nav>
  <ul class="lvl-1">
    <li>
      <label for="id-lvl1-01">
        <input type="radio" name="lvl-1" id="id-lvl1-01" />1
        <ul class="lvl-2">
          <li>
            <label for="id-lvl2-01-01">
              <input type="radio" name="lvl-1-1" id="id-lvl2-01-01" />01</label>
          </li>
          <li>
            <label for="id-lvl2-01-02">
              <input type="radio" name="lvl-1-1" id="id-lvl2-01-02" />02</label>
          </li>
        </ul>
      </label>
    </li>
    <li>
      <label for="id-lvl1-02">
        <input type="radio" name="lvl-1" id="id-lvl1-02" />2
        <ul class="lvl-2">
          <li>
            <label for="id-lvl2-02-01">
              <input type="radio" name="lvl-1-2" id="id-lvl2-02-01" />01</label>
          </li>
          <li>
            <label for="id-lvl2-02-02">
              <input type="radio" name="lvl-1-2" id="id-lvl2-02-02" />02</label>
          </li>
        </ul>
      </label>
    </li>
  </ul>
</nav>

Answer 2

In this specific example, it is evident that :focus does not function as expected due to the limitations of CSS3. Unlike :hover, which allows for bubbling, :focus only targets one element and lacks memory.

To address this issue, a workaround involving radio buttons with the :checked selector and adjacent combinator (A + B) can be implemented.

For reference, check out: http://codepen.io/HerrSerker/pen/obWBVG

The approach involves hiding the radio buttons and leveraging labels for functionality:

nav ul label {
  display: block;
}
nav ul > li > label > input:checked + ul {
  display: block;
}
nav ul.lvl-2 {
  display: none;
}

<nav>
  <ul class="lvl-1">
    <li>
      <label for="id-lvl1-01">
        <input type="radio" name="lvl-1" id="id-lvl1-01" />1
        <ul class="lvl-2">
          <li>
            <label for="id-lvl2-01-01">
              <input type="radio" name="lvl-1-1" id="id-lvl2-01-01" />01</label>
          </li>
          <li>
            <label for="id-lvl2-01-02">
              <input type="radio" name="lvl-1-1" id="id-lvl2-01-02" />02</label>
          </li>
        </ul>
      </label>
    </li>
    <li>
      <label for="id-lvl1-02">
        <input type="radio" name="lvl-1" id="id-lvl1-02" />2
        <ul class="lvl-2">
          <li>
            <label for="id-lvl2-02-01">
              <input type="radio" name="lvl-1-2" id="id-lvl2-02-01" />01</label>
          </li>
          <li>
            <label for="id-lvl2-02-02">
              <input type="radio" name="lvl-1-2" id="id-lvl2-02-02" />02</label>
          </li>
        </ul>
      </label>
    </li>
  </ul>
</nav>

Exclusive Orchard multi-level dropdown feature triggered only by clicking

Answer №1

Similar questions

Eliminate any empty spaces between the HTML tags

How to integrate half-star ratings in Ionic

Initialization of webix combo options values in HTML code

What is the best way to prevent my form from saving empty values to the database?

Create a React MUI component that allows menu items to become sticky when selected

Cannot adjust Span content with JQuery

Tips for adjusting the maximum height of the column panel within the DataGrid element

Issue with Async pipe when utilizing autocomplete functionality

Determine the position of an object within an array using jQuery or JavaScript

What is the process for including id parameters within the URL of an HTML page?

Is it a wise choice to implement frames in AngularJS?

Tips for organizing components in jQuery Mobile

Transfer data from a selection list in an HTML document to a Google Apps Script function and then dynamically update another selection

How can CSS be used to prevent line breaks between elements in a web page?

Using the 'get' command to read a text file locally in JavaScript

Discovering the Javascript Code Executing on a <span> element with the Help of Chrome Inspector or Firebug

What steps are involved in setting up a dropdown side navbar?

align a pair of HTML elements

Is there a way to deactivate a specific JQuery function with a click of a button, while still having it enabled by default?

Having trouble getting the jquery tabify plugin to work properly