Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript][HTML]DropDownMenu onclick
Forum PHP.pl > Forum > Przedszkole
ghastblood
5.07.2012, 10:58:38
Witam mam taki kodzik

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  7.         <link rel="Stylesheet" type="text/css" href="style.css" />
  8. 	<title>HDD MENU</title>
  9.        <link rel="stylesheet" href="style.css" type="text/css" media="screen"/> 
  10.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  11.         <style>
  12. #navbar {
  13. 	margin: 0;
  14. 	padding: 0;
  15. 	height: 1em; }
  16. #navbar li {
  17. 	list-style: none;
  18. 	float: left; }
  19. #navbar li a {
  20. 	display: block;
  21. 	padding: 3px 8px;
  22. 	background-color: #5e8ce9;
  23. 	color: #fff;
  24. 	text-decoration: none; }
  25. #navbar li ul {
  26. 	display: none; 
  27. 	width: 10em; /* Width to help Opera out */
  28. 	background-color: #69f;}
  29. #navbar li:hover ul {
  30. 	display: block;
  31. 	position: absolute;
  32. 	margin: 0;
  33. 	padding: 0; }
  34. #navbar li:hover li {
  35. 	float: none; }
  36. #navbar li:hover li a {
  37. 	background-color: #69f;
  38. 	border-bottom: 1px solid #fff;
  39. 	color: #000; }
  40. #navbar li li a:hover {
  41. 	background-color: #8db3ff; }
  42.  
  43. #navbar li:hover ul, #navbar li.hover ul {
  44. 	display: block;
  45. 	position: absolute;
  46. 	margin: 0;
  47. 	padding: 0; }
  48. #navbar li:hover li, #navbar li.hover li {
  49. 	float: none; }
  50. #navbar li:hover li a, #navbar li.hover li a {
  51. 	background-color: #69f;
  52. 	border-bottom: 1px solid #fff;
  53. 	color: #000; }
  54.       </style>
  55. </head>
  56. <body>
  57. 3
  58. 4
  59. 5
  60. 6
  61. 7
  62. 8
  63. <ul id="navbar">
  64. 	<li><a href="#">Item One</a><ul>
  65. 		<li><a href="#">Subitem One</a></li>
  66. 		<li><a href="#">Second Subitem</a></li>
  67. 		<li><a href="#">Numero Tres</a></li></ul>
  68. 	</li>
  69. 	<!-- ... and so on ... -->
  70. </ul>
  71. </body>
  72. </html>
[HTML] pobierz, plaintext


drop down działa przez css po najechaniu a chciał bym żeby sub menu pokazywało się po kliknięciu.
SmokAnalog
5.07.2012, 11:02:43
Jeśli ma działać po kliknięciu, to nie obejdzie się bez JavaScript. Poszukaj gotowych rozwiązań, nie ma co pisać milionowego skryptu drop down menu.
ghastblood
5.07.2012, 11:09:14
Właśnie szukałem gotowca albo exampla jakiego i tyko jquery ale działa ty najechaniu a nie po kliknięciu.
SmokAnalog
5.07.2012, 12:14:58
jQuery to dobry pomysł. Jeśli znalazłeś jakiś ciekawy przykład, który działa po najechaniu kursora, to całkiem łatwo będzie go przerobić. Przejrzyj sobie to zestawienie: http://www.1stwebdesigner.com/css/38-jquer...menu-solutions/ - niektóre działają po kliknięciu.
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.