Jump to content
Voytek

Drop down menu not working

Recommended Posts

Help. 

I'm trying to implement a simple dropdown menu into html document. 
My head looks like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>QuadQuest</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link href="styles/page.css" rel="stylesheet" type="text/css">
<link href="styles/menu.css" rel="stylesheet" type="text/css">    
    <link href="webfonts/ArialNova/stylesheet.css" type="text/css">
    <script type="text/javascript" src="styles/menu.js"></script>
   <script type="text/javascript"> function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown 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;
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}</script>
</head>

 

It works in the old IE11, but don't work in Chrome and Edge. If I remove the script from the head, don't work in nether of those browsers. Any ideas please?

Share this post


Link to post
Share on other sites

Your code has been affected by the forum formatter.

Please make sure you put your code inside code blocks to prevent this from occuring

XcQfW3F.png

 

Share this post


Link to post
Share on other sites
23 hours ago, Funce said:

Your code has been affected by the forum formatter.

Please make sure you put your code inside code blocks to prevent this from occuring

XcQfW3F.png

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>QuadQuest</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link href="styles/page.css" rel="stylesheet" type="text/css">
<link href="styles/menu.css" rel="stylesheet" type="text/css">    
    <link href="webfonts/ArialNova/stylesheet.css" type="text/css">
    <script type="text/javascript" src="styles/menu.js"></script>
   <script type="text/javascript"> function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown 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>
</head>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...