Jak stworzyć menu rozwijanego hamburgera

, więc jestem nowy w html/css i pracuję na osobistej stronie internetowej. Mam problem z utworzeniem menu rozwijanego hamburgera. Mam ustawiony nagłówek do zmiany rozmiaru urządzenia mobilnego, ale kiedy klikam ikonę hamburgera, menu ponownie podsuwa główną nawigację. Próbuję go zagnieździć w menu głównym i mieć szerokość 100%. Jak również dodać symbol "x", aby zamknąć go, gdy użytkownik skończy go przeglądać. Mam nadzieję, że wyjaśniłem to wystarczająco dobrze, opublikuję codepen link.Jak stworzyć menu rozwijanego hamburgera

\t function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topnav"; 
 
    } 
 
}

body { 
 
    background-color: #EFF0EC 
 
} 
 

 
.header { 
 
\t padding-left: 30px; 
 
\t background-color: #FFFFFF; 
 
\t padding-top: 18px; 
 
\t padding-bottom: 18px; 
 
} 
 

 
h1 { 
 
\t font-size: 36px; 
 
\t font-family: Buenard, Times, serif; 
 
\t background-color: #FFFFFF 
 
\t float: left; 
 
\t display: inline; 
 
} 
 

 
ul.topnav { 
 
\t list-style-type: none; 
 
\t display: inline; 
 
\t float: right; 
 
\t margin: auto; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
} 
 

 
li a { 
 
\t color: #000; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t transition: 0.3s; 
 
} 
 

 
li a:hover { 
 
\t color: #80B198; 
 
} 
 

 
li { 
 
\t font-size: 22px; 
 
\t font-family: Lato, Arial sans-serif; 
 
\t padding: 10px 16px; 
 
\t display: inline-block; 
 
\t margin: auto; 
 
} 
 

 
ul. topnav li.icon { 
 
\t display: none; 
 
} 
 

 
/* Smartphone-size screens */ 
 
@media (max-width: 767px) { 
 
\t ul.topnav li {display: none;} 
 
    \t ul.topnav li.icon { 
 
    display: inline-block; 
 
    } 
 
    ul.topnav.responsive {position: relative;} 
 
    \t ul.topnav.responsive li.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    ul.topnav.responsive li { 
 
    float: none; 
 
    display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
}

<body> 
 

 
<div class="header"> 
 
     <h1>Lorem Ipsum</h1> 
 
     <ul class="topnav" id="myTopnav"> 
 
     \t <li><a class="active" href="#portfolio">Portfolio</a></li> 
 
     \t <li><a href="#about">About Me</a></li> 
 
     \t <li><a href="#contact">Contact</a></i> 
 
     \t <li class="icon"> 
 
     \t \t <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
    \t \t \t </li> 
 
\t \t </ul> 
 
    </div> 
 

 
</body>

Źródło

2016-12-30 user7311741

_ "i mieć szerokość 100%" _ Czy oznacza to 100% co do elementu nadrzędnego lub 100% jak na rzutni? – guest271314

Dlaczego nie używasz Bootstrap? Ma łatwy komponent, który wykonuje tę pracę, a także reaguje. Znasz to? – lisarko8077

@ guest271314 100% do viewport, dziękuje – user7311741

Cóż, przede wszystkim trzeba uzyskać ikonę poza ul i pozycji tego ul jako absolutnego w mobilnych urządzeniach o szerokości 100%. jeśli klikniesz ikonę hamburgera, otworzy się menu, a kliknięcie go ponownie zamknie.

Oto codepen, a poniżej znajduje się kod.

Zamiast krzyża. Myślę, że powinieneś wypróbować jedno z tych menu burger w tym codepen. można po prostu zastąpić jeden z nich z <div class="icon">

\t function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topnav"; 
 
    } 
 
}

body { 
 
    background-color: #EFF0EC 
 
} 
 

 
.header { 
 
\t padding-left: 30px; 
 
\t background-color: #FFFFFF; 
 
\t padding-top: 18px; 
 
\t padding-bottom: 18px; 
 
    position:relative; 
 
} 
 

 
h1 { 
 
\t font-size: 36px; 
 
\t font-family: Buenard, Times, serif; 
 
\t background-color: #FFFFFF 
 
\t float: left; 
 
\t display: inline; 
 
} 
 

 
ul.topnav { 
 
\t list-style-type: none; 
 
\t display: inline; 
 
\t float: right; 
 
\t margin: auto; 
 
    margin-right:50px; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
} 
 

 
li a { 
 
\t color: #000; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t transition: 0.3s; 
 
} 
 

 
li a:hover { 
 
\t color: #80B198; 
 
} 
 

 
li { 
 
\t font-size: 22px; 
 
\t font-family: Lato, Arial sans-serif; 
 
\t padding: 10px 16px; 
 
\t display: inline-block; 
 
\t margin: auto; 
 
} 
 

 
div.icon { 
 
\t position:absolute; 
 
    top:30px; 
 
    right:20px; 
 
} 
 

 
/* Smartphone-size screens */ 
 
@media (max-width: 767px) { 
 
    ul.topnav{ 
 
    position:absolute; 
 
    top:60px; 
 
    left:0; 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    background-color:white; 
 
    } 
 
\t ul.topnav li {display: none;} 
 
    \t ul.topnav li.icon { 
 
    display: inline-block; 
 
    } 
 
    ul.topnav.responsive li { 
 
    float: none; 
 
    display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
}

<body> 
 

 
<div class="header"> 
 
     <h1>Lorem Ipsum</h1> 
 
     <ul class="topnav" id="myTopnav"> 
 
     \t <li><a class="active" href="#portfolio">Portfolio</a></li> 
 
     \t <li><a href="#about">About Me</a></li> 
 
     \t <li><a href="#contact">Contact</a></li> 
 
    \t \t </ul> 
 
     <div class="icon"> 
 
     \t \t <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
    \t \t \t </div> 
 
    </div> 
 

 
</body>

Źródło

2016-12-30 04:47:55 ab29007

proszę przyjąć moją odpowiedź, jeśli to rozwiąże twój problem. wiesz, kliknij na znacznik wyboru po lewej stronie mojej odpowiedzi. – ab29007

Jak stworzyć menu rozwijanego hamburgera

Odpowiedz

Powiązane problemy