Welcome to the fourth Video Tutorial of the Materialize! This tutorial video about "Creating Top Navigation Menu (NavBar) using Materialize CSS Library and Materialize Minified CSS Library with XAMPP Localhost Server From Scratch" I hope you enjoy this tutorial video!
What Will I Learn?
- You will learn how to create navbar with using Materialize CSS Library (full package) and Materialize Minified Ajax CSS Library.
- You will learn how to create a clickable logo for Navigation Menu (Works with all file extensions).
- You will learn how to perform these operation with using XAMPP Control Panel Localhost Server.
- You will learn a few special codes about creating NavBar.
- You will learn how to add clickable website links to menu options and clikable menu logo.
Requirements
- Materialize Full Package 1.0.0-beta version (CSS and JS [minified and unminified]).
- Materialize CSS Ajax Library (1.0.0-beta version).
- Microsoft Visual Studio Code. (or another text editor).
- XAMPP Control Panel Server.
- A Standard Computer.
- A Standard Browser.
- An image for logo.
Difficulty
- Intermediate
Description
Hello everyone, welcome to the fourth episode of the Materialize CSS Education Series. In this tutorial video I showed you how to create Top Navigation Bar with using Materialize CSS-Ajax Library (full package) and Materialize Minified CSS Library. Also I used XAMPP Control Panel Server in this video for work with a localhost server. I showed and I explained you how to use special navcommand. And also I explained you how to use a href, li, ul, Materialize Ajax CSS (full package) and Materialize Minified CSS for example; "brand-logo", data, nav-wrapper class and more for creating top navigation menu (navbar). Also I explained in detail all the commands used when creating Top Navigation Menu [Navbar]. In this tutorial video, we used Materialize package instead of CDN Bootstrap.
Also I gave technical information about codes, classes, about materialize, libraries and all operations. Our Materialize education series will progress from basic - intermediate to advanced. All the programs and libraries described in the video Materialize Full CSS Package (1.0.0-beta version), Visual Studio Code, Materialize Minified CSS Library, XAMPP 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 Top Navigation Menu (Navbar) Tutorial
STEP 1:
We entered here the addresses of the libraries we need between the headcommands. Materialize Ajax CSS Library, Materialize Minified CSS Library and Materialize Icons Family (via Google Fonts) used in this video.
STEP 2:
In this section we started with nav command, navcommand is a specific command for navigation menu. After we continued with div class and we defined navigation menu as nav-wrapper and also in this line we defined navigation menu bar color as grey.
And then, with the help of the a href command, we have defined the address of the website that should redirect us when the logo is clicked. We defined the address of logo as utopian.io main page. Also this logo will appear on the left side of the top navigation menu.
On the bottom line, with the object command we defined the logo ID, logo type and also we defined logo path with data command. We defined logo as Utopian.io logo.
STEP 3:
In this step, firstly we used the unordered list (ul) for menu options to appear on the right side. And then Rules, Moderators and Wallet we defined Top Navigation Menu (navbar) options with li and a href and in unordered list [ul]. Also we defined Welcome - Discord Invitation message with a href to make it a clickable menu option we entered Invitation link as Official Utopian.io Discord Server. And also we have defined the brand-logo text center as classto appear in the center of the navbar and make it clickable.
Codes Used in This Video
<!DOCTYPE html>
<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">
</head>
<body>
<nav>
<div class="nav-wrapper grey">
<a href="https://utopian.io" class="brand-logo">
<object id="logo" type="image" data="images/utopian.png"></object>a>
<ul class="right">
<li><a href="https://utopian.io/rules">Rules</a>li>
<li><a href="https://utopian.io/moderators">Moderators</a>li>
<li><a href="https://utopian.io/wallet">Wallet</a>li>
<a href="https://discord.gg/fbeCxj" class="brand-logo text center">Welcome to the Utopian! Click here to join Utopian Discord Server!</a>
</ul>
</nav>
</body>
</html>
My Operating System
Video Tutorial
Links
- Materialize Github Repo
- Materialize Web Site
- Materialize Package Download for Windows
- Materialize Minified Ajax CSS Library
- 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
Curriculum
You can follow the other parts of the materialize education series here! :)
- PART 1: Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN
- PART 2: Materialize Education Series Part #2: How to Create a Full Screen Image Slider Using Carousel with XAMPP Localhost Server From Scratch
- PART 3: Materialize Education Series Part #3: How to Create Side Navigation Bar using Materialize and jQuery Libraries with XAMPP Localhost Server From Scratch
Posted on Utopian.io - Rewarding Open Source Contributors