Sujet Précédent Sujet Suivant

Menu défaillant

Fermé
Evajolan Messages postés 7 Date d'inscription lundi 5 novembre 2018 Statut Membre Dernière intervention 10 novembre 2018 - Modifié le 10 nov. 2018 à 11:19
 Zero - 12 nov. 2018 à 14:07
Bonjour,

N'ayant pas pu régler mon problème avec Edge, je me suis lancé dans la programmation d'un autre menu qui fonctionne à moitié : au passage de la souris les onglets 3 et 4 ne se déroulent pas empêchant de voir les sous-menus : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<style type="text/css">
/* Changer la police du menu :*/
#easymenu{ font-family:Times New Roman ;}
/* Changer le style des liens principaux */
/* aspect normal*/
#easymenu a.principal{color:#ff0000; text-decoration:none; color:#FFFFFF;}
/* aspect une fois séléctionné*/
#easymenu a.activ{ background-color:#ff0000; color:#FFFFFF; text-decoration:none;position:absolute;}
/* Changer le style de la barre derriére les entrées principales */
#barreeasymenu{ background-color:#ff0000; background-repeat:repeat-x; background-position:top;}
/* Changer le style de l'arrière plan des sousmenus */
#easymenu .sousmenu{ background-color:#ff0000; border:1px solid black; border-top-width:0px;}
/* changer le style des entrées des sousmenus*/
/* aspect en temps normal*/
#easymenu .sousmenu a{  color:#FFFFFF; text-decoration:none; display:block; border-top:1px solid white;}
/* aspect lors du passage de la sourie*/
#easymenu .sousmenu a:hover{  background-color:#0066FF;}

/* Eviter de toucher à cette partie, risques de dysfonctionnements du menu*/
#easymenu a.principal,#easymenu a.activ{position:absolute;}
#barreeasymenu{width:100%;}
#easymenu .sousmenu{position:absolute; overflow:hidden;}
#body{ margin:0px;}
</style>
<div id="easymenu">
<a id="lienprincipal0" class="principal" style="width:9%;left:0%" href="#" onMouseOver="montrer(0);" onMouseOut="cacherbientot()">Le Club</a>
<a id="lienprincipal1" class="principal" style="width:9%;left:9%" href="#" onMouseOver="montrer(1);" onMouseOut="cacherbientot()">Les équipes</a>
<a id="lienprincipal2" class="principal" style="width:9%;left:18%" href="#" onMouseOver="montrer(2);" onMouseOut="cacherbientot()">2018 - 2019 </a>
<a id="lienprincipal3" class="principal" style="width:9%;left:27%" href="#" onMouseOver="montrer(3);" onMouseOut="cacherbientot()">Classements</a>
<a id="lienprincipal4" class="principal" style="width:9%;left:36%" href="#" onMouseOver="montrer(4);" onMouseOut="cacherbientot()">Célébrités</a>
<a id="lienprincipal5" class="principal" style="width:9%;left:45%" href="https://uagrugby.com/2003_2004.htm" onMouseOver="montrer(5);" onMouseOut="cacherbientot()">Archives</a>
<a id="lienprincipal6" class="principal" style="width:9%;left:54%" href="#" onMouseOver="montrer(6);" onMouseOut="cacherbientot()">Contacts</a>
<a id="lienprincipal7" class="principal" style="width:9%;left:63%" href="https://uagrugby.com/pro_d2.htm" onMouseOver="montrer(7);" onMouseOut="cacherbientot()">Liens</a>
<a id="lienprincipal8" class="principal" style="width:9%;left:72%" href="https://uagrugby.com/phpbb3.2/index.php" onMouseOver="montrer(8);" onMouseOut="cacherbientot()">Forums</a>
<a id="lienprincipal9" class="principal" style="width:9%;left:81%" href="https://uagrugby.com/actualite_1.htm" onMouseOver="montrer(9);" onMouseOut="cacherbientot()">Actualtés</a>
<a id="lienprincipal10" class="principal" style="width:9%;left:90%" href="https://uagrugby.com/photos.htm" onMouseOver="montrer(10);" onMouseOut="cacherbientot()">Album Photos</a>


<div id="barreeasymenu">    </div>

