Topic: menu use mouse wheel goes down problem
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.
<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, PiotrFREE 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
Piotr Glejzer staff commented 6 years ago
Hi solaris32, may you show me your code about that problem? Best, Piotr