Posted By

skeletor1101 on 05/23/12


Tagged

css javascript jquery


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

hurcy


jQuery toggle() issue


 / Published in: JavaScript
 

I am having an issue making the div stay opened when it gets animated

  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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Untitled Document</title>
  6. </head>
  7. <style>
  8. .main_nav {
  9. background: #003580;
  10. color:#fff;
  11. width:800px;
  12. height:400px;
  13.  
  14. }
  15. .main_nav_full {
  16.  
  17. width:1000px;
  18. }
  19. .nav_col {
  20. float:left;
  21. width:200px;
  22. }
  23.  
  24.  
  25. .toplevelnav li{
  26.  
  27. list-style-type: none;
  28.  
  29. }
  30.  
  31. .toplevelnav{
  32. margin-bottom: -20px;
  33. }
  34.  
  35. .red{
  36. background-color: red;
  37. }
  38.  
  39. .drop-down{
  40. background-color: #021E2F;
  41. height: inherit;
  42.  
  43. }
  44.  
  45. .drop-down ul{
  46. padding-top: 50px;
  47. }
  48.  
  49. .main_nav ul{
  50. list-style-type: none;
  51. padding-left: 10px;
  52. }
  53.  
  54. h5{
  55. font-size: 20px;
  56. padding-left: 10px;
  57. border-bottom: 1px solid grey;
  58. margin: 5px;
  59. color: #0082D1;
  60. }
  61. .main_nav a{
  62. text-decoration: none;
  63. font-size: 14px;
  64. text-transform: uppercase;
  65. color: white;
  66. }
  67. .navimage{
  68. /*background-image: url("../../navstudents.jpg");*/
  69. height: inherit;
  70. }
  71. .main_nav li:hover{
  72. background-color: blue;
  73. }
  74. .main_nav #space{
  75.  
  76. height:366px;
  77. width:295px;
  78. background-image:url('navstudents.jpg');
  79. background-repeat:no-repeat;
  80. background-position: bottom right;
  81. z-index:100;
  82. margin-left:505px;
  83. padding-top:35px;
  84. border:0;
  85.  
  86.  
  87.  
  88. }
  89.  
  90. .main_nav_full #space{
  91.  
  92. height:366px;
  93. width:295px;
  94. background-image:url('navstudents.jpg');
  95. background-repeat:no-repeat;
  96. background-position: bottom right;
  97. z-index:100;
  98. margin-left:705px;
  99. padding-top:35px;
  100. border:0;
  101.  
  102.  
  103.  
  104. }
  105.  
  106. </style>
  107. <body>
  108. <div class="toplevelnav">
  109. <ul><li><span class="showdropnav">HOVER</span></li></ul>
  110. </div>
  111. <div class="main_nav">
  112.  
  113. <div class="nav_col">
  114. <h5>HEADING</h5>
  115. <ul>
  116. <a href="#"><li>LINK</li></a>
  117. <a href="#" class="drop_down_link" dropDownName="drop-down-1"><li>HOVER</li></a>
  118. <a href="#" class="drop_down_link" dropDownName="drop-down-2"><li>HOVER</li></a>
  119. <a href="#"><li>LINK</li></a>
  120. <a href="#"><li>LINK</li></a>
  121. <a href="#"><li>LINK</li></a>
  122.  
  123. </ul>
  124. </div>
  125. <div class="nav_col drop-down drop-down-1">
  126.  
  127. <ul>
  128. <a href="#"><li>LINK</li></a>
  129. <a href="#"><li>LINK</li></a>
  130. <a href="#"><li>LINK</li></a>
  131. </ul>
  132. </div>
  133. <div class="nav_col drop-down drop-down-2">
  134. <ul>
  135. <a href="#"><li>LINK</li></a>
  136. <a href="#"><li>LINK</li></a>
  137. </ul>
  138. </div>
  139.  
  140. <div class="nav_col">
  141. <h5>HEADING</h5>
  142. <ul>
  143. <a href="#"><li>LINK</li></a>
  144. <a href="#"><li>LINK</li></a>
  145.  
  146. </ul>
  147. </div>
  148. <div class="nav_col">
  149. <h5>HEADING</h5>
  150. <ul>
  151. <a href="#"><li>LINK</li></a>
  152. <a href="#"><li>LINK</li></a>
  153. <a href="#"><li>LINK</li></a>
  154. <a href="#"><li>LINK</li></a>
  155. <a href="#"><li>LINK</li></a>
  156. <a href="#"><li>LINK</li></a>
  157. <a href="#"><li>LINK</li></a>
  158. <a href="#"><li>LINK</li></a>
  159. <a href="#"><li>LINK</li></a>
  160. <a href="#"><li>LINK</li></a>
  161.  
  162. </ul>
  163. </div>
  164. <div class="nav_col">
  165. <h5>HEADING</h5>
  166.  
  167. <ul>
  168. <a href="#"><li>LINK</li></a>
  169. <a href="#" class="drop_down_link" dropDownName="drop-down-3"><li>HOVER</li></a>
  170. <a href="#"><li>LINK</li></a>
  171. </ul>
  172.  
  173. </div>
  174. <div class="nav_col drop-down drop-down-3 third-drop">
  175. <ul>
  176. <a href="#"><li>LINK</li></a>
  177. <a href="#"><li>LINK</li></a>
  178. </ul>
  179. </div>
  180. <div id="space"></div>
  181. </div>
  182. </body>
  183. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" language="javascript"></script>
  184. <script>
  185. $('.drop-down').hide();
  186. $('.main_nav').hide();
  187.  
  188. $('.showdropnav').hover(function(){$('.main_nav').show()}, function(){$('.main_nav').hide()});
  189. $('.main_nav').hover(function(){$('.main_nav').show()}, function(){$('.main_nav').hide()});
  190.  
  191. $('.drop-down').hover(function(){
  192. $(this).show();
  193. if($('a.drop_down_link').hover()){
  194. $('div.main_nav').toggleClass("main_nav_full");
  195. }
  196. }, function(){
  197. $(this).hide();
  198. if($('a.drop_down_link').hover()){
  199. $('div.main_nav').toggleClass("main_nav_full");
  200. }
  201. });
  202.  
  203. $('a.drop_down_link').hover(function(){
  204.  
  205. var dropDown = $(this).attr("dropDownName");
  206.  
  207.  
  208. if($('.drop_down').hover()){
  209. $('div.main_nav').toggleClass("main_nav_full");
  210.  
  211. $('div.'+dropDown).stop(false,true,true).toggle(300,function(){});
  212.  
  213. }
  214. else{
  215.  
  216.  
  217.  
  218. }
  219.  
  220.  
  221.  
  222.  
  223.  
  224.  
  225.  
  226.  
  227.  
  228. });
  229. </script>
  230. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Some0ne on May 23, 2012

This isn't a help site just a snippet site, I would suggest you try stackoverflow.com :)

You need to login to post a comment.