angular mega menu drop down not working in mobile


Topic: angular mega menu drop down not working in mobile

phaninani asked 5 years ago

SIR I AM USING MSB MEGA MENU FOR MY WEB APP ...SO DROP DOWN IS NOT WORKING IN MOBILE VIEW PLEASE HELP ME ITS VERY URGENT FOR US .... I THINK THE ISSUE IS DUE TO ROUTERLINK

-->

<!-- Navbar brand -->
<mdb-navbar-brand class="img2">
  <a routerLink='/'>  
<img src="assets/log.png" class="img3">

<links>
<!-- Links -->
<ul class="navbar-nav mr-auto nv1">

  <li class="nav-item dropdown mega-dropdown" mdbDropdown>
    <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
      aria-expanded="false" routerLink='/bsm'>Business Service<br> Management</a>
    <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
      <div class="row mx-md-4 mx-1">
        <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-5 mb-4">
          <a routerLink='/itoptimisation'>
          <h6 class="sub-title text-uppercase font-weight-bold white-text">IT OPTIMISATION</h6>
        </a>
          <ul class="list-unstyled">
            <li class="">
              <a class="menu-item pl-0" routerLink='/health'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> HEALTH MONITORING
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/servicemodeling'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SERVICE MODELING
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/customerexperience'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CUSTOMER EXPERIENCE
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/softwarelicense'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SOFTWARE LICENSE MANAGEMENT
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" href="" routerLink='/servicelevel'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SERVICE LEVEL ANALYTICS
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" href="" routerLink='/servicelevel'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SERVICE 
              </a>
            </li>
          </ul>
        </div>
        <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
            <a routerLink='./itservice'>
          <h6 class="sub-title text-uppercase font-weight-bold white-text">IT SERVICE MANAGEMENT</h6>
          </a>
          <ul class="list-unstyled">
            <li class="">
              <a class="menu-item pl-0" routerLink='/selfservice'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>SELF SERVICE SUPPORT
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/incident' style="text-align: justify">
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>
                INCIDENT AND PROBLEM  MANAGEMENT
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/change'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>CHANGE AND RELEASE
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/cmdb'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>CMDB
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/itasset'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> IT ASSET
              </a>
            </li>
            <li class="">
                    <a class="menu-item pl-0" routerLink='/servicelevelm'>
                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SERVICE-LEVEL MANAGEMENT
                    </a>
                  </li>
          </ul>
        </div>
        <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
            <a routerLink='/itoperations'>
          <h6 class="sub-title text-uppercase font-weight-bold white-text">IT OPERATIONS</h6>
        </a>
          <ul class="list-unstyled">
            <li class="">
              <a class="menu-item pl-0" routerLink='/manager'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> MANAGER OF MANAGERS
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/servicemodeling1'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SERVICE MODELING 
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/proactive'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> PROACTIVE PERFORMENCE MANAGEMENT

              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/system'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SYSTEM MONITORING
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/capacity'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CAPACITY MANAGEMENT
              </a>
            </li>
            <li class="">
                    <a class="menu-item pl-0" routerLink='/application'>
                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> APPLICATION PERFORMENCE MANAGEMENT
                    </a>
                  </li>
          </ul>
        </div>
        <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
          <a routerLink='/itprocess'>
               <h6 class="sub-title text-uppercase font-weight-bold white-text">IT PROCESS AUTOMATION</h6>
              </a>


                <ul class="list-unstyled">                     
                   <li class="">
                    <a class="menu-item pl-0" routerLink='/workload'>
                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> WORKLOAD & JOB SCHEDULING
                    </a>
                  </li>
                  <li class="">
                    <a class="menu-item pl-0" routerLink='/configuration'>
                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CONFIGURATION AUTOMATION
                      </a>
                  </li>
                  <li class="">
                    <a class="menu-item pl-0" routerLink='/processoptimisation'>
                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> PROCESS ORCHESTRATION
                    </a>
                  </li>
                  <li class="">
                    <a class="menu-item pl-0" href="">
                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> MANAGED FILE TRANSFER
                    </a>
                  </li>
                  </ul>
              </div>
        <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-5">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">ADVISORY SERVICES</h6>
          <ul class="list-unstyled">
            <li class="">
              <a class="menu-item pl-0" routerLink='/itsm'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>ITSM HELATHCHECK
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/softwarel'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SOFTWARE LICENSE MATURITY ASSESSMENT
              </a>
            </li>
            </ul>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item dropdown mega-dropdown" mdbDropdown>
    <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
      aria-expanded="false" routerLink='/im'>INFORMATION <br>MANAGEMENT</a>
    <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
      <div class="row mx-md-4 mx-1">

        <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
          <a routerLink='/informationmanagement'>
          <h6 class="sub-title text-uppercase font-weight-bold white-text">INFORMATION LIFECYCLE MANAGEMENT</h6>
        </a>
          <ul class="list-unstyled">
            <li class="">
              <a class="menu-item pl-0" routerLink='/retention'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> RETENTION,ARCHIVE & RETIREMENT
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/text'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>TEXT DATA MANAGEMENT
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/Enterprice'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> ENTERPRICE INFORMATION MANAGEMENT
              </a>
            </li>
            <li class="">
                <a class="menu-item pl-0" routerLink='/data'>
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATA MASKING
                </a>
              </li>
           </ul>
        </div>
        <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
          <a routerLink='/data1'>
          <h6 class="sub-title text-uppercase font-weight-bold white-text">DATA</h6>
        </a>
          <ul class="list-unstyled">
            <li class="">
              <a class="menu-item pl-0" routerLink='/visual'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> VISUAL ANALYTICS
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/datablending'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATA BLENDING
              </a>
            </li>
          </ul>
        </div>
        <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
          <a routerLink='/enterpricem'>
          <h6 class="sub-title text-uppercase font-weight-bold white-text">ENTERPRICE DATA MANAGEMENT</h6>
        </a>
          <ul class="list-unstyled">
            <li class="">
              <a class="menu-item pl-0" routerLink='/datagovernace'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATA GOVERNACE
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/datamigration'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATA MIGRATION
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/dataquality'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATA QUALITY

              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/integration'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> INTEGRATION
              </a>
            </li>
           </ul>
        </div>
        <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
          <a routerLink='/datao'>
          <h6 class="sub-title text-uppercase font-weight-bold white-text">DATA OPTIMISATION</h6>
        </a>
          <ul class="list-unstyled">
            <li class="">
              <a class="menu-item pl-0" routerLink='/databasevirualisation'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATABASE VIRTUALISATION
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/databasemonitoring'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATABASE MONITORING
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/databasedevlopment'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DEVELOPMENT AND DBA TOOLS
              </a> 
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/security'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SECURITY AND AUDIT
              </a>
            </li>
           </ul>
        </div>
        <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">ADVISORY  SERVICES</h6>
          <ul class="list-unstyled">
            <li class="">
              <a class="menu-item pl-0" routerLink="/popidata">
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>DATA DISCOVERY ASSESSMENT
              </a>
            </li>
            <li class="">
                <a class="menu-item pl-0" routerLink="./popiact">
                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>COMPLIANCE ACT ASSESSMENT
                </a>
              </li>
            <li class="">
              <a class="menu-item pl-0" routerLink="./archive">
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> ARCHIVE VALUE ASSESSMENT
              </a>
            </li>


          </ul>
        </div>
         </div>
    </div>
  </li>
  <li class="nav-item dropdown mega-dropdown" mdbDropdown>
    <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
      aria-expanded="false">APPLICATION <br> MANAGEMENT</a>
    <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
      <div class="row mx-md-4 mx-1">
        <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">

          <ul class="list-unstyled">
            <li class="">
              <a class="menu-item pl-0"routerLink='/mobile'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Mobile Application Development
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/digital'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Digital service
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/custom'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Custom Software Development
              </a>
            </li>
            <li class="">
              <a class="menu-item pl-0" routerLink='/applicationout'>
                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Application Outsourcing
              </a>
            </li>

          </ul>
        </div>
        <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
          <h6 class="sub-title text-uppercase font-weight-bold white-text">Related</h6>
          <!--Featured image-->
          <div class="view overlay mb-3 z-depth-1">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/6-col/img%20(43).jpg" class="img-fluid"
              alt="First sample image">
            <div class="mask rgba-white-slight flex-center">
              <p></p>
            </div>
          </div>
          </div>
     </div>
    </div>
  </li>

  <li class="nav-item dropdown mega-dropdown" mdbDropdown>
        <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
          aria-expanded="false" routerLink='/Imo'>Infrastructure <br> & Operations</a>
        <div class="dropdown-menu mega-menu v-2 row z-depth-1 black">
          <div class="row mx-md-4 mx-1">
            <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-5 mb-4">
              <a routerLink='/nextgen'>
                <h6 class="sub-title text-uppercase font-weight-bold white-text">NEXT GEN DATACENTER</h6>
              </a>
              <ul class="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" routerLink='/applicationdelivappery'>
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> APPLICATION DELIVERY CONTROLLERS
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" routerLink='/unified'>
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> UNIFIED TRAFFIC VISIBILITY
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" routerLink='/softwaredefined'>
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SOFTWARE DEFINED STORAGE
                  </a>
                </li>
                </ul>
            </div>
            <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
              <a routerLink='/storage'>
              <h6 class="sub-title text-uppercase font-weight-bold white-text">STORAGE OPTIMISATION</h6>
            </a>
              <ul class="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" routerLink='/storagemanagement'>
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> STORAGE MANAGEMENT
                  </a>
                </li>
            </ul>
            </div>
            <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
              <a routerLink='/virtualisation'>
              <h6 class="sub-title text-uppercase font-weight-bold white-text">VIRTUALISATION SYSTEM</h6>
            </a>
              <ul class="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" routerLink='/operations'>
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> OPERATIONS
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" routerLink='/migration'>
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> MIGRATION BACKUP & RECOVERY
                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" routerLink='/virualdesktop'>
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> VIRTUAL DESKTOP

                  </a>
                </li>
                <li class="">
                  <a class="menu-item pl-0" routerLink='/securityvirtual'>
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SECURITY FOR VIRTUAL SYSTEMS
                  </a>
                </li>
              </ul>
            </div>
            <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
              <a routerLink='/microsoftinfrastructure'>
                <h6 class="sub-title text-uppercase font-weight-bold white-text">MICROSOFT INFRASTRUCTURE</h6>
              </a>
                <ul class="list-unstyled">
                  <li class="">
                    <a class="menu-item pl-0" routerLink='/msactive'>
                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>MS ACTIVE DIRECTORY
                    </a>
                  </li>
                  <li class="">
                    <a class="menu-item pl-0" routerLink='/msexchange'>
                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>  MS EXCHANGE
                    </a>
                  </li>
                  <li class="">
                    <a class="menu-item pl-0" routerLink='/softwared'>
                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SOFTWARE DEVELOYMENT

                    </a>
                  </li>
                  <li class="">
                    <a class="menu-item pl-0" routerLink='/windowsmigration'>
                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> WINDOWNS MIGRATION
                    </a>
                  </li>
                </ul>
              </div>
              <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
                  <h6 class="sub-title text-uppercase font-weight-bold white-text">ADVISORY SERVICES</h6>
                  <ul class="list-unstyled">
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/groupwise'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> GROUPWISE TO EXCHANGE MIGRATION
                      </a>
                    </li>
                    </ul>
                </div>
              </div>
        </div>
      </li>
      <li class="nav-item dropdown mega-dropdown" mdbDropdown>
            <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
              aria-expanded="false" routerLink='/its'>IT RISK <br> & SECURITY</a>
            <div class="dropdown-menu mega-menu v-2 row z-depth-1 black">
              <div class="row mx-md-4 mx-1">
                <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-5 mb-4">
                  <a routerLink='/securityoperations'>
                  <h6 class="sub-title text-uppercase font-weight-bold white-text">SECURITY OPERATIONS</h6>
                </a>
                  <ul class="list-unstyled">
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/managed'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> MANAGED SECURITY SERVICES
                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/seurityintelligence'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> SECURITY INTELLIGENCE
                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='changedconfi'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CHANGE AND CONFIGURATION COMPLIANCE
                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerlink='/vulnerbiltymanagement'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> VULNERBILITY MANAGEMENT
                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/threat'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>THREAT MANAGEMENT AND MODELLING
                      </a>
                    </li>
                    <li class="">
                        <a class="menu-item pl-0" routerLink='/psm'>
                          <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>PSMPAM
                        </a>
                      </li>

                  </ul>
                </div>
                <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-md-5 mt-4 mb-4">
                  <a routerLink='/networksecurity'>
                  <h6 class="sub-title text-uppercase font-weight-bold white-text">NETWORK SECURITY</h6>
                </a>
                  <ul class="list-unstyled">
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/cyber'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CYBER ATTACK MITIGATION
                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/vulnerbiltyassessment'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> VULNERBILITY ASSESSMENT
                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/internet'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> INTERNET SECURITY

                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/pentexting'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> PENTESTING
                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/intrusion'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>INTRUSION DETCECTION PREVENTION & SERVICES

                      </a>
                    </li>
                  </ul>
                </div>
                <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-4">
                  <a routerLink='/cloud'>
                  <h6 class="sub-title text-uppercase font-weight-bold white-text">CLOUD SERVICES</h6>
                </a>
                  <ul class="list-unstyled">
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/cloudmigration'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CLOUD MIGRATION
                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/cloudinteration'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> CLOUD INTERATION
                      </a>
                    </li>
                    <li class="">

                      <a class="menu-item pl-0"routerLink='/cloudsecurity'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>CLOUD SECURITY
                      </a>
                    </li>

                  </ul>
                </div>
                <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-5">
                  <a routerLink='/identity'>
                  <h6 class="sub-title text-uppercase font-weight-bold white-text">IDENTITY & ACCESS MANAGEMENT</h6>
                </a>
                  <ul class="list-unstyled">
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/identitya'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> INTEGRATED IDENTITY & ACCESS MANAGEMENT
                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/useractivity'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> USER ACTIVITY MANAGEMENT
                      </a>
                    </li>
                    <li class="">
                        <a class="menu-item pl-0" routerLink='/identityad'>
                          <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> IDENTITY ADMINISTARATION
                        </a>
                      </li>
                      <li class="">
                          <a class="menu-item pl-0" routerLink='/privilege'>
                            <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> PRIVILEGE ACCOUT MANAGEMENT
                          </a>
                        </li>
                        <li class="">
                            <a class="menu-item pl-0" routerLink='/dataloss'>
                              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> DATALOSS
                            </a>
                          </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/governacecompliance'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>GOVERNACE & COMPLIANCE

                      </a>
                    </li>
                    <li class="">
                      <a class="menu-item pl-0" routerLink='/compliance'>
                        <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> COMPLIANCE REPORTING
                      </a>
                    </li>

                  </ul>
                </div>
                <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-4 mb-5">
                    <h6 class="sub-title text-uppercase font-weight-bold white-text">ADVISORY SERVICE</h6>
                    <ul class="list-unstyled">
                      <li class="">
                        <a class="menu-item pl-0" routerLink='/phishingassessment'>
                          <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> PHISHING ASSESSMENT
                        </a>
                      </li>
                      <li class="">
                            <a class="menu-item pl-0" routerLink='/user'>
                          <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> USER ACTIVITY  REVIEW
                        </a>
                      </li>

                    </ul>
                  </div>

              </div>
            </div>
          </li>
          <li class="nav-item dropdown mega-dropdown" mdbDropdown>
                <a mdbDropdownToggle class="nav-link dropdown-toggle text-uppercase no-caret" aria-haspopup="true"
                  aria-expanded="false "routerLink='/da'>DATA <br> ANALYTICS</a>
                <div class="dropdown-menu mega-menu v-2 row z-depth-1 black">
                  <div class="row mx-md-4 mx-1">
                    <div class="col-md-6 col-xl-4 sub-menu my-xl-5 mt-5 mb-4">
                      <a routerLink='/datascience'>
                      <h6 class="sub-title text-uppercase font-weight-bold white-text">DATA SCIENCE</h6>
                      </a>
                      <ul class="list-unstyled">
                        <li class="">
                          <a class="menu-item pl-0" routerLink='/cyspace'>
                            <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>CySpace Methodologies
                          </a>
                        </li>
                        <li class="">
                            <a class="menu-item pl-0" routerLink="/services">
                              <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>Services
                            </a>
                          </li>
                          <li class="">
                              <a class="menu-item pl-0" routerLink='/analytics'>
                                <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>Data and analytics strategy
                              </a>
                            </li>
                            <li class="">
                                <a class="menu-item pl-0" routerLink='/datadiscovery'>
                                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>Data discovery and augmentation
                                </a>
                              </li>   
                              <li>      
                                <a class="menu-item pl-0" routerLink='/datamanagement'>
                                  <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>Data management
                                </a>
                              </li>
                              <li class="">
                                  <a class="menu-item pl-0" routerLink='/industrial'>
                                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>Industrialized solutions
                                  </a>
                                </li>
                                <li class="">
                                    <a class="menu-item pl-0" routerLink='/unique'>
                                      <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon>OUR UNIQUE RANGE OF BENEFITS:
                                    </a>
                                  </li>
                         </ul>
                    </div> 
                  </div>

                  </div>
                <!-- </div> -->
              </li>
