Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS][HTML]Menu rozwijane
kujol
post 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 sad.gif
Oto kod:

  1. <ul id="ul">
  2. <li id="li1">Glowny
  3. <ul id="ul1">
  4.  
  5. <li id="li">1
  6. <ul id="bok">
  7. <a href="#" title="#"> <li id="li2">1.1</li> </a>
  8. <a href="#" title="#"> <li id="li2">1.2</li> </a>
  9. <a href="#" title="#"> <li id="li2">1.3</li> </a>
  10. </ul>
  11. </li>
  12.  
  13. <li id="li">2
  14. <ul id="bok">
  15. <a href="#" title="#"> <li id="li2">2.1</li> </a>
  16. <a href="#" title="#"> <li id="li2">2.2</li> </a>
  17. <a href="#" title="#"> <li id="li2">2.3</li> </a>
  18. </ul>
  19. </li>
  20.  
  21. <li id="li">3
  22. <ul id="bok">
  23. <a href="#1" title="1"> <li id="li2">3.1</li> </a>
  24. <a href="#" title="#"> <li id="li2">3.2</li> </a>
  25. <a href="#" title="#"> <li id="li2">3.3</li> </a>
  26. </ul>
  27. </li>
  28.  
  29. <li id="li">4
  30. <ul id="bok">
  31. <a href="#" title="#"> <li id="li2">4.1</li> </a>
  32. <a href="#" title="#"> <li id="li2">4.2</li> </a>
  33. <a href="#" title="#"> <li id="li2">4.3</li> </a>
  34. </ul>
  35. </li>
  36.  
  37.  
  38. </ul>
  39. </li>
  40. </ul>


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? biggrin.gif


--------------------
;)
Go to the top of the page
+Quote Post
vermis
post 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


--------------------
Go to the top of the page
+Quote Post
PrinceOfPersia
post 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.




--------------------
Go to the top of the page
+Quote Post
kujol
post 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


--------------------
;)
Go to the top of the page
+Quote Post
Ultear
post 11.12.2013, 20:09:01
Post #5





Grupa: Zarejestrowani
Postów: 52
Pomógł: 3
Dołączył: 9.12.2013

Ostrzeżenie: (0%)
-----


  1. #ul
  2. {
  3. border-style: solid;
  4. border-width: 1px;
  5. border-color: black;
  6. border-radius: 3px;
  7. text-align:center;
  8. width: 100px;
  9. height: 22px;
  10. cursor: pointer;
  11. list-style-type: none;
  12. padding: 5px;
  13. background: #242424;
  14. font-family: tahoma;
  15. color: silver;
  16. }
  17.  
  18. #li1 #ul1
  19. {
  20. overflow: hidden;
  21. display: none;
  22. background: #242424;
  23. border-radius:0px 0px 5px 5px;
  24. z-index:10000;
  25. }


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
Go to the top of the page
+Quote Post
kujol
post 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


--------------------
;)
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 15:31