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

![](http://i64.tinypic.com/33z3688.jpg)

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

![](http://i66.tinypic.com/2a8ix51.png)

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

#### STEP 2:

![](http://i68.tinypic.com/29qbqit.png)

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:

![](http://i64.tinypic.com/10qar9e.png)

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:

![](http://i68.tinypic.com/20qjaqp.png)

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:

![](http://i66.tinypic.com/m7rei9.png)

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

#### STEP 6:

![](http://i68.tinypic.com/23sbwcl.png)

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

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

![](https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/U5ds3HXf5FidbFHYdFQeQxFhw3nfu4g_1680x8400)

#### Video Tutorial

https://youtu.be/JTgr9RKBQbk

#### Links

- [Materialize Github Repo](https://github.com/Dogfalo/materialize)
- [Materialize Web Site](http://materializecss.com/)
- [Materialize Package Download for Windows](https://github.com/Dogfalo/materialize/releases/download/1.0.0-beta/materialize-v1.0.0-beta.zip)
- [Materialize Ajax Library Download Link](https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css)
- [Visual Studio Code (VSCode) GitHub Repo](https://github.com/Microsoft/vscode)
- [Visual Studio Code Web Site](https://code.visualstudio.com/)
- [Visual Studio Code Download Link for Win x64](https://go.microsoft.com/fwlink/?Linkid=852157)
- [XAMPP Server Web Site](https://www.apachefriends.org/en/)
- [XAMPP Server(For Windows) Download Link](https://www.apachefriends.org/xampp-files/7.2.1/xampp-win32-7.2.1-0-VC15-installer.exe)
- [jQuery GitHub Repo](https://github.com/jquery/jquery)
- [jQuery Web Site](http://jquery.com/)
- [jQuery Download Link](http://jquery.com/download/)
- [jQuery Ajax Library Download Link](https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js)

#### 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](https://utopian.io/utopian-io/@sargoon/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](https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-2-how-to-create-a-full-screen-image-slider-using-carousel-with-xampp-localhost-server-from)

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-3-how-to-create-side-navigation-bar-using-materialize-and-jquery-libraries-with-xampp">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>