Rozwijane menu

Question

Witam,

piszę stronkę, w której chcę zrobić lepsze menu - rozwijanie i przyklejanie do góry ekranu. Wzorowałem się na kursie CSS z YouTube z kanału Pasja Informatyki link. Autor robił przyklejanie dzięki JQuery, a ja dzięki:

position: sticky;
position: -webkit-sticky;

Rozwijanie jednak nie do końca działa. Gdy najadę zwiększa się cały div z menu, zrzuty ekranu: link. Co powinienem zrobić aby wyglądało to mniej więcej tak: link (screen z kursu)?

Kod HTML: link

Kod CSS: link

Z góry dzięki za pomoc.

Comments

Wrzuciłem kod na CodePena, żeby lepiej było widać problem: https://codepen.io/Comandeer/pen/gOBXgOw

Zachęcam na przyszłość do używania go – jest zdecydowanie wygodniejszy, niż wrzucone osobno kody HTML i CSS.

---

Nie znałem tego narzędzia więc dzięki.

Answer 1

Wystarczy ustalić dla menu wysokość, np. dorzucając do ol styl max-height: 40px. Wówczas rozwijane menu będzie domyślnie wystawać.

BTW polecam stylować przy pomocy klas, bo obecnie zmieniłeś style dla wszystkich list na stronie – a na 95% kiedyś będziesz mieć też inne listy na niej i tego typu globalne style będą przeszkadzać. Na ten moment najlepsza praktyka to używanie wyłącznie klas do stylowania.

Comments

Istotnie, działa. Dzięki.

A co do stylizowania, nie wprowadzałem klas, bo chciałem tylko pobawić się z menu, a nie tworzyć cały serwis.