css - rozwijane menu

[osmose]

Witam. Robię menu rozwijane i w związku z nim mam kilka pytań.

Moje menu wygląda aktualnie tak -> http://dmnz.vel.pl/top-menu/index.html

Moje problemy.

1. jak zrobić by rozwinięte menu (zob. Dział 9) miało wszystkie poddziały w jednej linii? żeby się nie przełamywało na kolejne linie tylko np. by się rozszerzało w prawo? w lewo nie może bo by wychodziło poza swój blok i by wyglądało źle.

2. pomiędzy pozycjami głównymi dałem separator ale jak się bliżej przyjrzymy to po zaznaczeniu danej pozycji obok widać separator i wygląda to nieelegancko. Można go jakoś ukryć?

3. jak ustawić maksymalną szerokość kolumny poddziału tak by długie linki nie rozciągały jej za bardzo (zob. Dział 1)?

4. chciałbym zrobić tak by zaznaczenie pozycji w rozwiniętym menu powodowało podświetlenie jej tła na całą szerokość kolumny (tak jak w menu aplikacji w windowsie).


jestem bardzo początkujący więc nie odsyłajcie mnie go googla bo wyszukałem już tyle ile się dało. chciałbym to zrozumieć a nie błądzić gdzieś w wynikach wyszukiwania.


Pytanie poboczne. Nie wybrałem jeszcze Doctype. Początkowo chciałem by moja stronka była zgodna z xhtml 1.0 strict ale może coś przeoczyłem i jest aktualnie jakiś inny standard na topie?

[Kartofelek]

1) albo non breake space (patrz google), albo display:inline-block; albo display:inline dla podmenu. Ogólnie dla IE6 jest problem z tym i trzeba się nieźle pomęczyć. Jeżeli skorzystasz z inline, wtedy będziesz musiał wyliczyć szerokość menu . Jak to zrobić? Np wstawiasz na stronę pozycjonowany absolutnie (ujemnie) element inline z tekstem z pozycji menu, pobierasz jego szerokość, usuwasz go i masz swoją szerokość
2) link nie dziala
3) link nie dziala. Pewnie max-width + expression dla IE6
4) patrz punkt 1 - ale link nie działa
Poboczne) wybierz HTML5. Nic nie stracisz, a zyskasz

[osmose]

Właściwy link -> http://dmnz.vel.pl/top-menu/index.htm

Poboczne) wybierz HTML5. Nic nie stracisz, a zyskasz

Ale z tego co czytałem to wynika że html5 nie jest jeszcze w pełni zaimplementowany w przeglądarkach. Skąd mam wiedzieć jakich konstrukcji używać a jakich nie bo nie działają jeszcze?

[Kartofelek]

jest zaimplementowany w 100%. Nie mówię o używaniu znaczników typowo z html5 takich jak np section, footer itp. Używaj nagłówka + zwykłych tagów. Zresztą było o tym już nawet na tym forum.
Zalet jest kilka, minusów nie ma.

---

ok. Pierwsza rzecz. W twoim przypadku samo CSS raczej nie przejdzie (imo).
Czemu? Wyobraź sobie że ostatnie menu ma powiedzmy 5 podmenu (twoich podziałów). Wtedy wyjedzie POZA EKRAN.
Możesz oczywiście pozycjonować do prawej, ale wtedy pierwsze podmenu ucieknie ci także poza ekran. Musisz więc to jakoś wyliczyć. W sumie jest to bardzo proste działanie.

3) jest mała niekonsekwencja. Dla A uzywasz no-wrap - czyli nie chcesz by się zawijało. Z drugiej strony chcesz by się nie rozciągało. Pozostaje ci max-width w emach i overflow dla LI - ale to jest bez sensu bo ci utnie linki w połowie
4) li:hover {background....} ale to już ogarniesz sam. Kwestia pokombinowania.

Jeżeli dobrze przejrzysz internet dojdziesz do wniosku że mało kto zrobił w pełni dynamiczne menu tylko na CSS. Jeżeli dodasz do tego nieograniczoną liczbę podmenu - wydaje się to praktycznie nie wykonalne :}

[osmose]

Nie napisałem że chcę to zrobić koniecznie tylko w CSS ale chciałem zrobić jak najwięcej w CSS bo na JS znam się jeszcze mniej jak możesz wskazać jakiś przykład wykorzystujący do tego JS (ale nie zbyt skompilowany) to będę wdzięczny.

4) li:hover {background....} ale to już ogarniesz sam. Kwestia pokombinowania.

próbowałem już to wcześniej ale jak zrobię np. tak

Kod:

#top-navigation .level-0 li:hover { background: none; }

to ukryty zostanie separator w aktualnie podświetlonym li a on i tak jest niewidoczny bo tło zaznaczonego li jest tego samego koloru co separator. tu trzeba ukryć separator w li poprzedzającym zaznaczone, prawda?

[Kartofelek]

W sumie nie pomogę ci przy tym hoverze bo to jest kwestia przemyslenia sprawy i odpowiedniego podejscia. Ogólnie - da się samym CSS ;]
Co do JS to najlepiej jquerowo to ogarnac. Osobiscie zawsze robię tak, że robię menu w czystym CSS. Daję mu klasę "menu_navigation css" czy podobna, ją odpowiednio styluję itp. Dla klasy css daję obsługę wszystkich hover.
Potem za pomocą jquery usuwam tą klasę css i zamiast niej podpinam odpowiednie zdarzenia.
Podobnie możesz w swoim menu. Ostylować jak tylko się da, a potem obsłużyć dodatkowe rzeczy za pomocą jQuery. Ale do tego musisz poznać jQuery - do czego gorąco zachęcam.

...Albo zostać przy bardziej statycznym menu i na sztywno ostylować poszczególne podmenu

[osmose]

Co do JS to najlepiej jquerowo to ogarnac. Osobiscie zawsze robię tak, że robię menu w czystym CSS. Daję mu klasę "menu_navigation css" czy podobna, ją odpowiednio styluję itp. Dla klasy css daję obsługę wszystkich hover.
Potem za pomocą jquery usuwam tą klasę css i zamiast niej podpinam odpowiednie zdarzenia.

Kompletnie nic nie czaję z tego co napisałeś.

Ale, pokombinowałem z jquery i udało mi się zrobić pkt. 2 z ukrywaniem separatora

zobacz -> http://dmnz.vel.pl/top-menu/


Teraz najbardziej mnie interesuje rozwiązanie punktu 1. Nie wiem gdzie wstawić display:inline? No i to wystawanie poza ekran też nie wiem jak zlikwidować. Da się za pomocą jquery?

[Kartofelek]

inline olej. Lepiej inline-block, bo dzięki temu będziesz miał 1 problem z glowy.
Co do jquery. Wyliczasz szerokość podmenu i odpowiednio je ustawiasz (left) wzgledem rodzica. Jeżeli ma wyjechac poza stronę, wtedy to odpowiednio korygujesz.
Na pewno przydadzą ci się takie rzeczy jak outerWidth(true), offset().left, $(function() {...}) itp (mowa o jquery).
http://jqapi.com/#p=offset
http://jqapi.com/#p=outerWidth
http://jqapi.com/#p=ready

[osmose]

Po dalszych eksperymentach z jquery doszedłem zadowalającej mnie postaci menu -> http://dmnz.vel.pl/top-menu/

Dzięki za pomoc Kartofelek!

[Kartofelek]

I jest elegancko.