Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Problem ze skryptem menu nawigacyjnego
Forum PHP.pl > Forum > Przedszkole
PHPapprentice
17.11.2014, 13:57:28
Witam

Napisałem skrypt menu nawigacyjnego które się otwiera po najechaniu na niego myszką. Wszystko działa spoko ale mam problem z zamknięciem menu. Po prostu nie wiem jak to napisać , więc na razie nie mam jeszcze nic napisane do zamknięcia menu a chciałbym żeby się zamykało jak zjadę myszką z obszaru menu na dowolny inny obszar.

Menu można zobaczyć na stronie :

Moje menu nawigacyjne

Podaje poniżej kod menu :

1. Kod HTML :

[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3.     <head>
  4. 	   <meta charset='utf-8'>
  5. 	   <title>JavaScript Menu Lynda Library</title>
  6. 	   <link type='text/css' href='mainmenu.css' rel='stylesheet'>  
  7. 	   <script type='text/javascript' src='jquery-1.11.1.js' language='javascript'></script>
  8. 	   <script type='text/javascript' src='mainmenu.js' language='javascript'></script>
  9. 	</head>
  10. 	<body>
  11. 	    <div class='menu_bar'>
  12. 		     <div class='library_div'>
  13. 			      <p class='library_text'>
  14. 				      Browser the Library
  15. 				  </p>
  16. 			 </div>
  17. 		</div>
  18. 		<div class='submenu_div'>
  19. 		    <div class='submenu_options'>
  20. 			   <div class='sub_option' id='subop1'>   
  21. 	                          <p class='suboption_text'>			    
  22.  					3D + Animation
  23. 				  </p>	
  24. 			   </div>
  25. 			   <div class='sub_option' id='subop2'>   
  26. 	                         <p class='suboption_text'>			    
  27.  					Audio + Music
  28. 				  </p>	
  29. 			   </div>
  30.  
  31.                            //.....
  32. 			   //Przyciołem trochę skrypt żeby można go było zamieścić w poście.
  33.  
  34. 			    <div class='sub_option' id='subop12'>   
  35. 	                          <p class='suboption_text'>			    
  36.  					Web
  37. 				  </p>	
  38. 			   </div>
  39. 			</div>
  40. 			<div class='submenu_info_options'>
  41. 			    <div class='submenu_content' id='subcont1'>
  42. 				    <h3 class='submenu_header'>Course Topics</h3>
  43. 				</div>
  44. 				<div class='submenu_content' id='subcont2'>
  45. 				    <h3 class='submenu_header'>3D + Animation Software</h3>
  46. 				</div>
  47. 				<div class='submenu_content' id='subcont3'>
  48. 				    <h3 class='submenu_header'>Additional Resources</h3>
  49. 				</div>
  50. 			</div>
  51. 		</div>
  52. 	</body>
  53. </html>
[HTML] pobierz, plaintext


2.Kod JavaScript a raczej jQuery :

Kod
$(function(){
       $('.submenu_div').hide();
      
       $('.library_div').mouseover(function(){
           $('.submenu_div').show();
       });
      
       $('.library_div').mouseover(function(){
           $(this).css('background','#CCCCCC');
           $('.library_text').css('color','black');
       }).mouseout(function(){
           $('.library_text').css('color','white');
       });
      
       $('.sub_option').mouseover(function(){
           $(this).css('background','white');
       }).mouseout(function(){
           $(this).css('background','#CCCCCC');
       });
      
       $('#subop1').mouseover(function(){
           var str = '<div class=\'submenu_content\' id=\'subcont1\'><h3 class=\'submenu_header\'>Course Topics</h3>';
           str = str + '<p class="subcont_text">Business Skill</p>';
           str = str + '<p class="subcont_text">Communication</p>';
           str = str + '<p class="subcont_text">Materials</p>';
           str = str + '<p class="subcont_text">Modeling</p>';
           str = str + '<p class="subcont_text">Particles</p>';
           str = str + '<p class="subcont_text">Mixing</p>';
           str = str + '<p class="subcont_text">Music Business</p>';
           str = str + '<p class="subcont_text">Music Production</p>';
           str = str + '<p class="subcont_text">Music Trasmutation</p>';
           str = str + '<p class="subcont_text">See all</p>';
           str = str + '</div>';
           $('#subcont1').html(str);
          
           var str1 = '<div class=\'submenu_content\' id=\'subcont1\'><h3 class=\'submenu_header\'>3D + Animation Software</h3>';
           str1 = str1 + '<p class="subcont_text">3D Max</p>';
           str1 = str1 + '<p class="subcont_text">After Effects</p>';
           str1 = str1 + '<p class="subcont_text">Blender</p>';
           str1 = str1 + '<p class="subcont_text">Cinema 4D</p>';
           str1 = str1 + '<p class="subcont_text">Flash Professional</p>';
           str1 = str1 + '<p class="subcont_text">Maya</p>';
           str1 = str1 + '<p class="subcont_text">Mud Box</p>';
           str1 = str1 + '<p class="subcont_text">Photoshop</p>';
           str1 = str1 + '<p class="subcont_text">Unity</p>';
           str1 = str1 + '<p class="subcont_text">ZBrush</p>';
           str1 = str1 + '<p class="subcont_text">See all</p>';
           str1 = str1 + '</div>';
           $('#subcont2').html(str1);
          
           var str2 = '<div class=\'submenu_content\' id=\'subcont3\'><h3 class=\'submenu_header\'>Additional Resources</h3>';
           str2 = str2 + '<p class="subcont_text">Articles From our Experts</p>';
           str2 = str2 + '<p class="subcont_text">Playlist center</p>';
           str2 = str2 + '</div>';
           $('#subcont3').html(str2);
           $('#subcont3').html(str2);
          
       });
          
           //.....
           //Też musiałem troche przyciąć tutaj skrypt żeby się zmieścił
      
});


3. Kod CSS :

Kod
.menu_bar{
   width: 100%;
   height: 35px;
   background: #444444;
}

.submenu_div{
   width: 994px;
   height: 410px;
   position: absolute;
   top: 35px;
   left: 150px;
   background: #CCCCCC;
}

.library_div{
   width: 180px;
   height: 100%;
   background: #444444;
   margin-left: 150px;
   text-align: center;
   cursor: pointer;
}

.library_text{
   color: white;
   font-size: 14pt;
   font-weight: bold;
   padding-top: 5px;
}

.submenu_options{
   width: 180px;
   height: 100%;
   background: #CCCCCC;
   float: left;
}

.submenu_content{
   float: left;
   width: 270px;
   height: 100%;
}

.submenu_info_options{
   background: white;
   width: 813px;
   height: 100%;
   float: left;
   border-bottom: 1px solid black;
   border-right: 1px solid black;
}

.sub_option{
   text-align: left;
   cursor: pointer;
}



.submenu_header{
   font-size: 14pt;
   color: black;
   padding-top: 10px;
   padding-left: 19px;
}


Ma ktoś jakiś patent na to jak dorobić żeby to menu się zamykało. smile.gif

Pozdrawiam.
tzm
17.11.2014, 14:15:17
Wrzuć to na jsfiddle
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.