menu use mouse wheel goes down problem


Topic: menu use mouse wheel goes down problem

solaris32 pro asked 6 years ago

When I use the menu multi-layer menu, I found that when the mouse wheel goes down, it should be the menu slide, but the right page will slide and I can't find the reason.

Piotr Glejzer staff commented 6 years ago

Hi solaris32, may you show me your code about that problem? Best, Piotr

solaris32 pro answered 6 years ago

<script> $(".button-collapse").sideNav(); var sideNavScrollbar = document.querySelector('.custom-scrollbar'); Ps.initialize(sideNavScrollbar); </script>   html : <nav class="phone_menu phone_block"> <a href="#" data-activates="slide-out" class="button-collapse"> <i class="fa fa-bars text-center"></i> <div class="title">menu</div> </a> </nav> <div id="slide-out" class="side-nav mdb-sidenav"> <ul class="custom-scrollbar"> <li> <div class="logo-wrapper waves-light"> <a href="#"> <img src="images/logo.png" alt="logo" title="logo" class="img-fluid flex-center"> </a> </div> </li> <li> <ul class="social"> <li><a href="#" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li> <li><a href="#" class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li> <li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li> <li><a href="#" class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li> </ul> </li> <li> <div class="input-group md-form form-sm form-2 pl-0 mb-3"> <input class="form-control my-0 py-1 red-border" type="text" placeholder="Search..." aria-label="Search"> <div class="input-group-append"> <span class="input-group-text phone_menu_sreachicon" id="basic-text1"> <i class="fa fa-search text-grey" aria-hidden="true"></i> </span> </div> </div> </li> <li> <ul class="collapsible collapsible-accordion"> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-info-circle"></i> name<i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <!-- Side navigation links --> <ul class="collapsible collapsible-accordion"> <li> <a class="collapsible-header waves-light"> name </a> <div class="collapsible-body"> <ul class="collapsible collapsible-accordion"> <li> <a href="./v_post_gods_santaizi.php" class="collapsible-header waves-light"> <i class="fa fa-circle-o" aria-hidden="true"></i>name </a> </li> <li> <a href="./v_post_gods_santaizi.php" class="collapsible-header waves-light"> <i class="fa fa-circle-o" aria-hidden="true"></i>name </a> </li> <li> <a href="./v_post_gods_santaizi.php" class="collapsible-header waves-light"> <i class="fa fa-circle-o" aria-hidden="true"></i>name </a> </li> </ul> </div> </li> </ul> <!--/. Side navigation links --> </li> <li> <a href="./v_post_about_history.php" class="waves-effect"> name </a> </li> <li> <a href="./v_post_about_map.php" class="waves-effect"> name </a> </li> <li> <a href="./v_post_notepad_january.php" class="waves-effect"> name </a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-send"></i> name<i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <a href="./v_news_list.php" class="waves-effect"> name </a> </li> <li> <a href="./v_news_list.php" class="waves-effect"> name </a> </li> <li> <a href="./v_album_list.php" class="waves-effect"> name </a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-sign-language"></i> name<i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <a href="./v_post_baibai_baibai.php" class="waves-effect"> name </a> </li> <li> <a href="./v_post_baibai_zhijiao.php" class="waves-effect"> name </a> </li> <li> <a href="./v_post_baibai_chouqian.php" class="waves-effect"> name </a> </li> <li> <a href="./v_post_baibai_renzhi.php" class="waves-effect"> name </a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-file"></i> name<i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <a href="./v_sign_manual.php" class="waves-effect"> name </a> </li> <li> <a href="./v_post_auspice.php" class="waves-effect"> name </a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r"> <i class="fa fa-envelope"></i> name<i class="fa fa-angle-down rotate-icon"></i> </a> <div class="collapsible-body"> <ul> <li> <a href="./v_message.php" class="waves-effect"> name </a> </li> <li> <a href="./v_traffic.php" class="waves-effect"> name </a> </li> </ul> </div> </li> </ul> </li> </ul> <div class="sidenav-bg mask-strong"></div> </div>

Piotr Glejzer staff commented 6 years ago

Hi, what is a problem with that sideNav because that example is working good? Best, Piotr

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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No