</ul>




<!-- Search form -->
<!-- <form class="form-inline waves-light" mdbWavesEffect>
  <div class="md-form mt-0">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
  </div>
</form> -->
</links>
<!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->
A SAFE PLACE IN AN
UNSECURED WORLD
--> -->

Bartosz Termena staff commented 5 years ago

Hi!

Thank you for reporting the problem, we will take a closer look at that.

I will keep you updated.

Best, Bartosz.


Bartosz Termena staff answered 5 years ago

Dear @phaninani

Add the following function to your component class. It receives the event as parameter and calls the stopPropagation function on it.

stop(event: Event) {
        event.stopPropagation();
      }

Also, remove your 'parent' routerLinks from <a></a> to <li></li>

Below is my full example of mega menu with nestes routerLinks:

TS:

 @ViewChild('nav', { static: true }) nav: NavbarComponent;

  constructor(private renderer: Renderer2, private el: ElementRef, private router: Router) {}

  transformDropdowns() {
    const dropdownMenu = Array.from(this.el.nativeElement.querySelectorAll('.dropdown-menu'));
    const navHeight = this.nav.navbar.nativeElement.clientHeight + 'px';

    dropdownMenu.forEach(dropdown => {
      this.renderer.setStyle(dropdown, 'transform', `translateY(${navHeight})`);
    });
  }

  @HostListener('click', ['$event'])
  onClick(event: any) {
    const toggler = this.el.nativeElement.querySelector('.navbar-toggler');
    const togglerIcon = this.el.nativeElement.querySelector('.navbar-toggler-icon');
    if (event.target === toggler || event.target === togglerIcon) {
      console.log('test');
      setTimeout(() => {
        this.transformDropdowns();
      }, 351);
    }
  }

  @HostListener('document:scroll', ['$event'])
  onScroll() {
    this.transformDropdowns();
  }

  @HostListener('window:resize', ['$event'])
  onResize() {
    this.transformDropdowns();
  }

  ngAfterViewInit() {
    this.transformDropdowns();
  }
  stop(event: Event) {
    event.stopPropagation();
  }

