Chcę kliknąć ikonę menu hamburgera, a następnie mieć wyświetlanie listy pod moją ikoną. Skonfigurowałem ikonę menu hamburgera z tym stylem

.menu-btn div {
    position: absolute;
    left: 100%;
    top: 64%;
    padding-right: 8px;
    margin-top: -0.50em;
    line-height: 1.2;
    font-size: 18px;
    font-weight: 200;
    vertical-align: middle;
    z-index: 99;
}

.menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px 0;
    background: #989da1;
    z-index: 99;
}

Menu opcji, które powinno pojawić się po kliknięciu menu hamburgera jest

 <div class="responsive-menu">
    <ul id="menu">
       <li>Vote</li>
       <li>Search</li>
       <li>About</li>
       <li>Log In</li>
    </ul>
 </div>

Ale nie jestem niejasny, jak skonfigurować styl menu hamburgera, więc taht pojawia się bezpośrednio w menu hamburger po kliknięciu. W tej chwili, jego pojawia się wyśrodkowany na górze ekranu - https://jsfiddle.net/wtp1k57b/1 /. Jak założyć taki styl?

PS - Szukam rozwiązania, które nie polega na trudnych wartościach numerycznych (np. Top: 27px) Pixel. Z pewnością dobrze jest zdobyć rzeczy do pracy w moim małym skrzypie, ale w mojej szerszej aplikacji nie mogę zagwarantować, jak duży lub mały będzie menu hamburgera.

5
user7055375 6 luty 2018, 21:33

5 odpowiedzi

Najlepsza odpowiedź

Chciałbym pokazać zupełnie inne podejście bez użycia display: flex.

HTML

Twoje podejście używa moim zdaniem zbyt wielu opakowań. Zdecydowanie można zmniejszyć ilość divs. Ponadto należy zawsze starać się używać znaczników semantycznych nad ogólnymi tagami, takimi jak div lub ul. Rozważmy patrząc na Artykuł.

Stąd, jako @scooterlord wspomniano, należy użyć button dla ikony hamburgera. Ponadto zalecam użycie nav zamiast listy.

CSS

Przede wszystkim należy pakować atrybuty dla tego samego selektora w tym samym miejscu w celu zwiększenia jasności. Nie powinieneś mieć trzech sekcji, w których stosujesz selektor uniwersalny, ale połącz go do jednego. Ponadto nie ustawiaj box-sizing do określonej wartości, ale raczej ustawić go do inherit, dzięki czemu zawsze możesz zastąpić tę wartość dla określonego elementu bez konieczności prowadzenia tego dla wszystkich swoich dzieci. Ponadto nie rozumiem, co chcesz osiągnąć za pomocą margin: 0 auto na wszystkich elementach i {x3}}. Nie ma dla mnie sensu.

Ponieważ nie chcesz używać absolutnego pozycjonowania, zdecydowanie doradzę uniknąć używania pikseli jako jednostki pomiarowej. Zachowują się źle, jeśli niektórzy ludzie zmieniają domyślną font-size z powodu słabych wzroku lub innych powodów. Zamiast tego rozważ, aby zastosować względne jednostki, takie jak rem, em lub %. Ustawiając element korzeniowy font-size do 62.5% nadal jesteś w stanie obliczyć, jak gdybyś używał pikseli (1Rem = 10px).

Jak już wspomniałem, unikałem użycia display: flex dla takiej trywialnej rzeczy. Nie rozumiem, dlaczego w tym momencie należy użyć. Dlatego też musiałem zmienić pozycjonowanie przycisku menu. Nawigacja może być łatwo umieszczona przy użyciu procentowych dla top i left.

W boku Uwaga: Powinieneś naprawdę spróbować tylko publikować odpowiedni kod CSS - pierwszy krok dla mnie był usunięcie wszystkich nieistotnych części.

Ostateczne rozwiązanie

To moje ostateczne rozwiązanie bez flexbox, bez stałych rozmiarów i bez absolutnego pozycjonowania przy użyciu px:

