1,105,450 Community Members

dhtml menu problem

Member Avatar
dr_copper
Newbie Poster
2 posts since Feb 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi, I try to create a menu for the website of my friend. But I have a probleme with the reaction of event. My submenu close when i quit the section div. Someone can help me please?

my code:

<html>
 <head>
  <title>test menu</title>
  <script language="javascript">
  function ouvrir_menu(cible){
   liens_cible="liens"+cible;
   document.getElementById(liens_cible).style.visibility="visible";
  }
  function fermer_menu(cible){
   liens_cible="liens"+cible;
   document.getElementById(liens_cible).style.visibility="hidden";
  }
  </script>
 </head>
 <body>
<div id="menu" style="position:relative;top:50px;width:200px;">

 <div id="section1" style="width:200px;position:absolute;top:0px;background-color:grey;" onMouseOver="ouvrir_menu('1')">
  Section 1
 </div>

 <div id="liens1" style="width:198px;height:40px;position:absolute;top:0px;visibility:hidden;z-index:2;border:1px solid red"  onMouseOut="fermer_menu('1')">
  <div style="position:relative;top:18px;background-color:lightgrey;">
   Lien 1
  </div>
 </div>

</div>
 </body>
</html>
Member Avatar
dr_copper
Newbie Poster
2 posts since Feb 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

ok i find the probleme in one of div. If that can help someone i post my new code

<html>
 <head>
  <title>test menu</title>
  <script language="javascript">
  function ouvrir_menu(cible){
   liens_cible="liens"+cible;
   document.getElementById(liens_cible).style.visibility="visible";
  }
  function fermer_menu(cible){
   liens_cible="liens"+cible;
   document.getElementById(liens_cible).style.visibility="hidden";
  }
  </script>
 </head>
 <body>
 <div id="menu" style="position:relative;top:0px;width:200px;">

  <div id="section1" style="width:200px;position:relative;background-color:darkgreen;" onMouseOver="ouvrir_menu('1')" onMouseOut="fermer_menu('1')">Section1
   <div id="liens1" style="position:absolute;visibility:hidden;top:18px;z-index:2;">
    <div style="width:200px;background-color:green;">
     Lien1<br>
 	 Lien2<br>
 	 Lien3<br>
 	 Lien4
    </div>
   </div>
  </div>

  <div id="section2" style="width:200px;position:relative;background-color:darkgreen;" onMouseOver="ouvrir_menu('2')" onMouseOut="fermer_menu('2')">Section2
   <div id="liens2" style="position:absolute;visibility:hidden;top:18px;z-index:2;">
    <div style="width:200px;background-color:green;">
     Lien1<br>
 	Lien2<br>
 	Lien3<br>
 	Lien4
    </div>
   </div>
  </div>


  <div id="section3" style="width:200px;position:relative;background-color:darkgreen;" onMouseOver="ouvrir_menu('3')" onMouseOut="fermer_menu('3')">Section3
   <div id="liens3" style="position:absolute;visibility:hidden;top:18px;z-index:2;">
    <div style="width:200px;background-color:green;">
     Lien1<br>
 	Lien2<br>
 	Lien3<br>
 	Lien4
    </div>
   </div>
  </div>

 </div>
 </body>
</html>
Question Self-Answered as of 2 Years Ago
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: