Meine Navigationsleiste ist verschwunden, sobald ich auf mobile Ansicht umschalte

Meine Navigationsleiste ist verschwunden, sobald ich auf mobile Ansicht umschalte. Wenn ich den Browser verkleinere, wechselt er in die mobile Ansicht, dann klicke ich auf die Pfeil-nach-unten-Taste, um das Menü zu sehen, und klicke erneut darauf, um sie zu verbergen. Sobald ich mich verstecke und zurück zur Browseransicht wechsle, ist alles weg. Ich bin mir nicht sicher warum, ich glaube, ich habe etwas verpasst. Hier ist der Code.Meine Navigationsleiste ist verschwunden, sobald ich auf mobile Ansicht umschalte

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Search Engine</title> 
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<style> 

html, body{ 
    padding:0; 
    margin:0; 
    } 

.divbuttonright{ 
    text-align: right; 
    display: none; 
    } 

    .buttondesign{ 
    background-color: yellow; 
    border: none; 
    padding: 15px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    cursor: pointer; 
    outline: none; 
    } 

#ulstyle { 
    list-style: none; 
    padding: 0; 
    margin:0; 
    } 

li{ 
    width: 109px; 
    height: 40px; 
    float: left; 
    background-color: yellow; 
    text-align: center; 
    line-height: 40px; 
    font-family: 'Oswald', sans-serif; 
    } 

li:hover{ 
    background-color: #333333; 
    color:yellow; 
    cursor: pointer; 
    } 

    a{ 
     color:inherit; 
     text-decoration: none; 
    } 


@media screen and (max-width: 768px) { 

    .divbuttonright{ 
     display: block; 
    } 

#ulstyle { 
     background-color: pink; 
     list-style: none; 
     padding: 0; 
     margin:0; 
     width: 100%; 
     display: none; 

} 

    li{ 
     width: 100%; 
     height: 40px; 
    } 
} 




</style> 

</head> 

<body> 

<div class="divbuttonright"><button class="buttondesign" onclick="myFunction()">▼</button></div> 

<ul id="ulstyle"> 
<a href="http://google.com"><li>Google</li></a> 
<a href="http://yahoo.com"><li>Yahoo</li></a> 
<a href="http://baidu.com"><li>Baidu</li></a> 
<a href="http://aol.com"><li>AOL</li></a> 
<a href="http://ask.com"><li>Ask.com</li></a> 
<a href="http://excite.com"><li>Excite</li></a> 
<a href="http://duckduckgo.com"><li>DuckDuckGo</li></a> 
</ul> 


<script> 
function myFunction() { 
    var x = document.getElementById('ulstyle'); 
    if (x.style.display === 'block') { 
     x.style.display = 'none'; 
    } else { 
     x.style.display = 'block'; 
    } 
} 
</script> 

</body> 
</html>

Quelle

2017-03-05 Haidi

gibt es nichts, das eine nav in mob Ansicht versteckt. Sie müssen die Medienabfrage (die nicht hier sind) und Javascript überprüfen. –

Sie richten einen Inline-style="display:none;" Stil, wenn Sie das Menü in der mobilen Ansicht verstecken, die auf der Speisekarte bleiben werden, nachdem Sie zurück zur Desktop-Ansicht wechseln.

Um dies zu umgehen, wenden Sie eine Klasse auf das Menü, um es stattdessen zu verbergen, und nur diese Klasse verwenden, um das Menü in Ihren mobilen @media Abfragen auszublenden.

function myFunction() { 
 
    var x = document.getElementById('ulstyle'); 
 
    x.classList.toggle('open'); 
 
}

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.divbuttonright { 
 
    text-align: right; 
 
    display: none; 
 
} 
 

 
.buttondesign { 
 
    background-color: yellow; 
 
    border: none; 
 
    padding: 15px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    outline: none; 
 
} 
 

 
#ulstyle { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    width: 109px; 
 
    height: 40px; 
 
    float: left; 
 
    background-color: yellow; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    font-family: 'Oswald', sans-serif; 
 
} 
 

 
li:hover { 
 
    background-color: #333333; 
 
    color: yellow; 
 
    cursor: pointer; 
 
} 
 

 
a { 
 
    color: inherit; 
 
    text-decoration: none; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    .divbuttonright, 
 
    #ulstyle.open { 
 
    display: block; 
 
    } 
 
    #ulstyle { 
 
    background-color: pink; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    display: none; 
 
    } 
 
    li { 
 
    width: 100%; 
 
    height: 40px; 
 
    } 
 
}

<div class="divbuttonright"><button class="buttondesign" onclick="myFunction()">▼</button></div> 
 

 
<ul id="ulstyle"> 
 
    <a href="http://google.com"> 
 
    <li>Google</li> 
 
    </a> 
 
    <a href="http://yahoo.com"> 
 
    <li>Yahoo</li> 
 
    </a> 
 
    <a href="http://baidu.com"> 
 
    <li>Baidu</li> 
 
    </a> 
 
    <a href="http://aol.com"> 
 
    <li>AOL</li> 
 
    </a> 
 
    <a href="http://ask.com"> 
 
    <li>Ask.com</li> 
 
    </a> 
 
    <a href="http://excite.com"> 
 
    <li>Excite</li> 
 
    </a> 
 
    <a href="http://duckduckgo.com"> 
 
    <li>DuckDuckGo</li> 
 
    </a> 
 
</ul>

Quelle

2017-03-05 21:22:49

Meine Navigationsleiste ist verschwunden, sobald ich auf mobile Ansicht umschalte

Antwort

Verwandte Themen