HTML

<mdb-navbar #nav SideClass="navbar navbar-expand-lg navbar-dark special-color-dark">
  <mdb-navbar-brand>
    <a class="navbar-brand" href="#">Navbar</a>
  </mdb-navbar-brand>

  <links>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown mega-dropdown" mdbDropdown [routerLink]="['/item1']">
        <a
          mdbDropdownToggle
          class="nav-link dropdown-toggle text-uppercase no-caret"
          aria-haspopup="true"
          aria-expanded="false"
          >Item1</a
        >
        <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
          <div class="row mx-md-4 mx-1">
            <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
              <h6 class="sub-title text-uppercase font-weight-bold white-text">Item1</h6>
              <ul class="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" [routerLink]="['/new']" (click)="stop($event)">
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Link1
                  </a>
                </li>

                <li class="">
                  <a class="menu-item pl-0" [routerLink]="['/another']" (click)="stop($event)">
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Link2
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li class="nav-item dropdown mega-dropdown" mdbDropdown [routerLink]="['/item2']">
        <a
          mdbDropdownToggle
          class="nav-link dropdown-toggle text-uppercase no-caret"
          aria-haspopup="true"
          aria-expanded="false"
          >Item2</a
        >
        <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color">
          <div class="row mx-md-4 mx-1">
            <div class="col-md-6 col-lg-4 sub-menu my-lg-5 my-4">
              <h6 class="sub-title text-uppercase font-weight-bold white-text">Item2</h6>
              <ul class="list-unstyled">
                <li class="">
                  <a class="menu-item pl-0" [routerLink]="['/new']" (click)="stop($event)">
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Link3
                  </a>
                </li>

                <li class="">
                  <a class="menu-item pl-0" [routerLink]="['/another']" (click)="stop($event)">
                    <mdb-icon fas icon="caret-right" class="pl-1 pr-3"></mdb-icon> Link4
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </links>
</mdb-navbar>

<router-outlet></router-outlet>

app.module.ts

const appRoutes: Routes = [
  { path: 'item1', component: Item1Component },
  { path: 'item2', component: Item2Component },
  { path: 'new', component: NewComponent },
  { path: 'another', component: New2Component },
];
@NgModule({
  declarations: [..., AppComponent, NewComponent, New2Component, Item1Component, Item2Component],
  imports: [
     ...,
    MDBBootstrapModulesPro.forRoot(),
    RouterModule.forRoot(appRoutes),
     ...
  ],
 ...
})

Hope it helps!

Best Regards, Bartosz.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.0
  • Device: macbook
  • Browser: chrome
  • OS: mac os eicapitan
  • Provided sample code: No
  • Provided link: No