$('.menu-btn').click(function() {
  $('nav').toggleClass('nav-open');
});
* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  font: 1.6rem/1.4 Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

header {
  width: 100%;
  background-color: orange;
  text-align: center;
  padding: 1rem;
  position: relative;
}

nav {
  display: none;
  width: 30rem;
  padding: 5rem;
  background-color: #ededed;
  position: absolute;
  right: 5%;
  top: 100%;
}

.nav-open {
  display: block;
}

nav a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1.4rem 1.6rem;
  text-decoration: none;
  cursor: pointer;
  font-size: 2.2rem;
  color: #000;
}

nav a:hover {
  background-color: #111;
  color: #fff;
}

.menu-btn {
  position: absolute;
  right: 5%;
  top: 50%;
  margin-top: -1.1rem;
  display: inline-block;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: transparent;
}

@media only screen and (min-width: 500px) {
  .menu-btn, nav {
    display: none !important;
  }
}

.menu-btn span {
  display: block;
  width: 2rem;
  height: 0.2rem;
  margin: 0.4rem 0;
  background: #989da1;
  z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h2>Page Title</h2>
  <button class="menu-btn">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <nav>
    <a href="vote.html">Vote</a>
    <a href="search.html">Search</a>
    <a href="about.html">About</a>
    <a href="login.html">Log In</a>
  </nav>
</header>

Lub zobacz To skrzypce.

0
Anonymous 12 luty 2018, 14:36

Użyj właściwości css: top i right, aby ustawić pozycję elementu pod ikoną.

#menu
{
  position: absolute;
  top: 48px;
  right: 2px;

  background: #ededed;
  list-style-type: none;
}
0
Joel García 6 luty 2018, 19:00

Użyj tego CSS do menu - brak marginesu, a pozycja zdefiniowana przez ustawienia top i right:

#menu {
  position: absolute;
  width: 300px;
  margin: 0;
  padding: 50px;  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  top: 50px;
  right: 0;
}

https://jsfiddle.net/meuexde6/

Przesyłam przejście do testowania, ale powinieneś w zasadzie animować parametr {X0}} z -100px do 0, aby osiągnąć to, co wydawało się mieć na myśli.

Dodawanie po komentarzu:

Aby zdefiniować pozycję menu w stosunku do przycisku, musisz zastosować position: relative do ich wspólnego elementu nadrzędnego, .mobile-nav. Wartości położenia elementu z {x2}} zawsze odnoszą się do pierwszego przodka, który ma position: relative.

Zmieniłem odpowiednio wartości w moim zaktualizowanym skrzypiec:

#menu {
  position: absolute;
  width: 300px;
  margin: 0;
  padding: 50px;  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  top: 40px;
  right: -32px;
}

Zaktualizowano skrzypce: https://jsfiddle.net/meuexde6/1/

Jeśli naprawdę chcesz, aby menu utrzymać bezpośrednio do przycisku (trudno powiedzieć - nie ma obramowania), po prostu dostosuj wartości top i right w razie potrzeby.

0
Johannes 8 luty 2018, 21:39

Elementy semantyczne HTML5.

details > summary {
  padding: 2px 6px;
  width:12px;
  border: none;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

ul{
list-style: none;
margin-left:0;
padding-left:0;
}
<details>
  <summary>☰</summary>
  <ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  </ul>
</details>
0
Ronnie Royston 8 luty 2018, 23:05

Więc tutaj idzie. Wiem, że proszę o rozwiązanie konkretnego problemu, rozwiązałem go w porządku, ale nie mogłem pomóc za zauważając, że walczysz z kodem. Musisz uprościć sposób, w jaki myślisz, a twój kod stanie się szczuplejszy. Celem tego forum jest pomóc innym stać się lepszym, prawem? :)

HTML

Dobrą praktyką jest utrzymanie przycisku przełączania menu na zewnątrz menu - rozwiąże wiele problemów - sprawdź poniżej.

