2. Bejegyzések
  3. btz
  4. Akármi

Javascript lenyíló menü

[ ÚJ bejegyzés ]

<!DOCTYPE html>
<html>
<head>
<style>
.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;
overflow: auto;
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;
}

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

.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left: 107px;
}

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

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

.show {display:block;}
</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

<div class="dropdown">
<button id="myBtn" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
<button id="myBtn2" class="dropbtn">Dropdown</button>
<div id="myDropdown2" class="dropdown-content2">
<a href="#home">Home2</a>
<a href="#about">About2</a>
<a href="#contact">Contact2</a>
</div>

</div>

<script>
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
document.getElementById("myBtn2").onclick = function() {myFunction2()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
</script>

</body>
</html>

Hirdetés

3 pénzügyi döntés, amit minden kisvállalkozónak érdemes átgondolnia az év végéig

PR Ahogy az év vége közeledik, itt az ideje, hogy egy pillanatra megálljunk és áttekintsük vállalkozásunk pénzügyi helyzetét. Ne hagyjuk, hogy az év utolsó hónapjai elússzanak a sürgető feladatok és elfeledett határidők között!

Tovább a fórumba.