wie Responsive Navbar zu erstellen wie http://jacksbarlondon.co.uk/

Question

Ich brauche keine build eine responsive mobile navbar wie http://jacksbarlondon.co.uk/ in dieser mobilen http://jacksbarlondon.co.uk/ Website-Version, während ich auf Navbar-Symbol klickte ein Pop-up kommt. Wie man ein Pop-up ähnlich wie dieser Sit machen kann? bitte helfen

Answer 1

Hier ist eine schnelle reine CSS-Lösung. Ich hoffe es hilft. Sie müssen es anpassen, um mehr an Ihre Bedürfnisse anzupassen.

.mobile-menu > .trigger:focus + ul { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    background: rgba(47, 55, 59, 0.8); 
 
} 
 
.trigger { 
 
    background: rgba(47, 55, 59, 1); 
 
    border-radius: 50%; 
 
    padding: 10px; 
 
    color: #fff; 
 
    font-size: 10px; 
 
    text-decoration: none; 
 
} 
 
.navigation-mobile { 
 
    visibility: hidden; 
 
    -webkit-transition: 0.4s ease; 
 
    transition: 0.4s ease; 
 
    list-style: none; 
 
} 
 
.navigation-mobile a { 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    font-size: 25px; 
 
    line-height: 2; 
 
    letter-spacing: 5px; 
 
    text-decoration: none; 
 
}

<div class="mobile-menu"> 
 
    <a href="#" class="trigger"> &#9776;</a> 
 
    <ul class="navigation-mobile"> 
 
    <li> 
 
     <a href="#">Demo 1</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Demo 2</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Demo 3</a> 
 
    </li> 
 
    </ul> 
 
</div>