Warm tip: This article is reproduced from stackoverflow.com, please click
bootstrap-4 css html navbar

How i can get sub-sub menu in my current code?

发布于 2020-03-27 10:21:42

I am working on customized css and html to design a website. I want to create sub-sub menu in my nav bar menus although i am not able to do that. Like I want a "Services" as an option in main menu and after then "Print Media" as a sub menu of "Services" and after then "Option1" "Option2" "Option3" "Option4" as sub-sub-menu of "Print Media"

Structure should look like:

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

and i want to make it responsive..!

I have tried many possible things but due to my customized CSS i am not able to implement the code as it is. 

 <div class="navbar navbar-inverse" role="banner">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="index.html">
                    <h1><img src="images/press-monitor.png" alt="Press Monitor" width="40%" height="auto"></h1>
                </a>

            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li class="dropdown"><a href="#">Pages <i class="fa fa-angle-down"></i></a>
                        <ul role="menu" class="sub-menu">
                            <li><a href="aboutus.html">About</a></li>
                            <li><a href="aboutus2.html">About 2</a></li>
                            <li><a href="service.html">Services</a></li>                    
                            <li><a href="pricing.html">Pricing</a></li>
                            <li><a href="contact.html">Contact us</a></li>
                            <li><a href="contact2.html">Contact us 2</a></li>
                            <li><a href="404.html">404 error</a></li>
                            <li><a href="coming-soon.html">Coming Soon</a></li>
                        </ul>
                    </li>                    
                    <li class="dropdown"><a href="blog.html">Blog <i class="fa fa-angle-down"></i></a>
                        <ul role="menu" class="sub-menu">
                            <li><a href="blog.html">Blog Default</a></li>
                            <li><a href="blogtwo.html">Timeline Blog</a></li>
                            <li><a href="blogone.html">2 Columns + Right Sidebar</a></li>
                            <li><a href="blogthree.html">1 Column + Left Sidebar</a></li>
                            <li><a href="blogfour.html">Blog Masonary</a></li>
                            <li><a href="blogdetails.html">Blog Details</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="portfolio.html">Portfolio <i class="fa fa-angle-down"></i></a>
                        <ul role="menu" class="sub-menu">
                            <li><a href="portfolio.html">Portfolio Default</a></li>
                            <li><a href="portfoliofour.html">Isotope 3 Columns + Right Sidebar</a></li>
                            <li><a href="portfolioone.html">3 Columns + Right Sidebar</a></li>
                            <li><a href="portfoliotwo.html">3 Columns + Left Sidebar</a></li>
                            <li><a href="portfoliothree.html">2 Columns</a></li>
                            <li><a href="portfolio-details.html">Portfolio Details</a></li>
                        </ul>
                    </li>                         
                    <li><a href="shortcodes.html ">Shortcodes</a></li>                    
                </ul>
            </div>
            <div class="search">
                <form role="form">
                    <i class="fa fa-search black"></i>
                    <div class="field-toggle">
                        <input type="text" class="search-form" autocomplete="off" placeholder="Search">
                    </div>
                </form>
            </div>
        </div>
    </div>

CSS

/* Dropdown menu*/

ul.sub-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

#header .navbar-nav li ul.sub-menu li a{
  color: #818285;
  padding: 5px 0;
  font-size: 13px;
  display: block;
  text-transform: capitalize;
}

#header .navbar-nav li ul.sub-menu li .active{
  background: #00aeef;
  color: #fff;
  position: relative;
}

#header .navbar-nav li ul.sub-menu li .active i{
  position: absolute;
  font-size: 56px;
  top: -13px;
  color: #0884d5;
}

#header .navbar-nav li ul.sub-menu li .active .fa-angle-right{
  left: -3px;
}

#header .navbar-nav li ul.sub-menu li .active .fa-angle-left{
  right: -3px;
}

#header .navbar-nav li ul.sub-menu li a:hover,
#header .navbar-nav li ul.sub-menu li a:focus{
  background: #c80000 ;
  color: #fff;
}

and this is to make it responsive

@media only screen and (min-width: 768px) {
    .nav.navbar-nav>li:hover>ul.sub-menu {
        display: block;
        -webkit-animation: fadeInUp 400ms;
        animation: fadeInUp 400ms;
    }
    .nav.navbar-nav>li:hover>ul.sub-sub-menu {
        display: block;
        -webkit-animation: fadeInUp 400ms;
        animation: fadeInUp 400ms;
    }
    ul.sub-menu {
        position: absolute;
        top: 60px;
        left: 0;
        background: #fff;
        padding: 10px 0;
        width: 240px;
        -webkit-box-shadow: none;
        box-shadow: none;
        display: none;
        z-index: 999;
        border: 1px solid #c80000;
    }

        ul.sub-sub-menu {
        position: absolute;
        top: 60px;
        left: 60px;
        background: #fff;
        padding: 10px 0;
        width: 240px;
        -webkit-box-shadow: none;
        box-shadow: none;
        display: none;
        z-index: 999;
        border: 1px solid #c80000;
    }
    #header .navbar-nav li ul.sub-menu li a {
        padding-left: 20px;
    }
}


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

Services->ElectronicMedia->Option5;
                         ->Option6;
                         ->Option7;
                         ->Option7;
Questioner
Hammad Khan
Viewed
112
分享
Sai Manoj 2019-07-03 23:47

As per my understanding, you are looking for nested submenu. If, yes below is the solution for same. 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>
Hammad Khan 2019-07-05 19:11:58

I really appreciate your help Manjo. But as i have shared my all over code i want someone to edit in my code as i am not able to implement the changes in my current code. If you are ready to help me i can share you the whole css and html files.

Related issues

1
CSS: background image on background color
2
Create loading messages that will change based on loading time of plot in a shiny app
3
CSS selector of inner elements
4
Hiding the background in an iframe that belongs to a different domain with css
5
How to define a font size that scales with browser zoom level?
6
rounded-borders
7
p tag within a div affecting the adjacent div's position
8
Dropdown Nav Menu Appears on Right and Stacked Horizontally
9
Why is my getting cut off when resizing window?
10
How to get bootstrap to take whole screen