- Hozzászólások: 6
- Köszönetek: 1
Függőleges menü Gantry-ben
- joseph66
-
Témaindító
- Nem elérhető
- Kezdő fórumozó
-
Kevesebb
Több
3 éve 5 hónapja #15621
Í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?
Meg lehet azt mondani egy ilyen fórumban, hogy hogyan?
Jelentkezz be, hogy te is részt vehess beszélgetésben!
- csezo
-
- Nem elérhető
- Elit fokozatú fórumozó
-
Kevesebb
Több
- Hozzászólások: 338
- Köszönetek: 126
3 éve 5 hónapja #15628
Írta: csezo
Ha értékesnek találtad a hozzászólást, azt a "KÖSZÖNÖM" gombbal jelezheted.
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?
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!
- joseph66
-
Témaindító
- Nem elérhető
- Kezdő fórumozó
-
Kevesebb
Több
- Hozzászólások: 6
- Köszönetek: 1
3 éve 5 hónapja #15629
Í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:
Í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?
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!
- csezo
-
- Nem elérhető
- Elit fokozatú fórumozó
-
Kevesebb
Több
- Hozzászólások: 338
- Köszönetek: 126
3 éve 5 hónapja #15630
Írta: csezo
Ha értékesnek találtad a hozzászólást, azt a "KÖSZÖNÖM" gombbal jelezheted.
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
.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!
- joseph66
-
Témaindító
- Nem elérhető
- Kezdő fórumozó
-
Kevesebb
Több
- Hozzászólások: 6
- Köszönetek: 1
3 éve 5 hónapja #15631
Í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!