DropDown-Menu Links für Handy?
wenn ich mein dropdown-menu habe, und ich will dass wenn sich dieses dropdown-menu öffnet und die kategorien zum auswählen bereitstellt, dass wenn ich auf die Kategorie klicke dann sich ein link öffnet, dies funktioniert mit meinem html code (auf der website version) perfekt, jedoch funktioniert dies nicht in der smartphone ansicht, warum das ?
Falls es hilft hier dier html-code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Language Selection</title>
<style>
/* Dropdown Button */
.dropbtn {
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content */
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 100px;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
z-index: 1;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin: 8px 0;
}
/* Links inside the dropdown */
.dropdown-content a {
color: transparent;
padding: 15px 13px;
text-decoration: none;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: transparent; /* Ändere die Hintergrundfarbe beim Hover */
}
/* Show the dropdown menu when hovering over the dropdown */
.dropdown:hover .dropdown-content {
display: block;
}
/* Keep the dropdown menu open when hovering over it */
.dropdown:hover .dropbtn {
background-color: transparent;
}
</style>
</head>
<body>
<div class="gtco-loader"></div>
<div id="page">
<nav class="gtco-nav" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-2 col-xs-12">
<div id="gtco-logo"><a href="index.html">Endo<em>scopy</em></a></div>
</div>
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active"><a href="#" data-nav-section="home">Home</a></li>
<li><a href="#" data-nav-section="about">Über uns</a></li>
<li><a href="#" data-nav-section="practice-areas">Anwendungsbereiche</a></li>
<li><a href="#" data-nav-section="technics">Operationstechniken</a></li>
<li><a href="#" data-nav-section="our-team">Unser Team</a></li>
<li class="btn-cta"><a href="#" data-nav-section="contact"><span>Kontakt</span></a></li>
<li class="dropdown">
<div class="dropdown">
<a href="#" class="dropbtn">Deutsch ∨</a>
<div class="dropdown-content">
<p><a href="italiano.html" class="italiano">Italiano</a></p>
<p><a href="english.html" class="english">English</a></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<script>
// JavaScript to handle dropdown menu clicks
document.addEventListener("DOMContentLoaded", function() {
var dropdownButtons = document.querySelectorAll(".dropdown .dropbtn");
var dropdownContents = document.querySelectorAll(".dropdown .dropdown-content");
// Function to toggle the dropdown content visibility
function toggleDropdown(index) {
if (dropdownContents[index].classList.contains("show")) {
dropdownContents[index].classList.remove("show");
} else {
dropdownContents[index].classList.add("show");
}
}
// Close dropdown content if clicked outside the dropdown
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
dropdownContents.forEach(function(content) {
content.classList.remove("show");
});
}
});
// Handle dropdown button clicks
dropdownButtons.forEach(function(button, index) {
button.addEventListener("click", function(event) {
event.stopPropagation(); // Prevent the document click event
toggleDropdown(index);
});
});
// Handle dropdown options clicks
var dropdownOptions = document.querySelectorAll(".dropdown-content a");
dropdownOptions.forEach(function(option) {
option.addEventListener("click", function(event) {
// Prevent default action
event.preventDefault();
// Redirect to the selected page
window.location.href = option.getAttribute("href");
});
});
});
</script>
</body>
</html>
Irgendwie kann man mit dem Firefox unter Android nicht mehr direkt Dateien öffenen oder es wurde so sehr geändert, dass ich nicht weiß, wie.
Wollte es eig mal testen aber naja...
es funktioniert weder in dem ich es mit meinem iphone öffne noch bei google mit nem html viewer
Hast du es mit einem richtigem, vollwertigem Browser (zb. Firefox) probiert?
nein hab ich nicht (meinst du auf meinem smartphone), aber es wäre wichtig dass es auf safari auch funktioniert
1 Antwort
Ich versuche mal zu verstehen was dein Problem ist und werde dir meine Variante hier posten. Ich versuche so gut wie möglich an deinem Beispiel anzupassen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Language Selection</title>
<style>
.dropbtn {
font-size: 16px;
border: none;
cursor: pointer;
background: none;
}
.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;
}
.dropdown-content.show {
display: block;
}
@media (max-width: 768px) {
.dropdown-content {
position: static;
}
}
</style>
</head>
<body>
<nav class="gtco-nav" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-2 col-xs-12">
<div id="gtco-logo"><a href="index.html">Endo<em>scopy</em></a></div>
</div>
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active"><a href="#" data-nav-section="home">Home</a></li>
<li><a href="#" data-nav-section="about">Über uns</a></li>
<li><a href="#" data-nav-section="practice-areas">Anwendungsbereiche</a></li>
<li><a href="#" data-nav-section="technics">Operationstechniken</a></li>
<li><a href="#" data-nav-section="our-team">Unser Team</a></li>
<li class="btn-cta"><a href="#" data-nav-section="contact"><span>Kontakt</span></a></li>
<li class="dropdown">
<button class="dropbtn">Deutsch ∨</button>
<div class="dropdown-content">
<a href="italiano.html" class="italiano">Italiano</a>
<a href="english.html" class="english">English</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
<script>
document.addEventListener("DOMContentLoaded", function() {
var dropdownButton = document.querySelector(".dropdown .dropbtn");
var dropdownContent = document.querySelector(".dropdown .dropdown-content");
dropdownButton.addEventListener("click", function(event) {
event.stopPropagation();
dropdownContent.classList.toggle("show");
});
window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {
if (dropdownContent.classList.contains("show")) {
dropdownContent.classList.remove("show");
}
}
});
var dropdownOptions = document.querySelectorAll(".dropdown-content a");
dropdownOptions.forEach(function(option) {
option.addEventListener("click", function(event) {
event.stopPropagation();
});
});
});
</script>
</body>
</html>
Viel Erfolg