[CSS][HTML]Menu rozwijane |
[CSS][HTML]Menu rozwijane |
10.12.2013, 22:24:57
Post
#1
|
|
Grupa: Zarejestrowani Postów: 324 Pomógł: 27 Dołączył: 21.07.2013 Ostrzeżenie: (0%) |
Witam, robię rozwijane menu w css, na razie mam takie coś: efekt, ale chcę zrobić takie coś jak na obrazku
Jeśli się nie da to chociaż coś takiego: W linku, który podałem niby jest podobnie, ale gdy najadę od razu na"1" ona się rozwija bez przesunięcia pozostałych w dół "2,3 i 4"- zasłania je Oto kod: i css: Kod #ul { border-style: solid; border-width: 1px; border-color: black; border-radius: 3px; text-align:center; width: 100px; height: 22px; cursor: pointer; list-style-type: none; padding: 5px; background: #242424; font-family: tahoma; color: silver; } #li1 #ul1 { overflow: hidden; display: none; background: #242424; border-radius:0px 0px 5px 5px; } #li1:hover #ul1 { padding: 0; position: absolute; display:block; width: 100px; } #li { list-style-type: none; height: 25px; } #li:hover { background: #404040; height: 25px; } :hover /*animacja*/ { -moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; } #li1 #bok { overflow: hidden; display: none; background: #242424; border-radius:0px 0px 5px 5px; } #li:hover #bok { padding: 0; position: absolute; display:block; width: 100px; } #li2 { list-style-type: none; height: 25px; } #li2:hover { background: #404040; height: 25px; } #ul a { color: silver; text-decoration:none; } Bardziej zależy mi na tym pierwszym, może ktoś pomóc? -------------------- ;)
|
|
|
10.12.2013, 23:12:44
Post
#2
|
|
Grupa: Zarejestrowani Postów: 279 Pomógł: 56 Dołączył: 3.06.2010 Skąd: Tarnowskie Góry Ostrzeżenie: (0%) |
w #li1 #bok dodaj:
Kod left: 100px; Spowoduje przesunięcie od lewej o 100px - dopasuj sobie tak żeby było dobrze. W pionie ustaw korzystając z właściwości top w #li1 #ul1 usuń Kod overflof:hidden bo nic nie zobaczysz -------------------- |
|
|
10.12.2013, 23:33:01
Post
#3
|
|
Grupa: Zarejestrowani Postów: 717 Pomógł: 120 Dołączył: 18.04.2009 Ostrzeżenie: (0%) |
Cytat ale chcę zrobić takie coś jak na obrazku tylko przetestuj to jak zrobisz. Takie menusy źle zaprojektowane i nieprzetestowane (90% menusów rozwijanych w ten sposób pewnie, bo nikomu się nie chce testować), cierpią na "efekt uciekającego menu", czyli najeżdżasz na pozycję, rozwija się, myszą niechcący zjedziesz poza obszar menu i odpali się zdarzenie mouse out*, i menu znika. I musisz od nowa najechać. Krótko mówiąc - takie menu to zwykle porażka dla usability. *albo zniknie :hover, jeśli robić na CSS - niestety problem pozostaje. -------------------- |
|
|
11.12.2013, 20:02:29
Post
#4
|
|
Grupa: Zarejestrowani Postów: 324 Pomógł: 27 Dołączył: 21.07.2013 Ostrzeżenie: (0%) |
Dzięki wielkie, działa ładnie oto efekt.
Teraz ma drugi problem, wstawiłem sobie to na przykładowy szablon, ale menu po rozwinięciu chowa się pod innego diva. tak to wygląda -kod w źródle css -css szablonu -------------------- ;)
|
|
|
11.12.2013, 20:09:01
Post
#5
|
|
Grupa: Zarejestrowani Postów: 52 Pomógł: 3 Dołączył: 9.12.2013 Ostrzeżenie: (0%) |
do #li1 #ul1 dodalem z-index:na jakas duza wartosc(tutaj 10 tysiecy) zeby nie wazne co zawsze bylo na wierzchu Ten post edytował Ultear 11.12.2013, 20:09:47 |
|
|
17.12.2013, 19:14:08
Post
#6
|
|
Grupa: Zarejestrowani Postów: 324 Pomógł: 27 Dołączył: 21.07.2013 Ostrzeżenie: (0%) |
Teraz mam taki problem, są 2 menu rozwijane i 1 nie rozwijane i one mi przesuwają zawartość div'ów, a wygląda to tak:
Szablon3 - kod w źródle + css plikv4 Tekst w żółtym divie powinien być wyśrodkowany, ale nie jest. Jest on przesunięty o szerokość menu: "Home" i "Zarejestruj się | Zaloguj się" Tekst "11111111111" także powinien być na środku ale przesowa się o szerokość menu "Kategorie", to samo z zawartością na niebieskawym tle- to powinno być wyrównane do lewej. I moje pytanko. Jak zrobić aby wszystkie menu były "niewidoczne wymiarowo"? To znaczy aby tekst był wyśrodkowany- nie widział danego menu. Ten post edytował kujol 18.12.2013, 10:59:48 -------------------- ;)
|
|
|
Wersja Lo-Fi | Aktualny czas: 25.04.2024 - 18:19 |