create account

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

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @sargoon · (edited)
$186.06
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!

![](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/>
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 147 others
properties (23)
authorsargoon
permlinkmaterialize-education-series-part-3-how-to-create-side-navigation-bar-using-materialize-and-jquery-libraries-with-xampp
categoryutopian-io
json_metadata"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":23974149,"name":"materialize","full_name":"Dogfalo/materialize","html_url":"https://github.com/Dogfalo/materialize","fork":false,"owner":{"login":"Dogfalo"}},"pullRequests":[],"platform":"github","type":"video-tutorials","tags":["utopian-io","en","video-tutorials","css","materialize"],"users":["sargoon"],"links":["https://github.com/Dogfalo/materialize","http://materializecss.com/","https://github.com/Dogfalo/materialize/releases/download/1.0.0-beta/materialize-v1.0.0-beta.zip","https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css","https://github.com/Microsoft/vscode","https://code.visualstudio.com/","https://go.microsoft.com/fwlink/?Linkid=852157","https://www.apachefriends.org/en/","https://www.apachefriends.org/xampp-files/7.2.1/xampp-win32-7.2.1-0-VC15-installer.exe","https://github.com/jquery/jquery","http://jquery.com/","http://jquery.com/download/","https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js","https://utopian.io/utopian-io/@sargoon/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-2-how-to-create-a-full-screen-image-slider-using-carousel-with-xampp-localhost-server-from"],"moderator":{"account":"buckydurddle","time":"2018-04-23T20:33:48.650Z","pending":false,"reviewed":true,"flagged":false},"questions":null,"score":null,"total_influence":null,"staff_pick":true,"config":{"questions":[{"question":"Does the tutorial address a minimum of 3 substantial concepts and no more than 5?","question_id":"vtut-1","answers":[{"answer":"3-5 substantial concepts covered in the tutorial.","answer_id":1,"value":10},{"answer":"Less than 3 or more than 5 substantial concepts covered in the tutorial.","answer_id":2,"value":5},{"answer":"No substantial or recognisable concepts.","answer_id":3,"value":0}]},{"question":"Concepts covered in the tutorial are indicated in the post text with a short description of each concept and when appropriate, images?","question_id":"vtut-2","answers":[{"answer":"Thorough text and images for concepts covered.","answer_id":1,"value":5},{"answer":"Minimal text and images.","answer_id":2,"value":2},{"answer":"No or very little text and images.","answer_id":3,"value":0}]},{"question":"Does the contributor provide supplementary resources, such as code and sample files in the contribution post or a GitHub repository?","question_id":"vtut-3","answers":[{"answer":"Yes","answer_id":1,"value":10},{"answer":"No","answer_id":2,"value":0}]},{"question":"Is the tutorial part of a series?","question_id":"vtut-4","answers":[{"answer":"Yes.","answer_id":1,"value":10},{"answer":"Yes, but first entry in the series.","answer_id":2,"value":5},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Is there an outline for the tutorial content at the beginning of the post?","question_id":"vtut-5","answers":[{"answer":"Yes.","answer_id":1,"value":5},{"answer":"Yes, but not detailed enough or does not cover all sections.","answer_id":2,"value":2},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Does the presenter speak clearly and is easily understandable?","question_id":"vtut-6","answers":[{"answer":"Yes.","answer_id":1,"value":10},{"answer":"Mostly understandable.","answer_id":2,"value":5},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Does the writing style meet the Utopian standard considering formalness, informativeness and clarity of the content?","question_id":"c-1","answers":[{"answer":"It is formal, informative and well written with clear content.","answer_id":1,"value":10},{"answer":"It is informative with clear content but not formal enough.","answer_id":2,"value":5},{"answer":"The contribution could be more informative or contains unrelated information, formality and clarity of the content are good enough.","answer_id":3,"value":4},{"answer":"Not all sections were clear enough but overall holds value for the project.","answer_id":4,"value":2},{"answer":"Not at all.","answer_id":5,"value":0}]},{"question":"Was the provided category template for the editor followed?","question_id":"c-2","answers":[{"answer":"All points of the template were included with additional points as well.","answer_id":1,"value":5},{"answer":"The template was followed without additions.","answer_id":2,"value":4},{"answer":"The template was edited but the points were covered in different way.","answer_id":3,"value":3},{"answer":"Not all points of the template were covered in the contribution but the structure is clear enough.","answer_id":4,"value":3},{"answer":"The template was not followed but the structure is clear enough.","answer_id":5,"value":2},{"answer":"The contents are not clearly structured at all.","answer_id":6,"value":0}]},{"question":"Did the contributor tag other users?","question_id":"c-3","answers":[{"answer":"No other users were tagged by the contributor.","answer_id":1,"value":5},{"answer":"Used tags are reasonable and all tagged people are connected to the project and/or the contribution.","answer_id":2,"value":5},{"answer":"The contribution contains mentions of other users that are not directly related to the contribution but related in other ways.","answer_id":3,"value":2},{"answer":"The contributor misuses tagging of other users.","answer_id":4,"value":0}]},{"question":"Did the contributor ask for upvotes, resteems, follows or witness vote?","question_id":"c-4","answers":[{"answer":"No","answer_id":1,"value":5},{"answer":"Yes, but not in a way that disturbs readability. ","answer_id":2,"value":5},{"answer":"Yes.","answer_id":3,"value":0}]},{"question":"Was a graphical content like images, charts, videos or screenshots included?","question_id":"c-5","answers":[{"answer":"Yes, the graphical content is included and adds more value to the contribution.","answer_id":1,"value":5},{"answer":"No but the contribution works well without graphical content well.","answer_id":2,"value":4},{"answer":"Yes, but most of the graphical content’s purpose is just for presentational matters.","answer_id":3,"value":3},{"answer":"No relevant or useful graphical content is included in the contribution.","answer_id":4,"value":0}]},{"question":"How would you rate the overall added value?","question_id":"c-6","answers":[{"answer":"Extraordinary value to both the project and the open source community overall.","answer_id":1,"value":20},{"answer":"Significant value to the project or open source community.","answer_id":2,"value":15},{"answer":"Some value to the project or open source community.","answer_id":3,"value":10},{"answer":"Little value to the project or open source community.","answer_id":4,"value":5},{"answer":"No obvious value to project or open source community.","answer_id":5,"value":0}]}]}}"
created2018-04-23 00:08:18
last_update2018-04-23 20:33:48
depth0
children7
last_payout2018-04-30 00:08:18
cashout_time1969-12-31 23:59:59
total_payout_value134.192 HBD
curator_payout_value51.869 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length8,497
author_reputation62,586,788,362,329
root_title"Materialize Education Series Part #3: How to Create Side Navigation Bar using Materialize and jQuery Libraries with XAMPP Localhost Server From Scratch"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,571,689
net_rshares30,362,146,492,786
author_curate_reward""
vote details (211)
@buckydurddle ·
$0.03
Good work @sargoon. I love to see you engaged in the community. Great to have you with us.

----------------------------------------------------------------------
Need help? Write a ticket on https://support.utopian.io.
Chat with us on [Discord](https://discord.gg/uTyJkNm).

**[[utopian-moderator]](https://utopian.io/moderators)**
πŸ‘  
properties (23)
authorbuckydurddle
permlinkre-sargoon-materialize-education-series-part-3-how-to-create-side-navigation-bar-using-materialize-and-jquery-libraries-with-xampp-20180423t203515758z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-23 20:35:15
last_update2018-04-23 20:35:15
depth1
children1
last_payout2018-04-30 20:35:15
cashout_time1969-12-31 23:59:59
total_payout_value0.028 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length332
author_reputation101,965,608,464,038
root_title"Materialize Education Series Part #3: How to Create Side Navigation Bar using Materialize and jQuery Libraries with XAMPP Localhost Server From Scratch"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,744,945
net_rshares6,271,339,541
author_curate_reward""
vote details (1)
@sargoon · 
Thank you so much for moderating my post sir, also thank you for your wonderful message :) I will always work more to be worthy of the community.
properties (22)
authorsargoon
permlinkre-buckydurddle-re-sargoon-materialize-education-series-part-3-how-to-create-side-navigation-bar-using-materialize-and-jquery-libraries-with-xampp-20180423t210702180z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-23 21:07:03
last_update2018-04-23 21:07:03
depth2
children0
last_payout2018-04-30 21:07:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length145
author_reputation62,586,788,362,329
root_title"Materialize Education Series Part #3: How to Create Side Navigation Bar using Materialize and jQuery Libraries with XAMPP Localhost Server From Scratch"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,746,714
net_rshares0
@tensor · (edited)
$0.03
I like your tutorial but I really wish you had a better mic (You sound a little muddled and its hard to understand certain words).  Other then that, the layout, the presentation and everything else seems fairly top shelf.
πŸ‘  
properties (23)
authortensor
permlinkre-sargoon-materialize-education-series-part-3-how-to-create-side-navigation-bar-using-materialize-and-jquery-libraries-with-xampp-20180425t044810121z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-25 04:48:09
last_update2018-04-25 04:48:24
depth1
children3
last_payout2018-05-02 04:48:09
cashout_time1969-12-31 23:59:59
total_payout_value0.026 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length223
author_reputation87,856,203,149,624
root_title"Materialize Education Series Part #3: How to Create Side Navigation Bar using Materialize and jQuery Libraries with XAMPP Localhost Server From Scratch"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,993,156
net_rshares6,399,326,062
author_curate_reward""
vote details (1)
@sargoon ·
$0.13
Thank you so much for your good comment. I'm glad you like my tutorial. Yes I know, my mic quality is very bad, I will change my mic for better quality.
πŸ‘  
properties (23)
authorsargoon
permlinkre-tensor-re-sargoon-materialize-education-series-part-3-how-to-create-side-navigation-bar-using-materialize-and-jquery-libraries-with-xampp-20180425t053327065z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-25 05:33:30
last_update2018-04-25 05:33:30
depth2
children2
last_payout2018-05-02 05:33:30
cashout_time1969-12-31 23:59:59
total_payout_value0.102 HBD
curator_payout_value0.031 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length152
author_reputation62,586,788,362,329
root_title"Materialize Education Series Part #3: How to Create Side Navigation Bar using Materialize and jQuery Libraries with XAMPP Localhost Server From Scratch"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,998,480
net_rshares21,417,350,376
author_curate_reward""
vote details (1)
@tensor ·
$0.04
Very nice.  I Look forward to seeing your future content.
πŸ‘  
properties (23)
authortensor
permlinkre-sargoon-re-tensor-re-sargoon-materialize-education-series-part-3-how-to-create-side-navigation-bar-using-materialize-and-jquery-libraries-with-xampp-20180425t120145080z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-25 12:01:45
last_update2018-04-25 12:01:45
depth3
children1
last_payout2018-05-02 12:01:45
cashout_time1969-12-31 23:59:59
total_payout_value0.030 HBD
curator_payout_value0.007 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length57
author_reputation87,856,203,149,624
root_title"Materialize Education Series Part #3: How to Create Side Navigation Bar using Materialize and jQuery Libraries with XAMPP Localhost Server From Scratch"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,052,561
net_rshares6,399,326,062
author_curate_reward""
vote details (1)
@utopian-io · 
### Hey @sargoon! Thank you for the great work you've done!
We're already looking forward to your next contribution!
#### Fully Decentralized Rewards
We hope you will take the time to share your expertise and knowledge by rating contributions made by others on Utopian.io to help us reward the best contributions together.
#### Utopian Witness!
<a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for Utopian Witness!</a> We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

**Want to chat? Join us on Discord https://discord.me/utopian-io**
properties (22)
authorutopian-io
permlinkre-sargoon-materialize-education-series-part-3-how-to-create-side-navigation-bar-using-materialize-and-jquery-libraries-with-xampp-20180423t210042372z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-23 21:00:42
last_update2018-04-23 21:00:42
depth1
children0
last_payout2018-04-30 21:00:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length687
author_reputation152,955,367,999,756
root_title"Materialize Education Series Part #3: How to Create Side Navigation Bar using Materialize and jQuery Libraries with XAMPP Localhost Server From Scratch"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,746,320
net_rshares0
Help/Feedback