Multiple drop down link buttons on one page


#1

I'm trying to create a website that has multiple buttons that will cause a drop down menu to appear. Each drop down menu will have different things that you can from. So far I'm not having any luck. I'm not sure what I'm doing wrong. I'm using CSS, Java and HTML for the button right now. I have the CSS and JavaScript in a separate file. Below I have listed all the coding in each doc. I have tried changing; classes to ids, ids to classes, the names to different things. Either the first button opens, regardless of which one I click on, or nothing happens, no drop down or anything. Any ideas or help is greatly appreciated. Thank you in advance.

HTML Doc

<!DOCTYPE HTML>
<html>
<head>
		<title>Title Here</title>
		<meta name="GENERATOR" content="Arachnophilia 4.0">
		<meta name="FORMATTER" content="Arachnophilia 4.0">
		<meta name="keywords" content="content here">
		<meta name="description" content="Contains information on strategies .">
		<link rel="stylesheet" href="/Subcode/CSS/index.css" type="text/css" media="screen">
		<link rel="stylesheet" href="/Subcode/CSS/dropdownbuttons.css" type="text/css" media="screen">
		<script src="Subcode/Java/button.js"></script>
		<link rel="search" href="Subcode/xhtml/search.xml" type="application/opensearchdescription+xml" title="Open Search">
	</head>
	<body background="Images/Background/Finished/bg1.jpg">		
		<div class="sleft">
			<div class="webDD">
				<button onclick="webInfo()" class="webDropbtn">A button</button>
  				<div id="webDD" class="webDDCon">
					<a href="about.html">About the Site</a><br>
					<a href=""></a><br>
					<a href=""></a><br> 
				</div>
			</div>
				<div class="dropdown">
				<button onclick="myFunction()" class="dropbtn">A button</button>
  				<div id="myDropdown" class="dropdown-content">
				<a href=""></a><br>
				<a href=""></a><br>
				<a href=""></a><br>
				<a href=""></a><br>
				</div>
			</div>
			<link rel="stylesheet" href="/Subcode/CSS/dropdownbutton.css" type="text/css" media="screen">
				<div class="dropdown">
				<button onclick="myFunction()" class="dropbtn">A button</button>
  				<div id="myDropdown" class="dropdown-content">
				<a href=""></a><br>
				<a href=""></a><br>
				<a href=""></a><br>
				<a href=""></a><br>
				</div>
			</div>	
				<div class="dropdown">
				<button onclick="myFunction()" class="dropbtn">A button</button>
  				<div id="myDropdown" class="dropdown-content">
				<a href=""></a><br>
				</div>
			</div>	
				<div class="dropdown">
				<button onclick="myFunction()" class="dropbtn">A button</button>
  				<div id="myDropdown" class="dropdown-content">
				<a href=""></a><br>
				</div>
			</div>
				<div class="dropdown">
				<button onclick="myFunction()" class="dropbtn">A button</button>
  				<div id="myDropdown" class="dropdown-content">
				<a href=""></a><br>
				</div>
			</div>
			<div class="dropdown">
				<button onclick="myFunction()" class="dropbtn">A button</button>
  				<div id="myDropdown" class="dropdown-content">
				<a href=""></a><br>
				</div>
			</div>
			<div class="dropdown">
				<button onclick="myFunction()" class="dropbtn">A button</button>
  				<div id="myDropdown" class="dropdown-content">
				<a href=""></a><br>
				</div>
			</div>
			<div class="dropdown">
				<button onclick="myFunction()" class="dropbtn">A button</button>
  				<div id="myDropdown" class="dropdown-content">
				<a href=""></a><br>
				</div>
			</div>		
		</div>
		<div class="mbody">
			
		</div>
		<div class="bottom">
			
		</div>
	</body>
</html>

CSS Doc

/* Dropdown Button A */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

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

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

.show {display:block;}

JavaScript Doc

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');
      }
    }
  }
}

#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.