We're a community of 1077K IT Pros here for help, advice, solutions, professional growth and fun. Join us!

1,076,174 Members — Technology Publication meets Social Media

Start New Discussion Reply to this Discussion

Ad: HelpDesk or Customer Support

0

dhtml menu problem

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>

1

Contributor

1

Reply

2 Hours

Discussion Span

1 Year Ago

Last Updated

2

Views

Question
Answered

Newbie Poster

2 posts since Feb 2012

Reputation Points: 10

Solved Threads: 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>

Newbie Poster

2 posts since Feb 2012

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

Question Self-Answered as of 1 Year Ago

This question has already been solved: Start a new discussion instead

You

Web Development > JavaScript / DHTML / AJAX

© 2013 DaniWeb® LLC

Page rendered in 0.0853 seconds using 2.73MB