Css i html: wysuwane menu

Question

Witam, znalazłem na internecie kod do wysuwanego menu tylko z użyciem htmla i cssa. Dot prezentuje sie tak:

Html:

  <nav class="site-nav">
    <button class="side-menu-trigger">Menu</button>
    <aside class="side-menu">
      <ul>
        <li>
          <a href="">
            About us
          </a>
        </li>
        <li>
          <a href="">
            Some other thing
          </a>
        </li>
        <li>
          <a href="">
            Yet another one
          </a>
        </li>
        <li>
          <a href="">
            Subscribe! 
          </a>
        </li>
        <li>
          <a href="">
            Foo
          </a>
        </li>
		</ul>
</div>	

Css:

.site-nav {

  justify-content: flex-end;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  height: 20px;
  width: 100%;
  background: black;
}

.side-menu-trigger {
  border: 0;
  border-radius: 5px;
  background: #ffffff;
  
}

.side-menu {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  width: 300px;
  top: 20px;
  right: -300px;
  padding: 0;
  background: black;
  transition: 0.3s transform ease-in-out;
}

.side-menu ul {
  position: absolute;
  display: flex;
  height: calc(100% - 20px);
  flex-wrap: wrap;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  align-content: flex-start
}

.side-menu ul li {
  display: flex;
  height: 30px;
  background: black;
  flex-basis: 100%;
  margin-top: 20px;
  color: #696e9e;
  border-radius: 5px;
  overflow: hidden;
  
}

.side-menu ul li a {
  display: flex;
  padding: 10px;
  align-items: center;
  width: 100%;
  height: 100%;
  background: black;
  text-decoration: none;
  box-sizing: border-box;
}

.side-menu-trigger:focus ~ .side-menu, .side-menu:hover {
  transform: translateX(-300px); 
}

Może mi ktoś powiedzieć, co dodać (lub zmienić) żeby nie tylko przycisk, ale i menu było po lewej stronie? Próbowałem to lekko zmieniać ale niezbyt ogarniam tego cssa i jedyny efekt jaki otrzymałem to to że przycisk jest po lewej, ale tego żeby menu wysuwało się z lewej nie potrafie już uzyskać. Jeśli ktoś mógłby mi powiedzieć co dodać/zmienić/usunąć byłbym baaardzo wdzięczny.

Comments

Potrzebny jest ten przycisk? czy może go nie być.

---

Obojętnie ważne żeby dało się wysuwać i chować menu

---

Jeżeli najeżdżanie na menu wystarcza to coś takiego wykombinowałem 

https://codepen.io/wizarddos/pen/JjRgKPK

i doadtkowo usunąłem marginesy i zmieniłem kolor linków 

---

Dzięki wielkie, super działa

---

@wizadkol123, mam tylko takie pytanie. Czy dało by się dać jakieś oznaczenie? tj. np kwadrat z napisem"menu", żeby osoby odwiedzające tą stronę wiedziały, że jak najadą myszką w lewo to otworzy się menu. Da się coś takiego zrobić?

 

---

Gdy w kodzie css umieszczacie taki zapis

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

w innych częściach kodu css odnoszący się już do konkretnych elementów html jest zbędny - kaskadowość 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.side-menu {
 display: flex;
 box-sizing: border-box; // <-- można to usunąć
 position: absolute;
 height: 100%;
 width: 300px;
 top: 20px;
 left: -290px; 
 padding: 0;
 background: black;
 transition: 0.3s transform ease-in-out;
}

 

---

@Samek2222,

np kwadrat z napisem"menu", żeby osoby odwiedzające tą stronę wiedziały, że jak najadą myszką w lewo to otworzy się menu. Da się coś takiego zrobić?

można pionowy napis menu, wstawić 

---

a podałbyś mi kod i w którym miejscu? sory ze prosze o gotowca ale nie ogarniam

---

Jeśli chodzi o menu hamburger to może skorzystaj z gotowych inspiracji z Internetu

np. https://www.aurainweb.pl/2018/02/nietypowe-menu-na-twoja-strone-inspiracje-cssjs/

może znajdziesz coś dla siebie , a nawet przerobisz i wyjdzie jakiś oryginalny pomysł.

---

How TO - Side Navigation  

Answer 1

Moja Propozycja Jest taka :

  <nav class="site-nav">
    <button class="side-menu-trigger">Menu</button>
    <aside class="side-menu">
      <ul>
        <li>
          <a href="">
            About us
          </a>
        </li>
        <li>
          <a href="">
            Some other thing
          </a>
        </li>
        <li>
          <a href="">
            Yet another one
          </a>
        </li>
        <li>
          <a href="">
            Subscribe! 
          </a>
        </li>
        <li>
          <a href="">
            Foo
          </a>
        </li>
        </ul>
</div>    

Kod bez zmian.

.site-nav {
 
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  height: 20px;
  width: 100%;
  background: black;
}
 
.side-menu-trigger {
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  border: 0;
  border-radius: 5px;
  background: #ffffff;
   
}
 
.side-menu {
  display: flex;
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  width: 300px;
  top: 20px;
  left: -300px;
  padding: 0;
  background: black;
  transition: 0.3s transform ease-in-out;
}
 
.side-menu ul {
  position: absolute;
  display: flex;
  height: calc(100% - 20px);
  flex-wrap: wrap;
  margin: 0 10px;
  padding: 0;
  list-style-type: none;
  align-content: flex-start
}
 
.side-menu ul li {
  display: flex;
  height: 30px;
  background: black;
  flex-basis: 100%;
  margin-top: 20px;
  color: #696e9e;
  border-radius: 5px;
  overflow: hidden;
   
}
 
.side-menu ul li a {
  display: flex;
  padding: 10px;
  align-items: center;
  width: 100%;
  height: 100%;
  background: black;
  text-decoration: none;
  box-sizing: border-box;
}
 
.side-menu-trigger:focus ~ .side-menu, .side-menu:hover {
  transform: translateX(300px); 
}

W Css'ie

Zmiany w następujących  selektorach:  (.side-menu-trigger, side-menu, oraz

.side-menu-trigger:focus ~ .side-menu, .side-menu:hover .)

Przeniosłem "Przycisk" na prawa stronę aby wyglądało to czyściej i przejrzyściej!

Pozdrawiam Serdecznie i Powodzenia!

 

Comments

Widze po punktach że jesteś doświadczony takżę zapytam też:

Przy stylowaniu przycisku jest:
 

<nav class="site-nav">
    <button class="side-menu-trigger">Menu</button>
    <aside class="side-menu">

a znalazłem fajny styl na przycisk... lecz on wygląda tak:

<div class="wrapper">
  <a href="#" class="button">DailyWeb</a>
</div>

(to jest przykład). Tak jak widać w pierwszym jest "nav" a w 2 jest "div" nie wiem czy da się to jakość połączyć bo moim zdaniem taki przycisk słąbo pasuje i brzydko wygląda także chciałem go ostylować

---

Ucz się Podstaw !

Html i CSS video lub książka ! Na początek ...Proponuje.... naprawdę pomoże!!!

Ja zaczynałem od książek bo je kocham ale w necie jest TONY darmowej Nauki !

Pozdrawiam Serdecznie i Powodzenia !