responsive toggle navbar - mit css nur

Question

Ich versuche, ein responsives Toggle-Menü mit CSS nur und unten ist der Code. Jede Art von Hilfe wird spürbar sein. Kein Javascript oder Jquery - nur CSS. Unten ist das Code-Snippet mit css und html-es ist klar.

* { 
 
    box-sizing: border-box; 
 
} 
 
.container{ 
 
\t max-width: 900px; 
 
\t margin: 0 auto; 
 
} 
 
.p-t { 
 
    display: table; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.p-t .p-to { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
} 
 
.text-right { 
 
    text-align: right; 
 
} 
 
.p-header{ 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 80px; 
 
    background-color:#c6c6c6; 
 
\t z-index: 1000; 
 
} 
 
.list-inline > li { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 
.p-header .list-inline li a{ 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t color: #FFFFFF; 
 
\t font-size: 16px; 
 
\t padding: 0 20px; 
 
\t line-height: 80px; 
 
} 
 
.p-header .list-inline li.active a, 
 
.p-header .list-inline li a:hover{ 
 
\t color: #FFFFFF; 
 
\t opacity: 1; 
 
}

<div class="p-header"> 
 
\t <div class="container"> 
 
\t \t <div class="p-t"> 
 
\t \t <div class="p-to"><a><img src="white.png"></a></div> 
 
\t \t \t <div class="p-to text-right"> 
 
\t \t \t \t <ul class="list-inline header-menu"> 
 
\t \t \t \t \t <li><a>Home</a></li> 
 
\t \t \t \t \t <li><a>BUsiness</a></li> 
 
\t \t \t \t \t <li><a>About</a></li> 
 
\t \t \t \t \t <li><a>Login</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

Leider ist das Umschalten ohne ein bisschen Javascript unmöglich. Ich schlage vor, geben Sie a eine ID. Was auch immer Sie wollen zeigen/verstecken es eine ID geben, zum Beispiel navbar

<a id="nav-toggle" style="display: none"><img src="white.png"></a> 
<div id="navbar">navbar ul goes in here</div> 

automatisch Um die navbar zu verstecken bis zu einer bestimmten Anzeige Breite oder Höhe einer Medien Abfrage verwenden:

@media (max-width: 600px) { 
    #nav-toggle { 
     display: inline; 
    } 
    #navbar { 
     display: none; 
    } 
} 

Sie können tun JS etwas wie folgt aus:

var toggler = document.getElementById('nav-toggle'); 
var navbar = document.getElementById('navbar'); 
toggler.addEventListener('click',() => { 
    if(navbar.style.display === 'none') { 
     navbar.style.display = 'block'; 
    } else { 
     navbar.style.display = 'none'; 
    } 
}); 

JS Fiddle

Answer 2

Eine Möglichkeit, CSS für kleinere Bildschirme zu machen, ist Medienanfragen zu tun.

Wenn also ein Bildschirm unter 768px Ihre Seite durchsucht, werden diese Werte übernommen.

Answer 3

Ich habe deine Frage nicht ganz verstanden. Aber ich nehme an. Ich habe Folgendes getan, indem ich eine Eingabe als Kontrollkästchen mit einem Label verwendete. Die Checkbox hat eine Flag-Prüfung als wahr und falsch. Wenn es aktiviert ist, sendet es einen wahren Hinweis auf das mobile Klassenmenü zur Anzeige: block. Ich habe die Opazität in der Checkbox verwendet, um sie auszublenden. Wenn Sie also auf das Hamburger-Symbol klicken, klicken Sie auf das Kontrollkästchen. (Resize to 700px, für Hamburger-Icon) Hier ist was ich getan habe. Entschuldige mein Schreiben und Englisch.

// This JS is use to change between the hamburger icon and the X icon 
 
checkbox = document.getElementById("hamburger"); 
 
lab = document.getElementsByTagName("label"); 
 

 
function checker(){ 
 
\t if(checkbox.checked == false){ 
 
    \t lab[0].innerHTML = '☰'; 
 
    }else{ 
 
    \t lab[0].innerHTML = '✖'; 
 
    } 
 
} 
 

 
checkbox.onclick = function(){ 
 
\t checker(); 
 
}

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 
.container{ 
 
\t max-width: 900px; 
 
\t margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.list-inline{ 
 
    list-style: none; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 40%; 
 
    justify-content: space-around; 
 
    align-content: center; 
 
    height: 100px; 
 
    align-items: center; 
 
} 
 
.list-inline li a{ 
 
    color: black; 
 
    cursor: pointer; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
.list-inline li a:hover{ 
 
    color: #ff0f00; 
 
} 
 

 
#hamburger{ 
 
    padding: 10px; 
 
    position: absolute; 
 
    top:20px; 
 
    left:15px; 
 
    z-index: 5; 
 
    opacity: 0; 
 
} 
 
input[type="checkbox"]{ 
 
    width:30px; 
 
    height:30px; 
 
    border-radius:5px; 
 
    border:2px solid #555; 
 
} 
 

 
label{ 
 
    font-size: 3em; 
 
    position: absolute; 
 
    left: 8px; 
 
    cursor: pointer; 
 
    display: none; 
 
} 
 
.mobile{ 
 
    list-style:none; 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding: 0; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    transform: translateY(-300px); 
 
    transition: all 0.5s ease-in-out; 
 
    text-align: center; 
 
    background: #00a86b; 
 
} 
 

 
.mobile li{ 
 
    padding-top: 10px; 
 
} 
 

 
.mobile-menu{ 
 
    display:none; 
 
} 
 

 
@media (max-width: 800px){ 
 
    label{ 
 
    display:block; 
 
    z-index:4; 
 
    } 
 
    .list-inline{ 
 
    display:none; 
 
    } 
 
    .mobile{ 
 
    padding: 20px 0; 
 
    } 
 
    .mobile-menu{display: block;} 
 
    .mobile li a{ 
 
    transition: all 0.3s ease-in-out; 
 
    cursor: pointer; 
 
    color: #ffffff; 
 
    } 
 
    .mobile li a:hover{ 
 
    color: red; 
 
    } 
 
    #hamburger{cursor: pointer;} 
 
    input[type=checkbox]:checked ~ ul.mobile{ 
 
    transform: translateY(0); 
 
    } 
 
}

<div class="container"> 
 
    <div class="mobile-menu"> 
 
     <input id="hamburger" type="checkbox" name="hamb" value="hamb"> 
 
     <label for="hamb">☰</label> 
 
     <ul class="mobile"> 
 
\t \t \t \t \t <li><a>Home</a></li> 
 
\t \t \t \t \t <li><a>Business</a></li> 
 
\t \t \t \t \t <li><a>About</a></li> 
 
\t \t \t \t \t <li><a>Login</a></li> 
 
\t \t \t </ul> 
 
    </div> 
 
\t \t <ul class="list-inline header-menu"> 
 
\t \t \t <li><a>Home</a></li> 
 
\t \t \t <li><a>Business</a></li> 
 
\t \t \t <li><a>About</a></li> 
 
\t \t \t <li><a>Login</a></li> 
 
\t \t </ul> 
 
</div>

JSFiddle