Materialize Education Series Part #3: How to Create Side Navigation Bar using Materialize and jQuery Libraries with XAMPP Localhost Server From Scratch

Welcome to the third Video Tutorial of the Materialize! This tutorial about "Creating Side Navigation Bar (sidenav) using Materialize CSS, Materialize Ajax (javascript) and jQuery Ajax Libraries with XAMPP Localhost Server From Scratch" I hope you enjoy this tutorial video!

What Will I Learn?

• You will learn how to create sidenav (side navigation bar) with Materialize CSS, Materialize Ajax JS, jQuery 3.3.1, and jQuery Ajax Library.
• You will learn how to write codes for Side Navigation Bar without using Bootstrap CDN.
• You will learn how to use Materialize Ajax and CSS library with jQuery Ajax library in same project and how to create SideNav with using jQuery Ajax and Materialize Ajax-CSS library.
• You will learn a lot of commands about creating sidenav.

Requirements

• Materialize Full Package 1.0.0-beta version (CSS and JS [minified and unminified]).
• Materialize JavaScript Ajax Library (1.0.0-beta version).
• jQuery Ajax Library (with CDNjs).
• jQuery 3.3.1 Compressed (minified version).
• Microsoft Visual Studio Code. (or another text editor).
• A Standard Computer.
• A Standard Browser.
• XAMPP Control Panel Server.
• A few images.

Difficulty

• Intermediate

Description

Hello everyone, welcome to the third episode of the Materialize CSS Education Series. In this tutorial video I showed you how to create SideNavBar with using jQuery Ajax JS Library and Materialize CSS-Ajax Library also I used XAMPP Control Panel Server in this video. I teached you how to use Materialize CSS-AJAX library with jQuery library in the same time. I showed and I explained you how to use a lot of a href, li, div Materialize CSS and Ajax (JS) for example; "slide-out", "user-view", data-target, sidenav-trigger and more.
Also I explained in detail all the commands used when creating Side Navigation Bar. In this tutorial video,we used Materialize package instead of CDN Bootstrap.
Also I gave technical information about codes, division classes, jQuery and Materialize libraries and all operations. Our Materialize education series will progress from intermediate to advanced. All the programs described in the video (Materialize CSS, Materialize Ajax (Javascript), Visual Studio Code, jQuery-Ajax Library, XAMPP Server Control Panel Server) are open source and are all included in the links section of the GitHub repositories (Except XAMPP Control Panel Server). If you wish, you can access the web pages of these programs and download links for Windows from the links section.

Some Additional Steps About Side Navigation Bar Tutorial

STEP 1:

First of all, we entered the addresses of the libraries we need between the headcommands. Materialize CSS, jQuery Ajax, Materialize Ajax (JS) libraries and Materialize Icons Family (via Google Fonts) used in this video.

STEP 2:

In this step div commands were written with Materialize CSS and Materialize Ajax JS special classes. The "slide-out" id and the "sidenav" class are special commands for the SideNavBar and can not be changed, codes must be same as here, otherwise sidenav will not work. user-view and background divison classes about, "create a mini user view on the SidenavigatonBar". "img src" written for defining background image.

STEP 3:

In this section about mini user view, we defined user profile photo and username.
We have specified image class as "circle" type so that the user profile picture appears circular.
Also in this step we defined the color of the username as white with white-text name span class.

STEP 4:

In This step, Profile, Wallet, Settings and Logout we defined SideNavBar options with using li, a href and i class commands in unordered list [ul].

STEP 5:

This step about defining data-target as slide-out, sidenav-trigger for menu button and added icon to menu button withi class using material icons.

STEP 6:

We started write script as usual with $(document).ready(function(){ after we used $('.sidenav').sidenav(); this function to run SDidenav and we defined sidenav's task as .sidenav.

Codes Used in This Video

                
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    </head>

    
    <body>
        <ul id="slide-out" class="sidenav">
        <li>
            <div class="user-view">
                <div class="background">
                    <img src="images/utoplogo.jpg">
            </div>
            <a href="#"><img class="circle" src="images/sargoonimg.jpg"></a>
            <a href="#"><span class="white-text name">Sargoon Utopian</a>
        </li>
            <li><a href="#profile"><i class="material-icons">account_circle</i>Profile</a></li>
            <li><a href="#wallet"><i class="material-icons">attach_money</i>Wallet</a></li>
            <li><a href="#settings"><i class="material-icons">settings</i>Settings</a></li>
            <li><a href="#logout"><i class="material-icons">exit_to_app</i>Logout</a></li>
        </ul>
        <a href="#" data-target="slide-out" class="sidenav-trigger btn black"><i class="material-icons">menu</i></a>


        <script>
        $(document).ready(function(){
            $('.sidenav').sidenav();
        });
        
        
        </script>

    </body>

My Operating System

Video Tutorial

Links

• Materialize Github Repo
• Materialize Web Site
• Materialize Package Download for Windows
• Materialize Ajax Library Download Link
• Visual Studio Code (VSCode) GitHub Repo
• Visual Studio Code Web Site
• Visual Studio Code Download Link for Win x64
• XAMPP Server Web Site
• XAMPP Server(For Windows) Download Link
• jQuery GitHub Repo
• jQuery Web Site
• jQuery Download Link
• jQuery Ajax Library Download Link

Curriculum

You can follow the other parts of the materialize education series here! :)

• Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN

• Materialize Education Series Part #2: How to Create a Full Screen Image Slider Using Carousel with XAMPP Localhost Server From Scratch

---

Posted on Utopian.io - Rewarding Open Source Contributors

---