Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Menu rozwijane
Forum PHP.pl > Forum > Przedszkole
kujol
10.12.2013, 22:24:57
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:

[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext


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
vermis
10.12.2013, 23:12:44
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
PrinceOfPersia
10.12.2013, 23:33:01
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.


kujol
11.12.2013, 20:02:29
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
Ultear
11.12.2013, 20:09:01 
[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


do #li1 #ul1 dodalem z-index:na jakas duza wartosc(tutaj 10 tysiecy) zeby nie wazne co zawsze bylo na wierzchu
kujol
17.12.2013, 19:14:08
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.
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.