login  Naam:   Wachtwoord: 
Registreer je!
 Forum

navigation menu in CSS

Offline Dierre - 02/06/2006 16:46
Avatar van DierreMySQL interesse ik heb een navigatie menu met CSS en javascript
Wanneer ik over mijn "button" ga kan ik submenu's verkrijgen en die staan dan in een ander kleur qua achtergrond. maar wanneer ik weg ga van mijn menu, verdwijnt ook die achtergrond... Weet iemand een oplossing hoe ik die achtergrond vast zou kunnen houden. (dus ook zichtbaar als ik niet op mijn menu sta...)

hieronder zal ik ff mijn code posten...

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <title>Horizontaal menu</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <style type="text/css">
  6.  
  7. #menuitems {  
  8. background:#56568F;   
  9. width:"100%"px;          
  10. height:16px;          
  11. font-family:Verdana;  
  12. font-size:80%;        
  13. font-weight:normal;    
  14. }
  15.  
  16. a.menu {
  17. background:#8484DB;
  18. color:blue;        
  19. }
  20.  
  21. a:hover.menu {
  22. background:#8484DB;
  23. color:red;            
  24. }
  25. </style>
  26.  
  27. <script type="text/javascript">
  28.  
  29. var submenu=new Array()
  30.  
  31. submenu[0]=''
  32. submenu[1]='<a href="#">Algemeen<\/a>     <a href="#">Werking<\/a>'
  33. submenu[2]=''
  34. submenu[3]=''
  35. submenu[4]='<a href="#">Geschiedenis<\/a>     <a href="#">Palmares<\/a>     <a href="#">internationaal<\/a>'
  36. submenu[5]='<a href="#">Foto\'s<\/a>     <a href="#">Audio<\/a>     <a href="#">Naslag<\/a>'
  37. submenu[6]=''
  38. submenu[7]=''
  39.  
  40. function toon(teller) {
  41. document.getElementById('menuitems').style.visibility="visible"
  42. document.getElementById('menuitems').innerHTML=submenu[teller]}
  43.  
  44. function hide() {
  45. document.getElementById('menuitems').style.visibility="hidden"}
  46.  
  47. function show() {
  48. document.getElementById('menuitems').style.visibility="visible"}
  49.  
  50. </script>
  51.  
  52. </head>
  53.  
  54. <body bgcolor="#8484DB">
  55. <a class="menu" href="home.html" target="mainFrame" onMouseover="toon(0)">Home</a>     
  56. <a class="menu" href="#" target="mainFrame" onMouseover="toon(1)">Orkest</a>     
  57. <a class="menu" href="#" target="mainFrame" onMouseover="toon(2)">Dirigent</a>     
  58. <a class="menu" href="#" target="mainFrame" onMouseover="toon(3)">Agenda</a>     
  59. <a class="menu" href="#" target="mainFrame" onMouseover="toon(4)">Historiek</a>
  60. <a class="menu" href="#" target="mainFrame" onMouseover="toon(5)">Media</a>
  61. <a class="menu" href="#" target="mainFrame" onMouseover="toon(6)">Contact</a>
  62. <a class="menu" href="#" target="mainFrame" onMouseover="toon(7)">Links</a><br>
  63.  
  64. <div id="menuitems" onmouseout="hide()" onmouseover="show()"></div>
  65.  
  66. </body>
  67. </html>


TIA
Dieter

3 antwoorden

Gesponsorde links
Offline svm - 02/06/2006 17:26
Avatar van svm PHP ver gevorderde Verander in de laatste div regel van de body "hide()" in "show()"
Offline Grayen - 02/06/2006 17:29 (laatste wijziging 02/06/2006 17:29)
Avatar van Grayen PHP ver gevorderde plaats dit in je css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #color {  
  2. background:#56568F;   
  3. width:"100%"px;          
  4. height:16px;          
  5. font-family:Verdana;  
  6. font-size:80%;        
  7. font-weight:normal;    
  8. }


en dit:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="menuitems" onmouseout="hide()" onmouseover="show()"></div>


vervangen door:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="color"><div id="menuitems" onmouseout="hide()" onmouseover="show()"></div></div>


@svm
die is nog beter:p
Offline Dierre - 02/06/2006 18:10
Avatar van Dierre MySQL interesse ja idd, was eigenlijk een beetje een stomme vraag van me...
had dit zelf ook wel moeten zien :s

sorry voor het lastig vallen en bedankt voor de snelle reacties....

grz dieter
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.219s