[JavaScript][CSS] sidebar navigation z kolumnami |
[JavaScript][CSS] sidebar navigation z kolumnami |
9.03.2020, 20:24:51
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
https://codepen.io/rudolph-reti/pen/PoqEjYm
Kod <div id="mySidenav" class="sidenav"> <a href="java script:void(0)" class="closebtn" onclick="closeNav()">×</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ć? Ten post edytował stellatus 9.03.2020, 20:44:29 |
|
|
10.03.2020, 12:12:14
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Do #mySidenav należy dodać:
Przy czym 250px, to będzie za mało na 3 kolumny po 150px. -------------------- |
|
|
11.03.2020, 12:13:09
Post
#3
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Dzięki 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 Ten post edytował stellatus 10.03.2020, 20:17:52 |
|
|
Wersja Lo-Fi | Aktualny czas: 24.04.2024 - 12:02 |