Code Bunny Code Bunny - 5 months ago 43
Javascript Question

Why is the CSS Javascript dropdown menu not showing in any browser?

This is the code snippet of the navigational bar I have been trying to make using HTML5, CSS and JavaScript. The Dropdown menu I am attempting to make using CSS and Javascript is similar to the one given as an example in the W3Schools website. This is the code snippet I am using:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable= yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="FoodMeets">
<meta name="keywords" content="Restaurants, Bars, Pubs, Cafes, Nightclubs, Hangout places, Hangout zones, Chat forum, Social networking">
<meta name="robots" content="index, follow">

<!--Materialize CSS-->
<link rel="stylesheet" href="styles/materialize.min.css" />
<link rel="stylesheet" href="styles/style.css" />

<!--Normalize CSS-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">

<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<title>FoodMeets</title>
<style>
html,body{
font-family: Georgia, serif;
font-weight: normal;
font-size: 16px;
background-color: #eceff1;
}
nav{
background-color: white;}
nav ul a{
color: #17479e;
font-weight: normal;
}
nav ul a:hover{
text-decoration: none;
}
.nav-wrapper a:hover{
color: #17479e;
text-decoration: none;
}
.icon-design{
position:relative;
top: 4px;
font-size: 20px;
}
.right{
position: relative;
left: -40px;
}
.dropbtn{
display: inline-block;
}
.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>
<nav class="z-depth-1">
<div class="nav-wrapper">
<a href="#" class="brand-logo center"><img src="images/foodmeets_logo.png" style="position:relative; width:118px; height:69px; top:-2px"/></a>
<div class="container">
<ul class="left">
<li><a href="#"><span class="material-icons icon-design" aria-hidden="true">&#xE88A;</span>Home</a></li>
<li><a href="#"><span class="material-icons icon-design" aria-hidden="true">&#xE866;</span>Featured</a></li>
<li><a href="#"><span class="material-icons icon-design" aria-hidden="true">&#xE87D;</span>Favorites</a></li>
</ul>
<ul class="right">
<li><a href="#"><span class="material-icons icon-design">&#xE878;</span>Events & Offers</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
<div class="dropdown-content" id="myDropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</div>
</div>
</nav>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="scripts/materialize.min.js"></script>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>


This is the result I am getting out of this code:

Navigational Bar

But the Dropdown menu does not seem to work whatever I try to do. I am using Materialize CSS here along with Google Icons.

Can anyone tell me where I am going wrong or is there something wrong with my approach?

Answer

works for me

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable= yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="FoodMeets">
<meta name="keywords" content="Restaurants, Bars, Pubs, Cafes, Nightclubs, Hangout places, Hangout zones, Chat forum, Social networking">
<meta name="robots" content="index, follow">

<!--Materialize CSS-->
<link rel="stylesheet" href="http://materializecss.com/dist/css/materialize.min.css" />
<link rel="stylesheet" href="styles/style.css" />

<!--Normalize CSS-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">

<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<title>FoodMeets</title>
<style>
   html,body{
      font-family: Georgia, serif;
      font-weight: normal;
      font-size: 16px;
      background-color: #eceff1;
   }
   nav{
      background-color: white;}
   nav ul a{
      color: #17479e;
       font-weight: normal;
    }
    nav ul a:hover{
      text-decoration: none;
    }
    .nav-wrapper a:hover{
      color: #17479e;
      text-decoration: none;
    }
    .icon-design{
      position:relative;
       top: 4px;
      font-size: 20px;
    }
   .right{
        position: relative;
        left: -40px;
    }
   .dropbtn{
      display: inline-block;
    }
    .dropdown {
       display: inline-block;
     }

     .dropdown-content {
        display: none;
        position: absolute;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     }

     .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
      }

     .dropdown-content a:hover {background-color: #f1f1f1}

     .show {display:block;}
</style>
</head>
<body>
    <nav class="z-depth-1">
       <div class="nav-wrapper">
          <a href="#" class="brand-logo center"><img src="images/foodmeets_logo.png" style="position:relative; width:118px; height:69px; top:-2px"/></a>
          <div class="container">
             <ul class="left">
               <li><a href="#"><span class="material-icons icon-design" aria-hidden="true">&#xE88A;</span>Home</a></li>
               <li><a href="#"><span class="material-icons icon-design" aria-hidden="true">&#xE866;</span>Featured</a></li>
               <li><a href="#"><span class="material-icons icon-design" aria-hidden="true">&#xE87D;</span>Favorites</a></li>
            </ul>
            <ul class="right">
               <li><a href="#"><span class="material-icons icon-design">&#xE878;</span>Events & Offers</a></li>
               <li class="dropdown">
                  <a href="javascript:void(0)" class="dropbtn"  data-activates='myDropdown'>Dropdown</a>
                  <div class="dropdown-content" id="myDropdown">
                     <a href="#">Link 1</a>
                     <a href="#">Link 2</a>
                     <a href="#">Link 3</a>
                  </div>
               </li>
            </ul>
         </div>
      </div>
   </nav>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://materializecss.com/bin/materialize.js"></script>
<script>
    /* When the user clicks on the button, toggle between hiding and showing the dropdown content */
/*   function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }

   // Close the dropdown menu if the user clicks outside of it
   window.onclick = function(event) {
   if (!event.target.matches('.dropbtn')) {

       var dropdowns = document.getElementsByClassName("dropdown-content");
       var i;
       for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
             openDropdown.classList.remove('show');
          }
        }
    }
}*/

$('.dropbtn').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrain_width: false, // Does not change width of dropdown to that of the activator
      hover: true, // Activate on hover
      gutter: 0, // Spacing from edge
      belowOrigin: false, // Displays dropdown below the button
      alignment: 'left' // Displays dropdown with edge aligned to the left of button
    }
  );
     
</script>
</body>
</html>