Question

我在我的项目中使用了materializecss Side Nav。我试图在悬停时显示导航栏。有人可以帮助我吗？以下是我附加的代码段。

$("nav").hover(function() {
    $('.sidenav').sidenav();
});

<div class="navbar">
    <nav>
        <div class="nav-wrapper">
            <a href="#" data-target="slide-out" id="menu" class="sidenav-trigger"><i class="material-icons">menu</i></a>
            <!-- <a href="#" data-target="slide-out" id="menu_icon" class="sidenav-trigger"><i class="material-icons">menu</i> -->
        </div>
    </nav>
</div>
<ul id="slide-out" class="sidenav">
    <li>
        <div class="user-view">
            <p class="nav_title">TURBIZO</p>
        </div>
    </li>
    <li><a class="nav_list" href="index.html">Home</a></li>
    <li><a class="nav_list" href="about.html">About</a></li>
    <li><a class="nav_list highlight" href="contact.html" >Contact</a></li>
    <li><a class="nav_list" href="#!">Carrers</a></li>
</ul>

Answer 1

在Material CSS中使用side-nav而不是sidenav。 Material CSS Sidenav Reference

<ul id="slide-out" class="side-nav">

使用数据激活而不是数据目标。

<a href="#" data-activates="slide-out" id="menu" class="sidenav-trigger"><i 
 class="material-icons">menu</i></a>

在jquery中使用.sidenav-trigger而不是.sidenav。插件名称也是sideNav（）

$(".sidenav-trigger").sideNav();

以下是sidenav的代码段。

<nav>
  <div class="nav-wrapper">
   <a href="#" data-activates="slide-out" id="menu" class="sidenav-trigger">
   <i class="material-icons">menu</i></a>
  </div>
</nav>
<ul id="slide-out" class="side-nav">
 <li>
  <div class="user-view">
  <p class="nav_title">TURBIZO</p>
  </div>
 </li>
 <li><a class="nav_list" href="index.html">Home</a></li>
 <li><a class="nav_list" href="about.html">About</a></li>
 <li><a class="nav_list highlight" href="contact.html" >Contact</a></li>
 <li><a class="nav_list" href="#!">Carrers</a></li>
</ul>

在materialize.js之前添加jquery.js。首先初始化sideNav插件，然后更改触发器方法。

$(document).ready(function() {
 $(".sidenav-trigger").sideNav();
   $("nav").hover(function () {
     $(".sidenav-trigger").sideNav('show');
   });
});

On hover SideNav Material CSS

在悬停侧导航物化css

1 个答案: