时间戳

首页 > 解决方案 > 物化 CSS 中的错误 sidenav

css - 物化 CSS 中的错误 sidenav

问题描述

我创建了一个导航栏，导航栏项目在小型设备上折叠，可以通过按下将项目显示为侧导航的按钮来查看，我遇到的问题是我无法单击任何链接，它显示sidenav 但一切都被禁用，我将展示片段以更好地解释这一点。

<!-- This is a free template created by the github user NeutronBlast, please don't erase this -->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

</head>

<body>

    <!-- Navbar -->
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper teal">
                <!-- Your logo here! -->
                <a href="#" class="brand-logo ml-nav-4 mt-2">L
                </a>

                <!-- Trigger button for collapsible menu on phone view -->
                <a href="#" data-target="menu-responsive" class="sidenav-trigger">
                    <i class="material-icons">menu</i>
                </a>
                <ul id="nav-mobile" class="right hide-on-med-and-down">
                    <li><a href="#about">ABOUT US</a></li>
                    <li><a href="#features">FEATURES</a></li>
                    <li><a href="#services">SERVICES</a></li>
                    <li><a href="#projects">PROJECTS</a></li>
                    <li><a href="#testimonials">TESTIMONIALS</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>

                <!-- Menu that will be shown on small devices -->
                <ul class="sidenav" id="menu-responsive">
                    <li><a href="#about">ABOUT US</a></li>
                    <li><a href="#features">LINK</a></li>
                    <li><a href="#services">SERVICES</a></li>
                    <li><a href="#projects">PROJECTS</a></li>
                    <li><a href="#testimonials">TESTIMONIALS</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>
            </div>
        </nav>
    </div>


    <!-- Compiled and minified JavaScript -->
    <script type="application/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            M.AutoInit();



        });
    </script>
</body>

</html>

注意：我意识到使用 navbar-fixed 类删除 div 解决了 sidenav 被禁用的问题，但我需要将导航栏固定在桌面上，所以简单地删除它对我来说还不够。

标签： cssmaterialize

解决方案

您需要将 sidenav 标记保留在导航栏标记之外...

<!-- Navbar -->
<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper teal">
            <!-- Your logo here! -->
            <a href="#" class="brand-logo ml-nav-4 mt-2">L</a>
            <!-- Trigger button for collapsible menu on phone view -->
            <a href="#" data-target="menu-responsive" class="sidenav-trigger">
                <i class="material-icons">menu</i>
            </a>
            <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="#about">ABOUT US</a></li>
                <li><a href="#features">FEATURES</a></li>
                ..
            </ul>
        </div>
    </nav>
</div>
<!-- Menu that will be shown on small devices -->
<ul class="sidenav" id="menu-responsive">
    <li><a href="#about">ABOUT US</a></li>
    <li><a href="#features">LINK</a></li>
    ...
</ul>

https://codeply.com/p/IsB0HvAEJy

推荐阅读