<div id="menu0" class="sousmenu" style="left:0%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(0);">
<a href="https://uagrugby.com/coordonnees.htm">Coordonnées</a>
<a href="https://uagrugby.com/organigramme.htm">Organigramme</a>
<a href="https://uagrugby.com/historique.htm">Historique</a>
<a href="https://uagrugby.com/partenaires.htm">Partenaires</a>
<a href="https://uagrugby.com/installations.htm">Installations</a>
<a href="https://uagrugby.com/centenaire.htm">Le Centenaire</a>
</div>
<div id="menu1" class="sousmenu" style="left:9%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(1);">
<a href="https://uagrugby.com/equipe_1.htm">Équiipe Une</a>
<a href="https://uagrugby.com/equipe_2.htm">Équipe 2</a>
<a href="https://uagrugby.com/balandrade.htm">Juniors</a>
<a href="https://uagrugby.com/cadets.htm">Cadets</a>
<a href="https://uagrugby.com/feminine.htm">Féminines</a>
<a href="https://uagrugby.com/cadettes.htm">Cadettes</a>
<a href="https://uagrugby.com/ecole_01.htm">École de rugby</a>
<a href="https://uagrugby.com/effectif.htm">Effectif seniors</a>
<a href="https://uagrugby.com/effectif_f.htm">Effectif féminines</a>
</div>
<div id="menu2" class="sousmenu" style="left:18%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(2);">
<a href="https://uagrugby.com/poule.htm">Adversaires</a>
<a href="https://uagrugby.com/saison_1.htm">Résultats poule</a>
<a href="https://uagrugby.com/calendrier_1.htm">Calendriers</a>
<a href="https://uagrugby.com/stats_co.htm">Statistiques</a>
<a href="https://uagrugby.com/resultats.htm">Résultats équipes</a>
<a href="https://uagrugby.com/photos.htm">Photothèque</a>
<a href="https://uagrugby.com/proch_match.htm">Prochain match</a>
<a href="https://uagrugby.com/comptes_rendus_18_19.htm">Comptes rendus</a>
</div>
<div id="menu3" class="sousmenu" style="left:27%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(3);">
<a href="https://uagrugby.com/classement_une.htm">Équipe UNE</a>
<a href="https://uagrugby.com/classement_eq_2.htm">Équipe Espoirs</a>
<a href="https://uagrugby.com/classement_juniors_1.htm">Juniors 1</a>
<a href="https://uagrugby.com/classement_juniors_2.htm">Juniors 2</a>
<a href="https://uagrugby.com/classement_cadets.htm">Cadets</a>
<a href="https://uagrugby.com/classement_feminines.htm">Féminines</a>
<a href="https://uagrugby.com/classement_cadettes.htm">Cadettes</a>
</div>
<div id="menu4" class="sousmenu" style="left:36%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(4);">
<a href="https://uagrugby.com/celeb_01.htm">Joueurs</a>
<a href="https://uagrugby.com/honneur_01.htm">Équipes</a>
</div>
<div id="menu5" class="sousmenu" style="left:45%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(5);">
</div>
<div id="menu6" class="sousmenu" style="left:54%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(6);">
<a href="#">Webmestre</a>
</div>
<div id="menu7" class="sousmenu" style="left:63%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(7);">
</div>
<div id="menu8" class="sousmenu" style="left:72%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(8);">
</div>
<div id="menu9" class="sousmenu" style="left:81%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(9);">
</div>
<div id="menu10" class="sousmenu" style="left:90%; width:9%;" onMouseOut="cacher()"  onMouseOver="montrer(10);">
</div>
</div><script language="javascript">var entrees = new Array();var hini = new Array();for (a=0; a<3; a++) {entrees[a] = 0;
hini[a] = document.getElementById('menu'+a).offsetHeight;
document.getElementById('menu'+a).style.height = '0px';
}
function mise_a_jour_affichage() {
for (a=0; a<entrees.length; a++) {
if (entrees[a]>0) {
entrees[a]--;
document.getElementById('menu'+a).style.display = 'block';
document.getElementById('menu'+a).style.height = (document.getElementById('menu'+a).offsetHeight+(hini[a]-document.getElementById('menu'+a).offsetHeight)/10)+'px';
document.getElementById('lienprincipal'+a).className='activ'
} else {
document.getElementById('menu'+a).style.height = (document.getElementById('menu'+a).offsetHeight/2)+'px';
if (document.getElementById('menu'+a).offsetHeight<4) {
document.getElementById('menu'+a).style.display = 'none';
document.getElementById('lienprincipal'+a).className='principal'
}
}
}
setTimeout("mise_a_jour_affichage()", 20);
}
mise_a_jour_affichage();
function montrer(num) {
for (a=0; a<entrees.length; a++) {
entrees[a] = 0;
}
entrees[num] = 1000;
}
function cacher() {
for (a=0; a<entrees.length; a++) {
entrees[a] = 0;
}
}
function cacherbientot() {
for (a=0; a<entrees.length; a++) {
if (entrees[a]>0) {
entrees[a] = 10;
}
}
}
// Adapter taille de la barre au contenu
hmax=0
for (a=0; a<entrees.length; a++) {
if(hmax<document.getElementById('lienprincipal'+a).offsetHeight){
hmax = document.getElementById('lienprincipal'+a).offsetHeight;
}
}
document.getElementById('barreeasymenu').style.height = hmax+'px';
</script>


</body>
</html>

</body>
</html>

Si quelqu'un pouvait m'aider à résoudre ce problème…
Merci d'avance


A voir également:

1 réponse

Réponse 1 / 1
Zero
Modifié le 12 nov. 2018 à 14:07
Salut,

Je te suggère de passer aux technologies d'aujourd'hui. On ne va pas réinventer la roue :)

Voici 2 exemples de dropdown avec le framework bootstrap. 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>

<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>
1

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

6 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses