Is there a way to implement a sub-sub menu in my existing code structure?

Currently, I am immersed in the world of custom CSS and HTML as I strive to create a visually appealing website design. My goal is to establish a sub-sub menu within my navigation bar menus, but unfortunately, I am encountering difficulties in doing so. Specifically, I envision a "Services" option in the main menu, followed by a "Print Media" sub-menu under "Services," and further branching into "Option1", "Option2", "Option3", and "Option4" as sub-options under "Print Media."

The desired structure should resemble:

Services->PrintMedia->Option1;
                    ->Option2;
                    ->Option3;
                    ->Option4;
Services->ElectronicMedia->Option5;
                         ->Option6;
                         ->Option7;
                         ->Option7;

Furthermore, it is imperative that this layout remains responsive for optimal user experience.

Although I have made numerous attempts at implementing the code, my customized CSS presents obstacles hindering successful execution.

 <div class="navbar navbar-inverse" role="banner">
        <div class="container">
            (...)
        </div>
    </div>

CSS

/* Dropdown menu*/

(...)

The following code snippet aims to ensure responsiveness:

@media only screen and (min-width: 768px) {
    (...)
}

Services->PrintMedia->Option1;
                    ->Option2;
                    ->Option3;
                    ->Option4;

Services->ElectronicMedia->Option5;
                         ->Option6;
                         ->Option7;
                         ->Option7;

Answer №1

It appears that you are in need of a nested submenu. If that is the case, here is a solution for achieving this functionality. Source Skelly Codeply

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
  }
  var $subMenu = $(this).next(".dropdown-menu");
  $subMenu.toggleClass('show');
  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass("show");
  });
  return false;
});
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: -10rem;
  /* 10rem is the min-width of dropdown-menu */
  margin-top: -6px;
}


/* rotate caret on hover */

.dropdown-menu>li>a:hover:after {
  text-decoration: underline;
  transform: rotate(-90deg);
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand pb-2" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu wider text</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Submenu</a></li>
                <li><a class="dropdown-item" href="#">Submenu0</a></li>
                <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
                    <li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
                  </ul>
                </li>
                <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
                    <li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue with jspdf is that it is failing to generate PDF documents of

I'm currently developing a resume builder app using ReactJS. One of the functionalities I'm working on is enabling users to download their resumes as PDFs. However, I've encountered an issue with the generated PDFs when using jsPDF. The down ...

Adjust the header width and column alignment when freezing the header in a gridview interface

Looking to implement a gridview with a fixed header? I've tried various solutions including this link and this one. While I've managed to get it working, the main issue lies in the alignment of header width and column width. The scroll and freez ...

How to make Bootstrap 4 navbar tabs collapse using card accordion functionality

Check out this interactive example: https://jsfiddle.net/dominijk/bLpach25/1/ The accordion layout I have set up consists of collapsible cards where opening one card causes the others to collapse. The tabs within each card are functioning properly. My go ...

Embed an HTML element within a DIV container

How can I add an HTML tag such as <p> to wrap around the text "Search"? <button id="ihf-quicksearch-submit2" class="btn btn-lg btn-block btn-primary btn-form-submit ihf-main-search-form-submit" type="submit"> Search </button> I am looki ...

Leverage API providing HTML and JavaScript exclusively using PHP script

Seeking a way to automate the conversion process from HTML to PNG using a PHP script with a REST API. The website only provides an example using HTML and JavaScript, allowing users to upload an HTML file for conversion. My PHP script currently generates H ...

Converting HTML Content into Json Data

When trying to update the content area on my website without refreshing the entire page, I encountered difficulties in pulling data from a JSON file. Despite attempts at using AJAX and conducting research on JSON and AJAX techniques, I was unable to succes ...

How can I position text below a ticked checkbox?

Having an issue with my HTML and jQuery code. Everything is working fine, but when I click on a checkbox, the text "FINISHED" appears below all checkboxes instead of just the one I clicked on. This is my html code: $('.label__checkbox').cli ...

What is the best way to arrange these containers in a horizontal stack?

Check out the code snippet at: https://codepen.io/shayaansiddiqui/pen/YzGzeOj I'm looking to align these boxes horizontally, how can I achieve that? <div> <div class="container"> <img src="#" ...

jQuery Mobile - Struggling to hide a button with traditional jQuery techniques

Looking for help hiding a simple button? <input type="button" id="logoutBtn" value="logout" data-theme="d" data-inline="true" aria-disabled="false"> Attempted to hide it with this code but it didn't work: $('#logoutBtn').hid ...

The scroll-to-top button refuses to fade out

I am currently facing a challenge with my scroll to top button not functioning properly. It seems like there is an issue arising from another animation that I can't seem to pinpoint. Specifically, when the other animation is triggered at "scroll hits ...

Modifying one input can impact other input elements without any form of direct connection between them

Below is the HTML code snippet: <tr *ngFor="let row of formData; let i = index" [attr.data-index]="i"> <td *ngFor="let rowdata of formData[i]; let j = index" [attr.data-index]="j"> <input type="checkbox" name="row-{{i}}-{{j}}" [ ...

Is it possible to include a hidden default option that provides a description for my `select` tag?

Can someone help me create a description for the select tag that won't show up in the drop-down options? I remember seeing this done somewhere, but I can't recall where. Any suggestions? This is what I am trying to achieve: <fieldset> ...

` `CSS hover effect not displaying``

I am struggling with a CSS menu that features drop downs. While I have experience building drop down menus and working with CSS hover effects in the past, this particular menu is proving to be quite challenging. After researching similar CSS :hover and CS ...

Do not apply hover effect to a particular child div when the hover effect is already applied to the parent

I am encountering a problem with the hover effect. I have 3 child div's structured as follows: <div class="parent"> <div class="child1">A</div> <div class="child2">B</div> <div class="child3">C</div ...

Is there a way to adjust the font color when the expiration date passes?

My goal is to change the color of text to green when the expiration date has not been reached yet. If the expiration date has passed, then the text should be red. .curentDate { color: rgb(54, 168, 54) } .expirationDate{ color: red; } <div cl ...

Tips for transferring variables between different variables

I'm having trouble transferring the value from a declared variable into another variable. I'm not sure about the correct syntax. Currently, in the code below, the <span id="xevalue1"></span> in my HTML returns nothing, i.e., blank. H ...

Performing addition operations on numbers entered through an HTML input field using PHP

I am looking to create a feature where the numbers entered in an input form are added together. I need to store these numbers in an array and have them display in a new line when a button is clicked. Here is the HTML code for the input field and button: ...

Issue with variable creation within ng-repeat

After reading a question on StackOverflow about determining the number of filtered out elements, I wrote the following code in Angular: <input type="text" ng-model="query" placeholder="Enter query..."> <div ng-if="filteredData.length!=data.length ...

Move your cursor over the image to activate the effect, then hover over it again to make the effect disappear

Looking to enhance my images with hover effects. Currently, all the images are in grayscale and I'd like to change that so that when you hover over an image, it reverts to full color and remains that way until hovered over again. I've noticed so ...

The style from '<URL>' was not applied as it has a MIME type of 'text/html', which is not a compatible stylesheet MIME type

After attempting to run the angular application with the home component, an error appeared stating that styles were refused and images could not be found. It's puzzling because the CSS and image folder are located in the /src/assets folder. I have tr ...