Materialize is a beautiful new CSS framework you might consider as a fresh-looking alternative to Bootstrap. It implements Google’s Material design guidelines.

This tutorial builds up the nabber step by step so you can see what each HTML element and each line of Javascript code des.

The code here is copy and paste. You’re well advised to check for a later version on the CDN.

Here’s how a useless nav bar consisting only of a bar using the default color is coded:

Here it is. Whelming, I know. navbar-part-1a Click here for a live demo of the toolbar in action.

Specify a color

Materialize comes with a rich color palette defined. Background colors are given class names such as red, pink, deep-purple, and so on. We’ll color this one indigo.

It now looks like this.

navbar-part-1b

Click here to see our toolbar, such as it is, colored indigo.

Darken (or lighten) the color

You can append a class modifier to darken or lighten the color. They go from lighten-1 through lighten-5 and darken-1 through darken-5.

Here’s an example.

And now, for something completely different: navbar-part-1c Trust me, they’re different. Maybe I should have chosen another color to demo. Whatever. Click here for a live demo of the indigo darken-5 toolbar.

Add a logo to the navbar

Navbars have two purposes: display a logo/home page gizmo thingie, and navigation. I’m a staunch capitalist so let’s hit the logo first. It’s just a link using the brand-logo class. Here’s the branded link.

Click here to see the lamest logo of all time. or just gaze in wonder at the screen shot below. But hey—it’s now a functioning navbar.

navbar-part-1d

Add a navigation to the navbar

The second purpose of a navbar is, well, navigation. You’ll include an unordered list with a link to each location.

Here’s the toolbar with navigation links added.

That’s what we’re talking about! navbar-part-1e Click here for a live demo of the navbar with links.

Change location of navbar elements

The navbar is now functioning properly, but you may not love the layout at the moment. There are some extra classes that let you move elements of it around. For example, you can pull the navigation links to the right using the right class.

It looks like this.

navbar-part-1f

Click here for a live demo showing navigation links on the right.

Change location of navbar elements redux

You can apply the left class to the nav-wrapper itself. Check it.

It looks like this. Click here for a live demo showing that ever so slight change of code.

Add a “hamburger” version for narrow web pages

Responsive design dictates that when the screen gets narrow, the navigation menu should get out of the way.  We do this by:

      • Creating an identical, second navigation menu of class side-nav.

 

      • Adding an ID to the second navigation menu. For this example we’ll use an ID of "side-menu".

 

      • Adding a link using the icon style called mdi-navigation-menu. That gives it the stacked lines or “hamburger” look. Give that link the button-collapse class, which ensures it appears only when the web page gets narrow enough to make the hamburger appear.

 

      • Adding a line of Javascript code to initialize the button collapse action when the web page is loaded.

 

Here’s what the page will look like when the page gets narrow enough to show the hamburger: navbar-part-1jaAnd here’s what happens when you click the hamburger:

navbar-part-1jb

Create the second navigation menu

Create the duplicate navigation menu, with the ul class changed to side-nav.

Add an ID to the second navigation menu.

You’ll give this duplicate navigation menu of class side-nav a unique ID. Here we call it side-menu but you could call it anything.

Adding an <a> link using mdi-navigation-menu icon and the button-collapse class

The hamburger icon is enclosed in an <a> using the data attribute data-activates="side-menu". The "side-menu" string must match the ID you gave to the second navigation menu:

Add Javascript code to initialize the button collapse action

Finally, at the bottom of the page, before the closing body tag but preferably after the HTML code, include this Javascript code. It initializes the sliding mechanism and runs it when you click the hamburger.

Here’s the complete code.

Click here for a live demo showing that ever so slight change of code.

Report Error

Report ErrorClose

Comments are closed.