Experience the magic of Materialize CSS SideNav

I'm currently attempting to implement the mobile side navigation provided by Materialize. I've managed to display the menu icon, but when I click on it, nothing happens. It seems like the function is not being triggered, and there are no errors showing up in the console.

<div class="navbar-fixed">
    <nav class="white">
        <div class="nav-wrapper">
        <a href="index.html" class="brand-logo"><img src="img/logo.png" alt="Logo" height="64"></a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons black-text">menu</i></a>
        <ul class="right hide-on-med-and-down">
            <li><a id="nav" href="index.html" class="red-text1">Home</a></li>
            <li><a href="webdesign.html" class="red-text1">Web Design</a></li>
            <li><a href="graphicdesign.html" class="red-text1">Graphic Design</a></li>
            <li><a href="video.html" class="red-text1">Video</a></li>
            <li><a href="about.html" class="red-text1">About</a></li>
            <li><a href="awards.html" class="red-text1">Awards</a></li>
            <li><a href="contact.html" class="red-text1">Contact</a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo">
            <li><a href="index.html" class="red-text1">Home</a></li>
            <li><a href="webdesign.html" class="red-text1">Web Design</a></li>
            <li><a href="graphicdesign.html" class="red-text1">Graphic Design</a></li>
            <li><a href="video.html" class="red-text1">Video</a></li>
            <li><a href="about.html" class="red-text1">About</a></li>
            <li><a href="awards.html" class="red-text1">Awards</a></li>
            <li><a href="contact.html" class="red-text1">Contact</a></li>
          </ul>
        </div>
    </nav>


    <link rel="stylesheet" href="css/master.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  <!-- Compiled and minified JavaScript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

<!-- Scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="http://materializecss.com/templates/starter-template/js/init.js"></script>

I am also incorporating Angular to construct the page, in case that has any impact.

jqueryhtmlcssangularjsmaterialize

Answer №1

The issue lies within Angular as it does not support jQuery, requiring adjustments to be made accordingly.
Remove the init.js file.

In main.ts, import 

import { Component, OnInit, ElementRef} from 'angular2/core';

Declare the variable:
declare var jQuery: any;

In your class implementation with OnInit, add the following code:

export class AppComponent implements OnInit{
 constructor(private el:ElementRef){}
  ngOnInit() {
    jQuery(this.el.nativeElement).find('.button-collapse').sideNav();
  }
} `

For more information, refer to this video.

Check out the Plunker for a demo.

Answer №2

Ensure the Navbar initialization is properly loaded:

$(".button-collapse").sideNav();

Make sure to include this in your init.js file.

I encountered a similar issue, but implementing this adjustment resolved it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminating undesired borders of table cells using CSS

I am facing a unique and puzzling issue. Here is the simple markup: <table> <thead> <tr><th>1</th><th>2</th><th>3</th></tr> </thead> <tbody> <tr>< ...

htmlcsshtml-table

Conditionally displaying an input model in Vue.js using v-if

Just starting to learn vue.js and I'm looking to display table data. My idea is that when the table is in display mode, it should only show the data. However, when I click on the edit button of a table row, I want that specific row to switch to edit m ...

javascriptphpjqueryvue.js

Ways to Fix the React Hydration Issue in Next.js

I have been encountering an issue with the error message "Hydration failed because the initial UI does not match what was rendered on the server." I am unsure of what is causing this error and would appreciate any insights or suggestions from others who ma ...

javascripthtmlreactjsnext.js

Angular: Implementing asynchronous data retrieval for templates

I am currently facing the following issue: I need to create a table with entries (Obj). Some of these entries have a file attribute. When an entry has a file attribute (entry.file), I need to make a backend call to retrieve the URL of that file: public g ...

htmlangulartypescriptrxjs

Stripping initial tags from an xml string using PHP

My URL is: http://lx2.loc.gov:210/lcdb?operation=searchRetrieve&recordSchema=marcxml&version=1.1&maximumRecords=10&query=bath.isbn%3D9781594634123%0A++++ This URL returns an xml string, and I am looking to remove the opening tags of this ...

phphtmlxmlwebextract

What is the best way to retrieve an input value within a controller?

I am attempting to create a live search feature for an app. I have implemented an ng change function that logs the input (ng model searchLive) and triggers a reload of the http request. However, the $scope.searchlive returns undefined even though the ng ch ...

angularjshttpsearch

Captivating Images accompanied by Descriptive Captions

I was wondering if there is a straightforward method using only CSS and HTML to address this particular issue. I am in the process of creating a marquee that displays images within a fixed-width div. The number of images exceeds the capacity of the div, ...

htmlcss

Designing the Mailchimp signup form with React styling techniques

I downloaded the NPM React module for Mailchimp from this link: https://www.npmjs.com/package/react-mailchimp-form. It works well and provides all the necessary forms, but I'm having trouble customizing its style. The documentation suggests adding a ...

cssreactjsmailchimp

Alignment issue detected

I was attempting to center these 4 divs inside a container both horizontally and vertically, but they are stuck at the top edge of the <div>. They aren't moving down and remain fixed at the top. /* Footer */ #footer { width: 100%; hei ...

htmlcss

Shadow border added to each div creates a unique navigation tab for easy access

#container { position: fixed; height: 100%; left: 0px; right: 0px; top: 0px; width: 10%; background-color: blue; } #container>div {} <html> <div id="container"> <div>up</div> <div>down</div> <d ...

htmlcss

The input tag loses focus after its value is updated using a class method in Angular 8.x

Currently, I am working on integrating a credit card payment method and formatting its number through specific methods. Here is how it is done: HTML <div class="form-group" *ngFor="let formField of cardFields; let cardFieldIndex = index;"> ...

javascripthtmltypescriptinputangular8

Performing read and write operations on targeted CSS classes using C#

I'm currently developing a C# application that needs to manipulate CSS files. Imagine you have the following CSS code snippet: .ClassOne { color: #FFFFFF; font-weight:normal; font-size: 9pt; font-family: Tahoma; ...

c#cssparsing

CSS background image referencing in React to the public folder's path

I am currently working on a project using Create-React-App and I am trying to set a background image for my header section. Here is how I'm attempting to do it: background-image: url('~/Screenshot_11.png'); However, I encountered an error w ...

htmlcssjsonreactjs

What is the best way to display uploaded images on the server side in a browser using the MEAN stack?

I am currently utilizing the MEAN stack to develop an application that allows users to upload images, preview them, and save them in a MongoDB database via a server implemented with Express. Furthermore, I aim to retrieve these images from the server and d ...

angularjshtmlmongodbexpressfilereader

Is there a way to resolve the issue of this div sticking to the top of the

I am currently working on building a portfolio website. One issue I'm facing is that my first div (for the "About Me" section) appears below my second div on the webpage. My goal is to have the first div displayed in full screen on both mobile and des ...

htmlcss

Create a Cutting-edge Navbar in Bootstrap 5.1 Featuring Three Distinct Sections: Left, Center, and Right

I'm encountering challenges with formatting the navbar layout I am currently designing. My goal is to create a navbar with three distinct sections as outlined in the title. In the first section on the left, there should be an image and a button-like ...

htmlcssbootstrap-5navbar

Creating a CSS triangle that smoothly transitions between two different colors

Is it possible to create a triangle in CSS that smoothly transitions between two colors without relying on a hover state? .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; b ...

javascriptcss

Prevent animation when expanding the menu in Vue using CSS

The animation only works when collapsing the menu, not when expanding it. I tried adding CSS for setting a max-height, but the animation only functions when collapsing the menu. <template> <div> <p> <button @click="is ...

cssvue.jsanimation

How to use jQuery to target the second or any desired div element with a specific class

I'm having trouble with something seemingly simple Let's say we are looking for a class called .contentdiv, for example. I am trying to target the second or nth occurrence of the .contentdiv class in a document and retrieve the HTML of that spe ...

javascriptjqueryhtml

The document ready event does not fire upon page load, but can be triggered using the Developer Tools Console

When the ajax call is successful, the li element gets added to the ul. $.ajax({ .. success: function (response) { response.data.forEach(function (x) { $("#ulMain").append('<li class="liSub">' + x + &apo ...

javascriptjqueryajaxdeveloper-tools