Nie jest semantycznie prawo do używania niczego innego niż button dla funkcji przełączania, więc dlaczego nie używać tutaj button? Wyjął też niepotrzebny bałagan z kodu, jak jakiś div s i id - id można handlować za pomocą class, twoje połączenie. Usunięłem też .mobile-nav, ponieważ w ogóle nie jest potrzebny.

<button class="menu-btn">
  <span></span>
  <span></span>
  <span></span>
</button>

<div class="responsive-menu">
  <ul id="menu">
    <li>Vote</li>
    <li>Search</li>
    <li>About</li>
    <li>Log In</li>
  </ul>
</div>

CSS

Absolutnie umieściłem menu-btn w prawym górnym rogu i dał mu width równa #pageTitle height (które ustawiam na 50px - złoty standard), aby zachować to prostokątne; Powinien być zasadą, że przyciski przełączania są prostokątne i zawsze taką samą wysokość jak górny pasek nawigacyjny - w tym przypadku przed wspomnianym przed wspomnianym id. To samo, co zrobiłem dla .responsive-menu. Jestem absolutnie umieszczony, jak pokazano poniżej. Zmiany pozwoliły mi usunąć wiele stylizacji CSS - teraz przestarzały - jak na przykład bezwzględne pozycjonowanie menu ul wewnątrz .responsive-menu.

.menu-btn {
  position:absolute;
  display:block;
  right:0;
  top:0;
  width:50px;
  height:50px;
  background:yellow;
  border:none;
  padding:16px;
}

.responsive-menu {
  position: absolute;
  top: 50px;
  right: 0;
  display: none;
}

JavaScript

Lata praktyki zdałem sobie sprawę, że najbardziej skuteczny sposób przełączenia menu zamiast dodawania i usuwania klas jest dodanie class na znaczniku body; Może to pomóc w sterty, jeśli chcesz przywrócić wszystko na stronie, w zależności od wejścia w menu jest otwarte lub nie.

$('.menu-btn').on('click', function() {
  $('body').toggleClass('responsive-menu-open');
});

Oto pracujący JSFiddle: https://jsfiddle.net/scooterlord/4atafhge/

Mógłbym zrobić wiele innych rzeczy, aby uzyskać jeszcze bardziej dalsze uproszczenie kodu - usunąć niepotrzebne identyfikatory i klasy, ponieważ większość elementów uważa się za unikalne i mogą być ukierunkowane przy użyciu klas potomnych, np. .responsive-menu ul itp. Po wielu Praktyka, uda ci się myśleć prostsze i produkować kod z mniejszym śladem.

Edytuj: Jeśli chodzi o fakt, że nie lubisz pikseli Absolute do wyrównania tutaj jest sztuczką.

Dając stały height do pojemnika nadrzędnego, równe przycisku przełączania - w tym przypadku "#pagetitle" i ustawienie jego pozycji do relative umożliwia korzystanie z top:100%, aby prawidłowo umieścić responsywę Menu dokładnie poniżej przycisku (który jest zasadniczo tej samej wysokości):

#pageTitle {
  display: flex;
  height: 50px;
  position:relative;
}

.responsive-menu {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
}

Oto zaktualizowany skrzypce: https://jsfiddle.net/scooterlord/4atafhge/1/9/a/a >.

Edytuj: Natalia, dałem to pomysłowi i oto to, z czym wymyśliłem. Stworzyłem absolutnie pozycjonowany .menu-wrapper, w środku umieściłem przycisk i responsywne menu z float:right i bez pozycjonowania - aka są umieszczone statycznie. Nie więcej wartości pikseli! !

.menu-wrapper {
  position:absolute;
  top:0;
  right:0;
}
.menu-btn {
  float:right;
  ...
}
.responsive-menu {
 float:right;
  clear:both; // to clear the .menu-btn and sit exactly below it
  ...
}

Oto działający skrzypce: https://jsfiddle.net/scooterlord/4atafhge/2/9/a/a >.

0
scooterlord 9 luty 2018, 21:40