Ovo je najbliže tome što ti treba.
Ne baš …to reagira na sužavanje ekrana na način da u jednom trenutku prebaci na “mobile-view” …i tada prikaže sve iteme u block styleu. A to se ne traži uopće 
U mom slučaju je konstantno destkop wiev …a user ima itema toliko da će ih možda biti za drugu liniju. User je ok sa time da ako ima previše itema za prvu liniju da se višak prebaci u drugu liniju, ali nije ok sa time da nakon prebacivanja ostane praznog prostora u prvoj liniji.
Ne vidim žašto bi malo JSa bilo problem, moš inlajnat čisti JS odmah ispod markupa da radi instant bez da čeka ostatak sajta.
PS
Uskoro ide van novi vecernji.hr koji ce imat zanimljivu fintu na glavnoj navigaciji, kladim se da bi ti se svidjela jer na jedan puno elegantniji način radi to što tražiš
…mislim da dok se nešto može sa CSS-om, da CSS ima definitivno predost prolaska.
Vidi se da radiš za večernji, uzele te one njihove fore iz naslova “Nešto jako odlično…neće te vjerovati kada vidite…” …i onda u članku uvijek neka glupost. Nadam se da i ovdje nije glupost…slobodno odmah pojasniš o čemu se radi kada već spominješ… 
Ne radim za VL već za Styrijin digitalni razvoj, ali da, teško ljudima objasnit pa obično ostane na tome
Radi se o ideji da je nav u jednom redu do određenog trenutka i onda ide vertikalna lista na hover na zadnjem vidljivom elementu navigacije, tako da možeš imat 100 elemenata u njoj i zavisno o širini ekrana i broju tih elemenata ti vidiš prvih X (obično ove glavne rubrike) a ostali su lista koja se expanda na hover nakon zadnjeg vidljivog elementa.
PS
Ljudi bježe od JS-a poučeni svakavim sranjima, obično copy/paste jQuery kod sa stack overflowa itd koji su radili amateri, JS kao i jQuery mogu biti odlično oružje ako se pravilno koriste, pogotovo čisti JS bez document ready/load metoda.
1 Like
Baš sam se malo poigrao sa flexbox za ovaj problem i mislim da sam ga riješio na trivijalan način. Svega pet flex svojstava (display, flex-direction, flex-wrap, order, flex-grow).
1.) Navigacija forsira jedan redak, bez obzira koliko anchor elemenata ima, sve dok nije određena dužinom roditeljskog elementa. U ovom slučaju roditeljski element je nav dužine 100% pa ide po dužini cijelog viewporta.
2.) Lomi se sa obzirom na:
- Dužinu tekstualnog sadržaja
- Lijevi i desni padding
- Uz to je i responzivna
Ja sam na anchor element postavio padding: 20px 5%; pa je cijela stvar još fleksibilnija. Ako se recimo postavi padding: 20px 200px; odmah se vidi kako se navigacija lomi. Također, lomi se ako se dodaju anchor elementi ili ako se dodaje tekst unutar anchor elementa.
HTML
<nav>
<a href="">link 1</a>
<a href="">link 2</a>
<a href="">link 3</a>
<a href="">link 4</a>
<a href="">link 5</a>
<a href="">link 6</a>
</nav>
CSS
nav {
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
border: 1px solid #666;
}
nav a {
background: #ddd;
text-decoration: none;
font-family: arial;
border: 1px solid #666;
padding: 20px 5%;
text-align: center;
color: #666;
display: inline-block;
float:left;
width: auto;
position: relative;
order: 1;
flex-grow:1;
}
1 Like
Heh, to je to…ali ti je ostao još jedan dio koji nije rješen.
Zadatak je bio takav da ono što je ostalo u gornjem redu ispuni 100% red, ali ono što ode u drugi red ne ispunjava cijeli red ukoliko prirodno nije blizu toga da je skoro 100%.
Opet ću reći da je najbolja analogija ponašanje text-a kada je zadano text-align: justify;
Primjeti da u tom slučaju text ispunjava uglavnom 100% svaku liniju i fino se poravna po rubovima. Ali kada je situacija da samo dvije riječi odu u novi red, neželjeno ponašanje je da se samo te dvije riječi razvuku na 100% toga reda.
Tako i ovdje se ova navigacija pojavljuje na velikom monitoru …i ako itemi preskoče u novi red, željeno ponašanje je da se normalno slažu u novoj liniji… a ne da se samo jedan item u novoj liniji razvući na 100%.
To bi bilo idealno rješiti na način kada bi se mogao definirati “max-grow”, dok “max-width” nije nikako dobro rješenje!
To je ok pristup za navigaciju koja zaista služi kao navigacija nekog weba …no ovdje iako ja nazivam element “navigacija”…radi se o boxu koji je dio panela gdje user konstantno klikće. I treba da sve uvijek bude vidljivo.
Detalj koji je usera zasmetao je da linije ne ostanu 100% ispunjene nakon prelamanja višak itema u novi red…
1 Like
Dodaj još malo itema i u CSS dodaj
nav a:last-child { flex-grow:0;}
Na taj način gornji red ostaje 100% width a prelomljeni item ostaje u svojoj prirodnoj veličini. Mislim da je to ujedno i maksimum kojeg možeš sa CSS-om napraviti.
Nije rješenje. Jer ti ne možeš znati hoće li se prelomiti samo zadnji item ili zadnja dva …ili koliko već 
CSSu jako nedostaje da može selektirati stvari nakon prelamanja. Isto tako mu nedostaje da može selektirati box na način da mu dodjeli svojstva samo za slučaj ako je prelomljen…
Znam ali u svakom slučaju to je malo previše uvjeta za CSS. Mislim da je to problem i za JS. Zato jer kako god da uzmeš JS će morati na neki način mjeriti dužinu itema a tu kao problem recimo dolazi različit render fonta u različitim preglednicima.
Ne mora biti, JS opali u jednoj milisekundi riječ u generički box negdje lijevo na stranici gdje korisnik em ne može vidjeti zbog pozicije, em nema šanse da se išta vidi unutar 1ms… i uzme mjeru fontu.
Može se sa JS gotovo sve što pomisliš…ali velim, dok se može sa CSS-om, držim se CSS-a.
Ovdje zapravo jako malo fali CSS sintakse da bi se moglo rješiti …fali samo nešto tipa:
box:breaked {} //po analogiji box:hover {}
box::first-line …zapravo već i postoji, i odnosi se doslovice na prvu liniju do preloma, ali se ne mogu pridružiti sva CSS svojstva…nego samo neke gluposti poput boje i šta ja znam…
S druge strane zanimljivo je ponašanje box-a i ako mu se zada doslovice svojstvo text-align: justify; …a itemi definiraju kao inline elementi. Jedina mana u tom slučaju je da extra razmak dodaje između elementa kao margine, a ne kao padding …pa malo ružno izgleda hover state.