Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS] sidebar navigation z kolumnami
Forum PHP.pl > Forum > Przedszkole
stellatus
9.03.2020, 20:24:51
https://codepen.io/rudolph-reti/pen/PoqEjYm

Kod
<div id="mySidenav" class="sidenav">
  <a href="java script:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>


Kod
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


Kod
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}


W sidebarze, w zależności od jego aktualnego rozmiaru i ilości odnośników, suwak pojawia się lub nie. Chciałbym, żeby w pierwszej kolejności, w sidebarze tworzyły się kolumny o określonej szerokości np. 150 px i żeby suwak pojawiał się dopiero wtedy, gdy nie będzie już miejsca na nowe kolumny. Jak to zrobić?
trueblue
10.03.2020, 12:12:14
Do #mySidenav należy dodać:

[HTML] pobierz, plaintext 
  1. grid-template-columns: repeat(3, 150px);
  2. display: grid;
[HTML] pobierz, plaintext

Przy czym 250px, to będzie za mało na 3 kolumny po 150px.
stellatus
11.03.2020, 12:13:09
Dzięki smile.gif I sorry, bo:
- chyba powinienem dodać, że te <a> mogą być też w divach
- nie rozumiem Twojego rozwiązania
- być może nieprecyzyjnie sformułowałem pytanie.

Wydaje mi się, że to mi się może przydać:

https://codepen.io/rudolph-reti/pen/mdJpoZX

Kod
<div id="content">
    <div class="group">
<div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div><div class="item">10</div><div class="item">11</div><div class="item">12</div><div class="item">13</div><div class="item">14</div><div class="item">15</div><div class="item">16</div><div class="item">17</div><div class="item">18</div><div class="item">19</div><div class="item">20</div><div class="item">21</div><div class="item">22</div><div class="item">23</div><div class="item">24</div><div class="item">25</div><div class="item">26</div><div class="item">27</div><div class="item">28</div><div class="item">29</div><div class="item">30</div><div class="item">31</div><div class="item">32</div><div class="item">33</div><div class="item">34</div><div class="item">35</div><div class="item">36</div><div class="item">37</div><div class="item">38</div><div class="item">39</div><div class="item">40</div><div class="item">41</div><div class="item">42</div><div class="item">43</div><div class="item">44</div><div class="item">45</div><div class="item">46</div><div class="item">47</div><div class="item">48</div><div class="item">49</div><div class="item">50</div><div class="item">51</div><div class="item">52</div><div class="item">53</div><div class="item">54</div><div class="item">55</div>
    </div>
    
  
</div>


Kod
#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    flex: 1 1 auto;
}

#content > .group:first-child {
    columns: 10em;
    flex-grow: 2;    
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
    break-inside: avoid;
}

#content > .group .item:first-child {
    margin-top: 0;
}


Źródło: https://stackoverflow.com/questions/1405840...anding-vertical

Przeanalizowałem to i chciałbym podzielić się stwierdzeniem, że właściwie to potrzebowałem tylko właściwości "columns": https://codepen.io/rudolph-reti/pen/wvaygzq
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.