Question

我正在尝试使用MaterialiseCSS创建侧面导航栏。我有以下代码。但是当我尝试在浏览器中运行它时，它没有显示任何内容。它只显示空白页面。

<!DOCTYPE html>
<html>
<head>
    <title>Side Navigation Bar</title>

    <!-- Compiled and minified jQuery -->
    <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
/script>

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

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/
css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/
js/materialize.min.js"></script>

     <script type="text/javascript">
        $(document).ready(function(){
           $(".button-collapse").sideNav();
           $('.collapsible').collapsible();
        });
    </script>
</head>
<body>
    <nav>
        <ul class="right hide-on-med-and-down">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <ul id="slide-out" class="side-nav">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <a href="#" data-activates="slide-out" class="button-collapse"><i 
    class="mdi-navigation-menu"></i></a>
    </nav>
</body>
</html>

如果有任何错误，请建议我。

Answer 1

有一个＆＃34; bug＆＃34;在您的代码中 - 在第7行，您的脚本（导入jQuery的脚本）被错误地关闭 - 您有/script>而不是</script>

此外，您使用过时的方法将材质图标放入i标记中 - 您应该使用<i class="material-icons">menu</i>而不是<i ="mdi-navigation-menu"></i>。或者，如果你喜欢“老”的话。方式，我想你必须找到那个库并上传到你的项目中，好像我记得这个，这种方法不再正式支持。

以下是我的代码版本：

<!DOCTYPE html>
<html>
<head>
    <title>Side Navigation Bar</title>

    <!-- Compiled and minified jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

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

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

     <script type="text/javascript">
        $(document).ready(function(){
           $(".button-collapse").sideNav();
           $('.collapsible').collapsible();
        });
    </script>
</head>
<body>
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul id="slide-out" class="side-nav">
        <li><a href="#!">First Sidebar Link</a></li>
        <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
</body>
</html>

Answer 2

尝试关注nav内容

<nav>
        <div class="nav-wrapper container">
            <a id="logo-container" href="#" class="brand-logo text-darken-1">Logo</a>

            <div class="container">
                <a href="#" data-activates="slide-out" class="button-collapse top-nav full hide-on-large-only black-text"><i
                        class="mdi-navigation-menu"></i></a>
            </div>
        </div>

        <ul id="slide-out" class="side-nav fixed center-align">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>        
</nav>

并在CSS中添加以下内容（在body中使用标题，主页，页脚作为HTML-5标准）：

header, main, footer {
    padding-left: 240px;
}

无法使用materialize css创建侧面导航栏？

2 个答案: