Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS][Java]Wysuwane menu
Forum PHP.pl > Forum > Przedszkole
djtomaszq
10.11.2015, 19:35:09
Witam. Zrobiłem sobie wysuwane menu. I każdy wysuniety element z menu ustawilem większą szerokość. Chce aby po wysunięciu menu to co jest niżej poszło w dół. zrobilem to tak: 

[PHP] pobierz, plaintext 
  1. ol > li > ul > li{
  2. 	margin: 0px;
  3. 	padding: 0px;
  4. 	height: 150px;
  5. 	width: 300px;
  6. }
  7.  
  8. ol > li > ul {
  9. 	position: relative;
  10. 	display: none;
  11.     list-style-type:none;
  12.     padding:0;
  13. 	background-color: white;
  14. }
[PHP] pobierz, plaintext


ale wtedy przesuwa mi też belke z menu o powiekszona szerokosc a jesli dam position: absolute to wtedy to co poniżej nie schodzi w dol tylko zostaje przykryte wysunietym menu. Co zmienić?
RaiZeN
10.11.2015, 22:34:05
JavaScript nie java, no i to jest sam css. biggrin.gif
Jeśli możesz to wrzuć demo na jsfiddle bo ciężko zrozumieć.
djtomaszq
11.11.2015, 10:45:37
https://jsfiddle.net/v4eu1y5n/

Coś takiego tylko nie wiem czemu tu nie działa wysuwanie
viking
11.11.2015, 13:38:39 
[HTML] pobierz, plaintext 
  1. $(".wysun_menu").click(function(e)
  2. 	{
  3.         e.preventDefault();
  4. 		$("ol > li > ul").toggle("show");
  5. 	});
[HTML] pobierz, plaintext


No i oczywiście załącz jQuery.
djtomaszq
12.11.2015, 15:23:52
Rezygnuje na razie z jquery kod mam taki:

i żeby background zielony się nie zwiekszal po najechaniu myszka i jednoczesnie belka siwa zsuwała się pod wysuniete czerwone menu

[PHP] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<title>Menu</title>
  4. 		<meta charset="UTF-8"/>
  5. 		<link rel="stylesheet" href="style.css" type="text/css"/>
  6. 	</head>
  7.  
  8. 	<body>
  9. 		<div id="menu">
  10. 			<ol>
  11. 				<li>Mecz
  12. 					<ul>
  13. 						<li>1 mecz</li>
  14. 						<li>2 mecz</li>
  15. 						<li>3 mecz</li>
  16. 					</ul>
  17. 				</li>
  18. 				<li>Gracz
  19. 					<ul>
  20. 						<li>1 gracz</li>
  21. 						<li>2 gracz</li>
  22. 						<li>3 gracz</li>
  23. 					</ul>
  24. 				</li>
  25. 				<li>Zawodnik
  26. 					<ul>
  27. 						<li>1 Zawodnik</li>
  28. 						<li>2 Zawodnik</li>
  29. 						<li>3 Zawodnik</li>
  30. 					</ul>
  31. 				</li>
  32. 			</ol>
  33. 		</div>
  34.  
  35. 		<div id="tresc">
  36.  
  37. 		</div>
  38. 	</body>
  39. </html>
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. html{
  2. 	margin: 0px;
  3. 	padding: 0px;
  4. }
  5.  
  6. body{
  7. 	margin: 0px;
  8. 	padding: 0px;
  9. }
  10.  
  11. #menu{
  12. 	background-color: #000000;
  13. 	margin-top: 10px;
  14. 	height: 50px;
  15. }
  16.  
  17. #tresc{
  18. 	height: 20px;
  19. 	background-color: #696969;
  20. 	clear: both;
  21. }
  22.  
  23. ol{
  24. 	margin: 0px;
  25. 	padding: 0px;
  26. 	color: yellow;
  27. 	font-size: 16px;
  28. }
  29.  
  30. ol > li{
  31. 	margin-right: 50px;
  32. 	margin-top: 15px;
  33. 	float: left;
  34. 	background-color: green;
  35. }
  36.  
  37. ol > li > ul:first-child{
  38. 	background-color: red;
  39. width: 200px;
  40. }
  41.  
  42. ol > li:hover > ul{
  43. 	display: block;
  44. }
  45.  
  46. ol > li > ul{
  47. 	margin: 0px;
  48. 	padding: 0px;
  49. 	display: none;
  50. }
  51.  
  52. ol > li > ul > li{
  53. 	list-style-type: none;
  54. }
[PHP] pobierz, plaintext
kafowi
12.11.2015, 15:42:11
Kod
ol > li:hover > ul{
    position:absolute;
    display: block;
}

http://jsfiddle.net/kafowi/bxrqgxcx/1/

@edit
Nie doczytałem pierwszego postu, sorry.
djtomaszq
12.11.2015, 16:33:49
Ale teraz druga belka nie "ucieka" pod wysuwane czerwone tylko chowa sie za nia. Ja chce zeby uciekala
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.