login  Naam:   Wachtwoord: 
Registreer je!
 Forum

jQuery drop down laten staan

Offline GroundZero - 29/11/2011 13:44 (laatste wijziging 29/11/2011 14:13)
Avatar van GroundZeroLid Beste,

Ik kan nu (eindelijk) mijn drop down menu's laten zien, echter wanneer ik op het menu zelf wil gaan staan met de muis verdwijnt deze. Dit komt uiteraard omdat mijn jQuery niet goed staat, hij kijkt namelijk naar de mouse-over van de links.

Zou iemand mij aub kunnen vertellen hoe ik dit wel kan fixen met een klein voorbeeld scriptie erbij misschien?

Mijn huidige code onderstaand:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Studiobizz | Audio &amp; Recording</title>
  6.  
  7. <link rel="stylesheet" type="text/css" href="css/style.css" />
  8.  
  9. <script src="js/jquery-1.6.2.min.js"></script>
  10. <script src="js/jquery-ui-1.8.16.custom.min.js"></script>
  11.  
  12. </head>
  14.  
  15. <div id="wrapper">
  16. 	<div id="logo">
  17.     	<img src="images/logo.png" alt="logo" />
  18.     </div>
  19.     <div id="opties">
  20.     	<a href="/" title="opname studio Studiobizz">opname studio Studiobizz</a> - 
  21.         <a href="route/" title="Route">Route</a> - <a href="faq/" title="FAQ">FAQ</a> - 
  22.         <a href="sitemap/" title="Sitemap">Sitemap</a>
  23.     </div>
  24.     <div id="header">
  25.     	<img src="images/header.png" alt="header" />
  26.     </div>
  27.     <div id="menu-wrapper">
  28.     	<div id="menu">
  29.         	<ul>
  30.             	<li>Home</li>
  31.                 <li><a href="#" title="Opname studio" id="opn-btn">Opname studio</a></li>
  32.                 <li>Diensten</li>
  33.                 <li>Muziekstijlen</li>
  34.                 <li>Prijzen</li>
  35.                 <li>Referenties</li>
  36.                 <li class="last">Contact</li>
  37.             </ul>
  38.         </div>
  39.         <div id="opn-menu">
  40.  
  41.         </div>
  42.     </div>
  43.     <div id="content">
  44.     	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mi velit, placerat at placerat eu, cursus dapibus nisi. Sed at erat sed risus porttitor tempus. Phasellus imperdiet quam ac turpis vehicula scelerisque. In quis lectus massa, vitae suscipit lorem. Quisque leo sapien, consequat vitae vehicula et, aliquet sed nisl. Curabitur at turpis ut felis sollicitudin porta vitae quis urna. Phasellus volutpat porta venenatis. Sed hendrerit faucibus metus ac aliquam. Vestibulum dictum ornare lectus quis vehicula. Nullam venenatis quam sit amet velit sagittis sagittis. Etiam risus lorem, dictum at congue nec, dapibus non massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  45.     </div>
  46. </div>
  47.  
  48. <script language="javascript">
  49. $(document).ready(function() {
  50. 	$('#opn-btn').mouseover(function(){
  51. 		$('#opn-menu').toggle();	
  52. 	})
  53.  
  54. 	$('#opn-btn').mouseout(function(){
  55. 		$('#opn-menu').toggle();	
  56. 	})
  57. });
  59.  
  60. </body>
  61. </html>


