Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Menu w CSS ala JavaScript

25 maja 2005

Próbowałem wyczarować menu w CSS takie jak w Dark Throne. Oczywiście bez bajerów typowych dla JS - delaya i zatrzymywania się na pozycji w menu.

Nie potrafię znaleźć wyjścia dla użycia position: absolute;, przez co dolne menu nie jest wycentrowane. Przykład oczywiście na razie nie działa na NUP, są tam widoczne istne puzzle. Testowane na razie tylko na Gecko. :) Lecz możliwe, że błędy są przez box-model albo białe znaki między ul a li. Kończąc - to było wyzwanie rzucone przez admina, więc nie dziwię się że poległem. Aczkolwiek popróbuję jeszcze - takie menu to bardzo ciekawy efekt na stronie. :-)

Tagi wpisu:

Informacje i hiperłącza

To ja! Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

Informacje o wpisie

Napisał riddle 25 maja 2005 o 03:21

Kategorie: CSS, Webdesign na luzie

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Komentarze

  1. Łukasz Grabuń 1 25 maja 2005, 08:41

    Myślę, że chodzi Ci o coś podobnego do efektu opisanego w A List Apart: http://alistapart.com/articles/hybrid/

  2. luk 2 25 maja 2005, 13:51

    Ten link do menu nie działa :(

  3. luk 3 25 maja 2005, 13:55

    spoko, już ożył ;]

  4. Yano 4 25 maja 2005, 15:05

    Blee.. nie waliduje się :P
    Mam wytykac błędy, czy sam sprawdzisz? :)

  5. riddle 5 25 maja 2005, 19:47

    @Łukasz: oczywiście, że to czytałem. Używają position: absloute. Tak BTW to kocham porady nic nie wnoszące do tematu ;)
    @Yano: Bywa.. IE reaguje na :hover tylko na <a> .. ale i tak to nie ma znaczenia, bo pod IE jest kaszana.

    Acha.. czasem menu nie działa.. rozsypuje się, a przeładowanie pomaga. :>
    Zresztą to tylko mała wprawka. Nie będzie doprowadzona do końca.

  6. Łukasz Grabuń 6 25 maja 2005, 20:03

    *slaps forehead* nie przyjrzałem się rozwiązaniu z ALA.

    Porada: wywal to kiepskawe menu (pod Operą 8.0 całkowicie się wysupuje, również tak BTW). Lepsze jest Son of Suckerfish Dropdown.

  7. riddle 7 25 maja 2005, 20:04

    Dzięki za radę, serio .. nie mam nic przeciwko takim menu, ale wiesz.. chciałem uzyskać efekt oryginalny z DT. :) Menu w pełnej krasie już robiłem i będzie ono w nowej wersji mojej Wimany :P

  8. Yano 8 25 maja 2005, 21:01

    Ale ja nie mówię o :hover tylko o:
    <ul id="nav">
    <div class="center"> <-- tego tu być nie powinno
    <li>

    Podejrzewam, że Ci się ręka obsunęła przy wklejaniu.
    A do symulacji :hover zastosowałbym funkcję JS z "Son of SuckerFish".

    I jeszcze jedno - co widzicie złego w position:absolute? Umiejętnie wykorzystane może być przydatne.

  9. riddle 9 25 maja 2005, 22:32

    Tak, ale powiedz mi proszę jak wycentrować blok tak wypozycjonowany? Aaa? :)

    A ten div tam musi być .. centruje mi górne menu. Wiem, wiem.. da się to zrobić inaczej ;) Ale po co.. to tylko mockup, nie daję tego do neta :D

  10. Yano 10 25 maja 2005, 23:05

    Jak wycentrować? Ależ proszę - umieszczasz go w bloku o zadanych rozmiarach i position:relative;margin:auto ;)

    A ten div tam siedzi i się kryje przed specyfikacją, bo w <ul> powinny siedzieć tylko elementy listy :P

  11. riddle 11 25 maja 2005, 23:08

    A spojrzałeś w mój CSS? Wiem, że nie może być tam bloku, nie ucz ojca dzieci robić. :) Ale tak się składa, że on tam musi być. :]

  12. Yano 12 25 maja 2005, 23:10

    Uważaj. Stepujesz po mojej ambicji. Jak się zdrażnię to dwie noce zawalę i zrobię to samo "full valid". A jak jestem niewyspany to robię się nerwowy :P

  13. riddle 13 30 maja 2005, 10:58

    Zrobiłem centrowanie, ale jest to perfidny workaround z szerokością ul drugiego menu + marginesem ujemnym.

  14. Yano 14 30 maja 2005, 12:57

    Ech, miałem się też za to wziąć, ale cierpię ostatnio na chroniczny brak czasu. Jak ktoś ma na zbyciu kilka wolnych dni, to chętnie przyjmnę.

  15. nbw 15 06 czerwca 2005, 03:23

    Walidacja validatorem w3c mija się z celem. Używa przestarzałego DTD. Valid XHTML:
    <a><em><a></a></em></a>

    http://schneegans.de/sv/ - macz beter (tak, nie przechodzę testów tym validatorem i nikt ze znajomych również nie ;)

  16. riddle 16 06 czerwca 2005, 08:28

    Znam i zaczynam używać.