Menu is not working while using the material design lite
Here is my _layout.cstml
@inject Microsoft.ApplicationInsights.AspNetCore.JavaScriptSnippet JavaScriptSnippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - FalconWebsite</title>
<link rel="shortcut icon" href="~/images/transfeteLogo.png" type="image/png" />
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="~/lib/googleMaterialDesignLite/material.indigo-pink.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="~/lib/googleMaterialDesignLite/material.indigo-pink.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
@Html.Raw(JavaScriptSnippet.FullScript)
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="~/node_modules/core-js/client/shim.min.js"></script>
<script src="~/node_modules/zone.js/dist/zone.js"></script>
<script src="~/node_modules/reflect-metadata/Reflect.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="~/js/systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/googleMaterialDesignLite/material.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/googleMaterialDesignLite/material.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row mdl-layout__header">
<span class="mdl-layout-title"><strong>FeteBird</strong><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>
<!-- Displayed on Computer and Tablet -->
<!-- Search -->
<div class="mdh-expandable-search mdl-cell--hide-phone">
<form >
<input type="text" placeholder="Search for Product , Brands ..">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="background: #009688; height: 40px;">
<i class="material-icons" style="color: white">search</i>
</button>
</form>
</div>
<div class="mdl-layout-spacer mdl-cell--hide-tablet mdl-cell--hide-desktop"></div>
<div class="mdl-cell--hide-tablet mdl-cell--hide-desktop mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="waterfall-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="waterfall-exp">
</div>
</div>
<!-- Buttons -->
<!-- Right aligned menu below button -->
<button id="demo-menu-lower-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Mobile App</li>
<li class="mdl-menu__item">Customer Care</li>
<li class="mdl-menu__item">Track Order</li>
<li class="mdl-menu__item">Log in</li>
</ul>
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row" style="height: 35px;">
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Electronics</a>
<a class="mdl-navigation__link" href="">Cloths</a>
<a class="mdl-navigation__link" href="">men</a>
<a class="mdl-navigation__link" href="">Women</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer mdl-layout--small-screen-only">
<span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="80" height="80" /></span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">@RenderBody()</div>
</main>
</div>
</body>
</html>
In the render section I have a page which contain the below item
<ul class="demo-list-item mdl-list">
<li class="mdl-list__item">
<div class="mdl-shadow--2dp">
<div class="text-center">
<h3>New Arrival</h3>
<hr class="star-primary">
</div>
<div class="mdl-grid">
<div class="mdl-card mdl-cell mdl-cell--2-col mdl-cell--4-col-tablet mdl-shadow--2dp">
<figure class="mdl-card__media">
<img src="~/images/cloth.jpg" alt="" class="img-responsive" />
</figure>
<div class="mdl-card__supporting-text">
<p>Flying Machine Skinny Women's Blue Jeans</p>
<span>
<strong style="color: rgb(63, 81, 181);">Npr-429 </strong><del disabled>Npr-899</del> <span style="color: rgb(0, 150, 136);">52% off</span>
</span>
</div>
<div class="mdl-card__actions mdl-card--border text-center">
<button id="share-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect pull-left">
<i class="material-icons">share</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="share-menu">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
</ul>
<span class="mdl-chip mdl-chip--contact center-block">
<span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">12</span>
<button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">thumb_up</i></button>
</span>
<button class="mdl-button mdl-button--icon mdl-button--colored pull-right"><i class="material-icons">add_shopping_cart</i></button>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">favorite</i>
</button>
</div>
</div>
</li>
</ul>
The menu is not working at all. nothing appears on click of the menu item.
Here is the sample image of the design. The red highlighted is mention as not been shown.
I found some link but that solution is not working for me Material Design Lite Menu not working in Card Design
Replacing the 'for' attribute of the 'ul' element to 'data-mdl-for' should fix the problem. This does not work for me