css code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. html, body, div, span, applet, object, iframe,
  5. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  6. a, abbr, acronym, address, big, cite, code,
  7. del, dfn, em, img, ins, kbd, q, s, samp,
  8. small, strike, strong, sub, sup, tt, var,
  9. b, u, i, center,
  10. dl, dt, dd, ol, ul, li,
  11. fieldset, form, label, legend,
  12. table, caption, tbody, tfoot, thead, tr, th, td,
  13. article, aside, canvas, details, embed, 
  14. figure, figcaption, footer, header, hgroup, 
  15. menu, nav, output, ruby, section, summary,
  16. time, mark, audio, vide, imgo {
  17. 	margin: 0;
  18. 	padding: 0;
  19. 	border: 0;
  20. 	font-size: 100%;
  21. 	font: inherit;
  22. 	vertical-align: baseline;
  23. }
  24.  
  25. body {
  26. 	font-family:Verdana;
  27. 	font-size:12px;
  28. 	color:#333;	
  29. }
  30.  
  31. #wrapper {
  32. 	width:986px;
  33. 	min-height:800px;
  34. 	margin:25px auto;
  35. 	overflow:hidden;
  36. }
  37.  
  38. #logo {
  39. 	width:207px;
  40. 	height:60px;
  41. 	float:left;	
  42. 	margin-left:98px;
  43. }
  44.  
  45. #opties {
  46. 	width:300px;
  47. 	height:16px;
  48. 	float:right;
  49. 	margin:46px 32px 0px 0px;
  50. }
  51.  
  52. #opties a, #opties a:visited {
  53. 	color:#D2007A;
  54. 	text-decoration:none;	
  55. }
  56.  
  57. #opties a:hover {
  58. 	color:#750048;	
  59. }
  60.  
  61. #header {
  62. 	width:986px;
  63. 	height:289px;
  64. 	float:left;	
  65. }
  66.  
  67. #menu-wrapper {
  68. 	width:986px;
  69. 	height:90px;
  70. 	position:relative;
  71. 	float:left;
  72. 	text-align:center;
  73. }
  74.  
  75. #menu-wrapper #menu {
  76. 	width:986px;
  77. 	height:90px;
  78. 	position:relative;
  79. 	top:0px;
  80. 	left:0px;
  81. 	background:url(../images/menu.png);
  82. 	background-repeat:no-repeat;
  83. 	z-index:9998;
  84. }
  85.  
  86. #menu-wrapper #menu ul {
  87. 	list-style:none;
  88. }
  89.  
  90. #menu-wrapper #menu li {
  91. 	display:inline-block;
  92. 	font-size:18px;
  93. 	color:#FFF;
  94. 	margin-top:22px;
  95. 	padding:0px 13px 0px 13px;
  96. 	border-right:2px solid #FFF;
  97. }
  98.  
  99. #menu-wrapper #menu li.last {
  100. 	border:none;	
  101. }
  102.  
  103. #menu-wrapper #menu li a {
  104. 	color:#FFFFFF;
  105. 	text-decoration:none;	
  106. }
  107.  
  108. #content {
  109. 	width:966px;
  110. 	min-height:150px;
  111. 	float:left;
  112. 	margin-left:10px;
  113. }
  114.  
  115. /* menu's */
  116. #opn-menu {
  117. 	min-width:180px;
  118. 	height:300px;
  119. 	background:#333333;
  120. 	position:absolute;
  121. 	top:25px;
  122. 	left:155px;
  123. 	border-bottom-left-radius:4px;
  124. 	border-bottom-right-radius:4px;	
  125. 	-moz-border-radius-bottomleft:4px;
  126. 	-moz-border-radius-bottomright:4px;
  127. 	-webkit-border-bottom-left-radius:4px;
  128. 	-webkit-border-bottom-right-radius:4px;
  129. 	z-index:9997;
  130. 	display:none;
  131. }


EDIT: Had het ook zonder jQuery geprobeerd maar dan werkt er niks.
Ik heb een link met de id opn-btn, wanneer ik daar met mijn muis op staat veranderd er niks aan de div met het id opn-menu :S

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #opn-menu {
  2. 	min-width:180px;
  3. 	height:300px;
  4. 	background:#333333;
  5. 	position:absolute;
  6. 	top:25px;
  7. 	left:155px;
  8. 	border-bottom-left-radius:4px;
  9. 	border-bottom-right-radius:4px;	
  10. 	-moz-border-radius-bottomleft:4px;
  11. 	-moz-border-radius-bottomright:4px;
  12. 	-webkit-border-bottom-left-radius:4px;
  13. 	-webkit-border-bottom-right-radius:4px;
  14. 	z-index:9997;
  15. }
  16.  
  17. #opn-btn:hover #opn-menu {
  18. 	background:#FF0000;
  19. }


Idee staat hier: http://www.devbizz.nl/customers/studiobizz/

Verder heb ik als laatste ook dit geprobeerd:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2.  
  3. 	$('.menulijst').hide();
  4.  
  5. 	// functie voor hover maken
  6. 	function showlist(argument)
  7. 	{
  8. 		$('.menulijst').hide();
  9. 		$('#'+argument).show();
  10. 	}
  11.  
  12. </script>


Dit werkt prima, echter wanneer ik met mijn muis buiten het menu en -of de div komt blijft deze staan en ik weet niet hoe ik dit moet aanpakken ;)

2 antwoorden

Gesponsorde links
Offline Kevin - 29/11/2011 21:19
Avatar van Kevin Crew Ajax/REST Dit is enorm veel code dat je hier doorgeeft, heb je toevallig ook dit voorbeeldje online staan?
Offline GroundZero - 30/11/2011 10:27 (laatste wijziging 30/11/2011 10:33)
Avatar van GroundZero Lid Klopt Kevin, voorbeeldje staat in de bijgeleverde link online ;)
Echter moet je de link zelf kopiëren en plakken want sima kopieert de laatste slash niet mee.

http://www.devbizz.nl/customers/studiobizz/

Kijk, mijn code is prima maar ik zit dan met het verhaal dat wanneer ik het menu niet meer wilt, dat hij toch blijft staan. Ik wil dus, net als in elk ander dropdown menu, dat wanneer mijn muis niet meer op DAT vakje wat eruit kwam zat en -of op die specifieke menu keuze staat dat hij inklapt.

Dat is eigenlijk het hele verhaal dat ik niet voor elkaar krijg ;)

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2. 	$('.menulijst').hide();
  3.  
  4. 	// functie voor hover maken
  5. 	function showlist(argument)
  6. 	{
  7. 		$('.menulijst').hide();
  8. 		$('#'+argument).show();
  9. 	}
  10. </script>
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.272s