diedVIPs

html knowhow

Menü als Dropdown










Menü als Dropdown

Das

So sieht´s aus


Quellcode
<html>
<head>

<style type="text/css">
.dropbtn {background-color: #3498DB;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;}
.dropbtn:hover, .dropbtn:focus {background-color: #2980B9;}
.dropdown {position: relative;display: inline-block;}
.dropdown-content {display: none;position: absolute;background-color: #f1f1f1;min-width: 160px;overflow: auto;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 a:hover {background-color: #ddd;}
.show {display: block;}
</style>
<head>

<body >
<div class="dropdown">
<button onclick="myFunction()" 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>
</div>

<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 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>




Dropdown, das im neuen Fenster öffnet

Das

So sieht´s aus

Quellcode
<html>
<head>hier nichts

<style type="text/css">Hier nichts</style>
<head>

<body>
<form name="menuform">
<select size="1" name="jumpit" onchange="document.location.href=this.value">
<option value="#" selected>Kategorie wählen</option>
<option value="/index.html">Home Page</option>
<option value="/internet/index.html">Internet Tutorials</option>
<option value="/internet/javascript/index.html">JavaScript Samples</option>
</select>
</form>

</body>
</html>



Dropdown, das im selben Frame öffnet

Das

So sieht´s aus

Quellcode
<html>
<head>hier nichts

<style type="text/css">Hier nichts</style>
<head>

<body>
<form name="menuform">
<select name="menu2"
onChange="top.location.href = this.form.menu2.options[this.form.menu2.selectedIndex].value;
return false;">
<option value="#" selected>Kategorie wählen</option>
<option value="/index.html">Home Page</option>
<option value="/internet/index.html">Internet Tutorials</option>
<option value="/internet/javascript/index.html">JavaScript Samples</option>
</select>
</form>

</body>
</html>









Kontakt    Datenschutz    Impressum