check Függőleges menü Gantry-ben

Több
2020 ápr. 10 19:29 #1 Írta: joseph66
Függőleges menü Gantry-ben téma létrehozva joseph66 által
Hogyan lehet létrehozni Gantry-ben függőleges menüt? Tudomásom szerint css-t kell hozzá megfelelően programozni.
Meg lehet azt mondani egy ilyen fórumban, hogy hogyan?

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2020 ápr. 13 07:14 #2 Írta: csezo
csezo válaszolt a következő témában: Függőleges menü Gantry-ben
Természetesen. De mindkettőnk dolgát megkönnyítené, ha belinkelnéd az adott oldalt, akkor konkrétan meg tudom írni, hogy mit vegyél fel a custom.scss-be
A lényeg: a menü megvalósítása a gantry-ban, mint sok más esetben is, html szempontjából egy lista. A menü elemek <li>...</li> tagok között szerepelnek. Ha ezekre a stílus leíró aztírja elő, hogy "display: inline-block" formázás érvényesüljön, akkor ezek a tagok egymást fogják követni egy sorban, amíg elférnek., majd új sort kezdenek.
Ha ezt felülírod, és "display: block" lesz a formázás, akkor a blokkok egymás alá kerülnek.
Elsőre nem lenne rossz ötlet megkeresni, hogy ez a formázás a 'nucleus.css' file 1435-ik sorában vannak beállítva, és ha átírod akkor jó is lesz. De ezt hamar el fogod veszíteni, az első frissítést követően. Ezért szabványos un. override-ot kell létrehozni.
Az megy?

Ha értékesnek találtad a hozzászólást, azt a "KÖSZÖNÖM" gombbal jelezheted.
A következő felhasználók mondtak köszönetet: joseph66

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2020 ápr. 13 11:49 #3 Írta: joseph66
joseph66 válaszolt a következő témában: Függőleges menü Gantry-ben
Köszönöm. Gyorsan összedobtam egy Gantry-t Hélium sablonnal:
Tesztoldal

Kikerestem a 'nucleus.css' fájlból a következőt és átírtam a custom.scss-ben a display-t block-ra:

.g-main-nav .g-toplevel > li {
display: block;
cursor: pointer;
-webkit-transition: background 0.2s ease-out, -webkit-transform 0.2s ease-out;
-moz-transition: background 0.2s ease-out, -moz-transform 0.2s ease-out;
transition: background 0.2s ease-out, transform 0.2s ease-out;
}


Így gondoltad? Ezzel valóban egymás alá kerülnek a menük. A nucleus.css-ben elég sok helyen van a "display: inline-block" formázás. Honnan tudhatom, hogy melyiket kell átírni?

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2020 ápr. 13 12:00 #4 Írta: csezo
csezo válaszolt a következő témában: Függőleges menü Gantry-ben
Mivel ez felülírás, elég csak:
.g-main-nav .g-toplevel > li {
display: block;
}
Nem kell a többit is bent hagyni.
Az összes böngészőben van lehetőség megnéézni, hogy az adott elemre milyen formázás van érvényben.
A google-chrome-nál pl ráállsz az elemre, jobb gomb->vizsgálat.
Arra figyelj, hogy van úgy, hogy az adott formázás egy szülő elemben van beállítva. Itt egyébként bele is tudsz nyúlni a formázásba, igaz, csak ideiglenes módon, de tesztelni remek

Ha értékesnek találtad a hozzászólást, azt a "KÖSZÖNÖM" gombbal jelezheted.
A következő felhasználók mondtak köszönetet: joseph66

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2020 ápr. 13 13:57 #5 Írta: joseph66
joseph66 válaszolt a következő témában: Függőleges menü Gantry-ben
Nagyon szépen köszönöm a segítséget! Megint sokat tanultam.

Jelentkezz be, hogy te is részt vehess beszélgetésben!