Hi I want use submenu for Structure institut and Header institut When I click Header institut show Library and Scientific consul in submenu else click Structure institut show Since and Monitoring Output resultMain pageControl institut Structure institutSince Monitoring Header institutLibrary Scientific consul ltDOCTYPE htmlgtlthtml lang34en34gtltheadgtltmeta charset34utf834gtltmeta httpequiv34XUACompatible34 content34IE9 IE8 IE7 IEEDG

Hi PRACheck this example Now please take its reference and correct your codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt ltmeta charset34utf834gt ltmeta httpequiv34XUACompatible34 content34IE9 IE8 IE7 IEEDGE34gt ltmeta name34viewport34 content34widthdevicewidth initialscale134gt lttitlegtlttitlegt ltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap337cssbootstrapmincss34gt ltscript type34textjscript34 src34httpsajaxgoogleapiscomajaxlibsjquery331jqueryminjs34gtltscriptgt ltscript type34textjscript34 src34httpsmaxcdnbootstrapcdncombootstrap337jsbootstrapminjs34gtltscriptgt ltstyle type34textcss34gt dropdownsubmenu position relative dropdownsubmenu dropdownmenu

Multi Level Bootstrap DropDown menu with Submenu using HTML and CSS

PRA

SOLVED CLOSED ACTIVE ANSWERED
User: PRA
Posted: on Apr 02, 2018 07:08 AM
Forum: HTML and CSS
Answer: 1
Views: 15817
Sample Code: Download

Hi! I want use submenu for Structure institut and Header institut. When I click Header institut show Library and Scientific consul in submenu else click Structure institut show Since and Monitoring. Output result:

Main page	Control institut
	Structure institut	Since
		Monitoring
	Header institut	Library
		Scientific consul

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" >
  <div class="row">
    <div class="col-md-12">
      <nav class="navbar navbar-default " role="navigation" style="z-index: 1000; background-color: #325c94;">
        <div class="container" >
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left" style="z-index: 1000;">
              <li class="dropdown">
                <a href="#" style="color: white;">Main page</a>
                <ul>
                   
                </ul>
              </li>      
              <li class="dropdown">
                <a href="#" style="color: white;" class="dropdown-toggle" data-toggle="dropdown">Control institut <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Structure institut</li>
                <li><a href="#">Header institut</a></li>
              </ul></li>
             </ul>
          </div>
        </div>     
      </nav>
    </div>
  </div>
</div>
</body>
</html>

Who is you can help me?

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Apr 03, 2018 03:13 AM
Report

Hi PRA,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/jscript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/jscript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .dropdown-submenu
        {
            position: relative;
        }
        
        .dropdown-submenu .dropdown-menu
        {
            top: 0;
            left: 100%;
            margin-top: -1px;
        }
    </style>
    <script type="text/jscript">
        $(document).ready(function () {
            $('.dropdown-submenu a.test').on("click", function (e) {
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-default " role="navigation" style="z-index: 1000; background-color: #325c94;">
                    <div class="container" >
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                          <span class="sr-only"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                      </button>
                      <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-left" style="z-index: 1000;">
                          <li class="dropdown">
                            <a href="#" style="color: white;">Main page</a>
                            <ul>
                    
                            </ul>
                          </li>     
                          <li class="dropdown">
                            <a href="#" style="color: white;" class="dropdown-toggle" data-toggle="dropdown">Control institut <b class="caret"></b></a>
                             <ul class="dropdown-menu">
                                <li class="dropdown-submenu"><a class="test" tabindex="-1" href="#">Structure institut<span
                                    class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a tabindex="-1" href="#">Since</a></li>
                                        <li><a tabindex="-1" href="#">Monitoring</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown-submenu"><a class="test" tabindex="-1" href="#">Header institut<span
                                    class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a tabindex="-1" href="#">Library</a></li>
                                        <li><a tabindex="-1" href="#">Scientific consul</a></li>
                                    </ul>
                                </li>
                            </ul>
                          </li>
                         </ul>
                      </div>
                    </div>    
              </nav>
            </div>
        </div>
    </div>
</body>
</html>

Demo

Multi Level Bootstrap DropDown menu with Submenu using HTML and CSS

Company

Explore

Follow us

Contact Us