[mariecziek]

Mam pytanko z #css i być może #javascript #jquery
Zrobiłem sobie menu dropdown, ale mam problem na mneijszych rozdzielczościach ekranu. Skrajnie prawe menu po rozwinięciu i w przypadku posiadania "dzieci", podczas ich wyświetlania znikają za krawędzią okna, a raczej "rozciągają" stronę. Da się to ogarnąc w samym CSS, czy bez JS ani rusz? Może ktoś zarzuciłby jakimś linkiem co do sposobu rozwiązania tego?

Załączam screena jak to wygląda, po lewej z rozwiniętymi dziećmi, po prawej bez.

Tak na wszelki wypadek dorzucam część lessa

ul {
 list-style: none;
 margin: 0;
 padding: 0;

 &.child {
 li {
 background-color: #444349;
 }
 li.parent > a:first-child {
 &:after {
 font-family: FontAwesome;
 color: #fff;
 content: "\f054";
 float: right;
 font-size: 9px;
 }
 }
 }

 li {
 position: relative;
 }

 ul {
 left: 100%;
 top: 0;
 margin-left: 1px;
 }
 }

 li:hover {
 background-color: #444349;

 a {
 color: #fff;
 }
 }

 ul:before,
 ul:after {
 content: " "; /* 1 */
 display: table; /* 2 */
 }

 ul:after { clear: both; }

[Przepoczwarzenie]

@mariecziek rozumiem, że teraz to idzie na samym CSS?

[Przepoczwarzenie]

@mariecziek gdzieś to można zobaczyć? Nie widzę tu cssa dla dzieci na akcje hover

[Przepoczwarzenie]

@mariecziek jesli to left 100% to jest właśnie dla dzieci po zakryciu li, to po prostu możesz dać left -100%, ale pomysł co będzie dla mobile...? Masz oddzielne menu? Generalnie słabe to jest

[mariecziek]

@Przepoczwarzenie: Tak, jest to wyłącznie CSS.
https://pastebin.com/Ee8RJN9t tu daję całość Lessa dla komputera.
Mobilka ma własne menu z hamburgerem.

Ja się nie znam zbyt dobrze na CSS, siedzę mocniej w backendzie, więc robię tak, żeby jak najmniej mieszać JS/CSS

[Przepoczwarzenie]

tak na szybko, to wystarczy dodać

.pt_custommenu div.pt_menu:nth-last-of-type(2) .parentMenu ul ul {
 right: 100%;
 left: auto !important;
}

@mariecziek:

[Przepoczwarzenie]

@mariecziek: a w lessie, no to warunek dla przed ostatniego diva klasy pt_menu

[Przepoczwarzenie]

@mariecziek: no albo w ogóle zdefiniować klasy pomocnicze np.

.left-100{
left: 100%;}
.right-100{
right: 100%;}

[mariecziek]

@Przepoczwarzenie: Okej, dziękuję.

[Przepoczwarzenie]

@mariecziek: a, i dodaj sobie overflow:hidden do body, bo to menu i tak trochę wychodzi i googl bedzie krzyczał