Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Menu z zakładkami
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Asmox
Postanowiłem zrobić poziome menu z zakładkami tak, aby po najechaniu na którąś robiła się wyższa (jak obczaję JS to będzie jeszcze zmienianie strony ale to btw.). Bo opracowaniu bylejakiego wyglądu przyszedł czas na pozycjonowanie. I tu zrodził się problem.
Nie wiem, czy ktoś zrozumie co mówię (jak nie to piszcie wkleję screeny):
Elementy listy po najechaniu powiększają swoje dopełnienie [padding-top: 15px;] a także muszą się podsunąć do góry, ponieważ domyślnie zepchnąłby wszystko na dół (padding-top i tak sprawia, że wszystko się przesuwa na dół a nie w górę). Na początku ustawiłem pozycjonowanie względne i odsunięcie 6px w górę [position: relative; top: -6px;]. Szybko zauważyłem, że pozycjonowanie względne zachowuje się tak jakby były 2 elementy (ten odsunięty i ten który by został, gdybym nie wpisywał pozycjonowania względnego). Mówiąc prościej nic mi to nie dało, bo i tak wszystko spadało na dół.
Kolejny krok to ustawienie pozycjonowania bezwzględnego w oparciu o rodzica [ul.vert_menu {position: relative}] i zmiana rodzaju pozycjonowania na bezwzględny [position: absolute]. Niestety przez to pozycjonowanie reszta odnośników zupełnie olewa ten na który się najedzie myszą. Efekt niby wygląda fajnie, ale wbrew pozorom jest on niepożądany.
Czy ktoś wie co z tym zrobić?
Adres strony: www.asmoxtestphp.yoyo.pl
W skrócie: Wejdźcie na stronę. Chcę, aby po najechaniu na odnośnik reszta pozostawała na swoim miejscu.
Lion_87
a samo padding-top i height dla a:hover nie wystarczy??

o tak ? test
Fafu
ja bym dał tak:
Kod
li a {
height: 20px;
position:absolute;
display:block;
}

li a:hover {
height: 30px;
margin-top: -10px;
}
pietrov8
http://www.kurshtml.boo.pl/css/menu_z_naglowkami,menu.html

Bardzo dobry artykuł
Asmox
Dzięki wam wszystkim!
@Lion_87: Świetna porada nie wiedziałem, że da się to zrobić bez pozycjonowania.
@Fafu: Pomysł z ujemnymi marginesami wydawał mi się dobry przy układzie strony 3-kolumnowym. Dzięki Twojemu pomysłowi wykorzystam go też w tym menu.
Chociaż z height to niezbyt dobry pomysł jest. Wolałbym, żeby było padding, ponieważ przy zmianie czcionki na przykład na większą nie trzeba modyfikować tego parametru.
@pietrov8: Fajny poradnik o menu, ale o pionowych. Na pewno kiedyś mi się przyda, ale na razie nie o to chodziło. Zauważyłem, że jest link do poziomych menu też, ale nie ma tam rozwiązania mojego problemu. Mimo wszystko dzięki.

W końcowym efekcie poprawiłem parę rzeczy. Teraz aktualna zakładka (<li class="current">) nie ma większego dopełnienia, tylko po prostu dolna krawędź ma taki sam kolor jak tło diva. Poza tym uznałem, że chyba ładniej by wyglądało, gdyby dopełnienia zwiększały się z dwóch stron: góry i dołu. Ale to tylko dostosowanie menu do moich potrzeb. I tak rozwiązania są dobre.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.