0
首先URL（http://www.munksgaard.one）爲什麼我無法使用手機上的漢堡菜單進行導航？
正如你可以看到，如果你對移動的（在桌面，縮放網站下下來;寬度665像素）我有一個漢堡包菜單。它在桌面上運行「完美」，我可以點擊鏈接「forside」和「showroom」（其他頁面尚未上傳）並導航。只要我在iPhone SE上的谷歌瀏覽器上嘗試這個功能，它就不起作用，並且會給我提供/ shoowroom或/ forside的url http://www.munksgaard.com/#。
我該如何解決這個問題？哪裏不對？
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
width: 100%;
}
header {
width: 100%;
background: none;
height: 0px;
line-height: 60px;
}
.logo {
height: 70px;
width: auto;
background: none;
}
.navi {
display: none;
}
.forsidetags {
display: none;
}
.dropbtn {
line-height: 200%;
}
.hamburger {
background-color: black;
position: absolute;
top: 0;
right: 0;
line-height: 25px;
padding: 0px 15px 0px 15px;
color: #fff;
border: 0;
font-size: 1.4em;
font-weight: bold;
cursor: pointer;
outline: none;
border-radius: 0px;
}
.cross {
background-color: black;
position: absolute;
top: 0px;
right: 0;
padding: 0px 15px 0px 15px;
color: #fff;
border: 0;
font-size: 3em;
line-height: 65px;
font-weight: bold;
cursor: pointer;
outline: none;
border-radius: 0px;
}
.menu {
z-index: 1000000;
font-weight: bold;
font-size: 1.5em;
width: 100%;
background: #131313;
position: absolute;
text-align: center;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
.menu li {
display: block;
padding: 5px 0 5px 0;
border-bottom: #1d1f20 1px solid;
}
.menu li:hover {
display: block;
background: black;
padding: 15px 0 15px 0;
border-bottom: #1d1f20 1px solid;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: #fff;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: white;
}
.menu a:hover {
text-decoration: none;
color: white;
}
.glyphicon-home {
color: black;
font-size: 1.5em;
margin-top: 5px;
margin: 0 auto;
}
.container {
width: 90%;
margin: 0 auto;
}
.slideshow {
margin-bottom: 10px;
}
.slideshow img {
height: auto;
width: 100%;
box-shadow: 1px 3px 3px #aaa;
}
.salepoint img {
width: auto;
height: 30px;
}
#tekst1 {
margin-bottom: 0;
}
#text11 {
margin-top: 0;
}
#tekst2 {
margin-bottom: 0;
}
#tekst22 {
margin-top: 5px;
}
.salepoint {
border: solid 2px;
padding: 5px;
margin: 20px;
text-align: center;
}
.artikel h2 {
line-height: 0.7;
margin-top: 15px;
}
footer {
background: black;
clear: both;
overflow: hidden;
}
.socialmedia {
margin-right: 10px;
float: right;
}
.socialmedia img {
width: 30px;
height: auto;
padding: 10px 0;
margin: 10px;
display: inline;
}
.socialmedia1 {
float: left;
margin-left: 10px;
}
.socialmedia1 img {
width: 30px;
height: auto;
padding: 10px 0;
margin: 10px;
float: left;
}
.show {
margin: 0 auto;
width: 90%
}
.show img {
height: auto;
width: 100%;
margin: 0 auto;
}
.show1 {
margin: 0 auto;
width: 40%;
margin-bottom: 25px;
}
.show1 img {
height: auto;
width: 100%;
margin: 0 auto;
}
/* Cecilie CSS */
.produkt.six.columns {
margin: 2px;
width: ;
margin: 0 auto;
float: none;
overflow: hidden;
}
.produkt-billede {
width: 50%;
margin: 5px;
}
.produkt-tekst {
max-height: 300px;
width: 37%;
margin: 5px;
float: right;
}
a:hover {
color: white;
}
@media (max-width: 665px) {
.opening {
display: none;
}
}
@media (min-width: 665px) {
.menu,
.hamburger,
.cross {
display: none;
}
.salepoint {
display: none;
}
.navi {
display: block;
background: black;
margin-bottom: 8px;
font-size: 1.5em;
z-index: 1000000;
}
.kurv {
height: 40px;
width: auto;
background: none;
float: right;
margin-right: 15px;
margin-top: 12px;
}
.logo2 {
height: 70px;
width: auto;
background: none;
float: left;
}
.logo {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 4px;
overflow: hidden;
}
li {
display: inline;
padding-right: 1.2rem;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: black;
color: white
}
a:hover {
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: lightgrey;
min-width: 110px;
z-index: 10000;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: white
}
.dropdown:hover .dropdown-content {
display: block;
}
.slideshow {
max-width: 800px;
margin: 15px auto 15px auto;
}
.forsidetags {
display: block;
height: auto;
width: 900px;
margin: 0 auto;
}
/* Cecilie CSS */
.produkt.six.columns {
width: 40%;
margin: 20px;
float: left;
}
.produkt-billede {
max-height: 300px;
width: 50%;
margin: 5px;
float: left;
}
.produkt-tekst {
max-height: 300px;
width: 35%;
margin: 5px;
float: left;
}
.produkt-oversigt {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
}<!DOCTYPE HTML>
<html lang="da">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/skeleton.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Herregård Møbler</title>
</head>
<body>
<header>
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<nav>
<div class="navi">
<img class="logo2" src="img/logo2.png" alt="Herregård-logo">
<img class="kurv" src="img/kurv.png" alt="kurv">
<ul>
<li><a href="index.html">FORSIDE</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">PRODUKTER</a>
<div class="dropdown-content">
<a href="stole.html">Stole</a>
<a href="#">Borde</a>
<a href="#">Sofaer</a>
<a href="#">Kommoder</a>
</div>
</li>
<li><a href="showroom.html">SHOWROOM</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">KONTAKT</a>
<div class="dropdown-content">
<a href="#">Om os</a>
</div>
</li>
</ul>
</div>
<img class="logo" src="img/logo2.png" alt="Herregård-logo">
<div class="menu">
<ul>
<a href="index.html">
<li>FORSIDE</li>
</a>
<li class="dropdown">
<a href="#" class="dropbtn">PRODUKTER</a>
<div class="dropdown-content">
<a href="stole.html">Stole -</a>
<a href="#">Border -</a>
<a href="#">Sofaer -</a>
<a href="#">Kommoder</a>
</div>
</li>
<li class="dropdown">
<a href="showroom.html" class="dropbtn">Showroom</a>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">KONTAKT</a>
<div class="dropdown-content">
<a href="#">Om os</a>
</div>
</li>
</ul>
</div>
</nav>
<article>
<div class="container">
<div class="slideshow">
<img class="mySlides" src="img/slide1.png" alt="slideshow1">
<img class="mySlides" src="img/slide2.png" alt="slideshow2">
<img class="mySlides" src="img/slide3.png" alt="slideshow3">
<img class="mySlides" src="img/slide4.png" alt="slideshow4">
</div>
</div>
<img class="forsidetags" src="img/forsidetags2.png" alt="forsidetag">
<div class="salepoint">
<img src="img/levering.png" alt="lastbil">
<p>Hos Herregård Møbler tilbyder vi fri levering i hele Danmark for varer købt i vores webshop</p>
</div>
<div class="salepoint">
<img src="img/kvalitet.png" alt="kvalitet">
<p>Vi er dedikeret til altid at levere den bedst mulige kvalitet og den sikreste fragt.</p>
</div>
<div class="salepoint">
<img src="img/garanti.png" alt="garanti">
<p>Vi tilbyder op til 20 års udvidet garanti på vores møbler, hvis de registreres her.</p>
</div>
</article>
<footer>
<div class="socialmedia">
<img src="img/facebook.png" alt="Facebook">
<img src="img/instagram.png" alt="Instagram">
<img src="img/linkedin.png" alt "LinkedIn">
</div>
<div class="socialmedia1">
<img src="img/visa.png" alt="Visa">
<img src="img/mastercard.png" alt="Mastercard">
<img src="img/maestro.png" alt "Maestro">
</div>
</footer>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 6000);
}
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function() {
$(".menu").slideToggle("slow", function() {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function() {
$(".menu").slideToggle("slow", function() {
$(".cross").hide();
$(".hamburger").show();
});
});
</script>
</body>
</html>^這是 「forside」 HTML和我們使用本網站+ jQuery的底部在CSS文件。
請避免執行完整的代碼轉儲嘗試，將您的問題簡化爲最小的具體可驗證示例。 – Terry
對不起。我會記得下次。仍然是新的網站:-) – Munksgaard