CODEWITHSUNDEEP
materialize
Jaydeep Ranipa
Jaydeep Ranipa

Reputation: 439

Unable to create a side navigation bar using materialize css?

I am trying to create a side navigation bar using MaterializeCSS. I have following code. But when I try to run it in browser it does not show anything. It shows only blank page.

<!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>

please suggest me if any bug is there.

Upvotes: 2

Views: 2075

Answers (2)

mzrnsh
mzrnsh

Reputation: 2360

There is a "bug" in your code - on 7th line your script (the one importing jQuery) is being closed incorrectly - you have /script> instead of </script>

In addition, you are using outdated method to put material icons in i tags - you should have <i class="material-icons">menu</i> instead of <i ="mdi-navigation-menu"></i>. Or if you prefer the 'old' way, I guess you will have to find that library and upload into your project as if I remember this right, that method is no longer officially supported.

Here is my edition of your code that works:

<!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>

Upvotes: 1

hemu
hemu

Reputation: 3261

Try following as your nav content

<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>

And add following in your CSS (Use header, main, footer in your body as an HTML-5 standard):

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

Upvotes: 0

Related Questions