Propriete du Menu en javascript
nicusjam
Messages postés
36
Date d'inscription
Statut
Membre
Dernière intervention
-
nicusjam Messages postés 36 Date d'inscription Statut Membre Dernière intervention -
nicusjam Messages postés 36 Date d'inscription Statut Membre Dernière intervention -
Bonjour, je fais un menu en js (tiré de l'excellent alsacreations) et je souhaiterai que le deuxieme onglet reste ouvert quand je choisi un de ses rubriques, comment faire avec le script js que j'ai deja, il me faut une seconde action sur mon onclick ou une condition sur l'onglet ? merci pour votre aide .<
code><style>
/*Partie CSS pour le menu deroulant*/
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
width:132px;
}
#menu {
position: absolute; /* placement du menu, à modifier selon les besoins */
top: 0;
left: 0;
}
#menu {
width: 12em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;
height: 18px;
width:132px;
line-height: 20px;
text-align: left;
font-weight: bold;
border: 1px solid gray;
background: #F49F0E;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
font-size:xx-small;
}
#menu li a, #menu dt a {
color: black ;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background:#97BE0D;
font-color:#97BE0D;
}
.style1{text-align:left;
color:#97BE0D;
text-decoration:underline #F49F0E;
border:0.5px solid #F49F0E;
}
.style{
text-align:left;
color:#97BE0D;
text-decoration:underline #F49F0E;
}
</style>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<dl id="menu">
<dt onclick="javascript:montre('smenu1');"><a href="index.html"target="_parent"target="_parent">Accueil</a></dt>
<dt onclick="javascript:montre('smenu2');">Produits</dt>
<dd id="smenu2">
<ul>
<li class="style1"><b>PENDULAIRES</b></li>
<li><a href="clt_pendulaires_acces.html"target="_parent">Acces Gare</a></li>
<li><a href="clt_pendulaires_gares.html"target="_parent">En Gare</a></li>
<li><a href="F_EspacesModulables_Danemark_F.html" target="_parent" >Dans le train</a></li>
<li class="style1"><b>LOISIRS/TOURISME</b></li>
<li><a href="clt_loisir_acces.html"target="_parent">Acces Gare</a></li>
<li><a href="clt_loisir_gares.html"target="_parent">En Gare</a></li>
<li><a href="clt_loisir_train.html"target="_parent">Dans le train</a></li>
</ul>
<dt onclick="javascript:montre('smenu3');">Politiques/Pays</dt>
<dd id="smenu3">
<ul>
<li><a href="Fz_Politique_ALLEMAGNE_F.html"target="_parent">Allemagne/Wesphalie</a></li>
<li><a href="Fz_Politique_COPENHAGUE_F.html"target="_parent">Copenhague - Danemark</a></li>
<li><a href="Fz_Politique_HOLLANDE_F.html"target="_parent">Hollande</a></li>
<li><a href="Fz_Politique_HONGRIE_F.html"target="_parent">Hongrie</a></li>
<li><a href="Fz_Politique_LUXEMBOURG_F.html"target="_parent">Luxembourg</a></li>
<li><a href="Fz_Politique_REPUBLIQUETCHEQUE_F.html"target="_parent">République Tchèque</a></li>
<li><a href="Fz_Politique_SUISSE_F.html"target="_parent">Suisse</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');">Recherche</dt>
<dd id="smenu4">
<ul>
<li><a href="F_itineraire_F.html"target="_parent">Recherche d'itinéraire</a></li>
<li class="style"><a href="F_billet_combine_F.html"target="_parent">Billets combinés</a></li>
<li><a href="F_PDE_F.html"target="_parent">Plans de Déplacement Entreprise</a></li>
<li><a href="F_velo_libre_service_F.html"target="_parent">Vélos en Libre Service</a></li>
<li class="style"><a href="F_PDE_Danemark_F.html"target="_parent">Location longue durée</a></li>
<li><a href="F_OV-Fiets_Hollande_F.html"target="_parent">Location courte durée</a></li>
<li class="style"><a href="F_Stationnement_F.html"target="_parent">Stationnement</a></li>
<li><a href="F_Services_gare_F.html"target="_parent">Services en gare</a></li>
<li><a href="F_EspacesModulables_Danemark_F.html"target="_parent">Espace dans les trains</a></li>
<li class="style"><a href="F_train_special_F.html"target="_parent">Train spécial, Grande Ligne</a></li>
<li><a href="F_Cyklobus-RepubliqueTcheque_F.html"target="_parent">Espace dans les cars</a></li>
<li class="style"><a href="F_Partenariat_Train_Hotel_Loueur_F.html"target="_parent">Partenariat Train + Hôtel / Loueur</a></li>
<li><a href="F_Communication_papier_internet_F.html"target="_parent">Communication papier/internet</a></li>
<li class="style"><a href="recherche_pays.html"target="_parent">Pays</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu5');"><a href="contact.html"target="_parent">Contact</a></dt>
</dl>
</code>
code><style>
/*Partie CSS pour le menu deroulant*/
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
width:132px;
}
#menu {
position: absolute; /* placement du menu, à modifier selon les besoins */
top: 0;
left: 0;
}
#menu {
width: 12em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;
height: 18px;
width:132px;
line-height: 20px;
text-align: left;
font-weight: bold;
border: 1px solid gray;
background: #F49F0E;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
font-size:xx-small;
}
#menu li a, #menu dt a {
color: black ;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background:#97BE0D;
font-color:#97BE0D;
}
.style1{text-align:left;
color:#97BE0D;
text-decoration:underline #F49F0E;
border:0.5px solid #F49F0E;
}
.style{
text-align:left;
color:#97BE0D;
text-decoration:underline #F49F0E;
}
</style>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<dl id="menu">
<dt onclick="javascript:montre('smenu1');"><a href="index.html"target="_parent"target="_parent">Accueil</a></dt>
<dt onclick="javascript:montre('smenu2');">Produits</dt>
<dd id="smenu2">
<ul>
<li class="style1"><b>PENDULAIRES</b></li>
<li><a href="clt_pendulaires_acces.html"target="_parent">Acces Gare</a></li>
<li><a href="clt_pendulaires_gares.html"target="_parent">En Gare</a></li>
<li><a href="F_EspacesModulables_Danemark_F.html" target="_parent" >Dans le train</a></li>
<li class="style1"><b>LOISIRS/TOURISME</b></li>
<li><a href="clt_loisir_acces.html"target="_parent">Acces Gare</a></li>
<li><a href="clt_loisir_gares.html"target="_parent">En Gare</a></li>
<li><a href="clt_loisir_train.html"target="_parent">Dans le train</a></li>
</ul>
<dt onclick="javascript:montre('smenu3');">Politiques/Pays</dt>
<dd id="smenu3">
<ul>
<li><a href="Fz_Politique_ALLEMAGNE_F.html"target="_parent">Allemagne/Wesphalie</a></li>
<li><a href="Fz_Politique_COPENHAGUE_F.html"target="_parent">Copenhague - Danemark</a></li>
<li><a href="Fz_Politique_HOLLANDE_F.html"target="_parent">Hollande</a></li>
<li><a href="Fz_Politique_HONGRIE_F.html"target="_parent">Hongrie</a></li>
<li><a href="Fz_Politique_LUXEMBOURG_F.html"target="_parent">Luxembourg</a></li>
<li><a href="Fz_Politique_REPUBLIQUETCHEQUE_F.html"target="_parent">République Tchèque</a></li>
<li><a href="Fz_Politique_SUISSE_F.html"target="_parent">Suisse</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');">Recherche</dt>
<dd id="smenu4">
<ul>
<li><a href="F_itineraire_F.html"target="_parent">Recherche d'itinéraire</a></li>
<li class="style"><a href="F_billet_combine_F.html"target="_parent">Billets combinés</a></li>
<li><a href="F_PDE_F.html"target="_parent">Plans de Déplacement Entreprise</a></li>
<li><a href="F_velo_libre_service_F.html"target="_parent">Vélos en Libre Service</a></li>
<li class="style"><a href="F_PDE_Danemark_F.html"target="_parent">Location longue durée</a></li>
<li><a href="F_OV-Fiets_Hollande_F.html"target="_parent">Location courte durée</a></li>
<li class="style"><a href="F_Stationnement_F.html"target="_parent">Stationnement</a></li>
<li><a href="F_Services_gare_F.html"target="_parent">Services en gare</a></li>
<li><a href="F_EspacesModulables_Danemark_F.html"target="_parent">Espace dans les trains</a></li>
<li class="style"><a href="F_train_special_F.html"target="_parent">Train spécial, Grande Ligne</a></li>
<li><a href="F_Cyklobus-RepubliqueTcheque_F.html"target="_parent">Espace dans les cars</a></li>
<li class="style"><a href="F_Partenariat_Train_Hotel_Loueur_F.html"target="_parent">Partenariat Train + Hôtel / Loueur</a></li>
<li><a href="F_Communication_papier_internet_F.html"target="_parent">Communication papier/internet</a></li>
<li class="style"><a href="recherche_pays.html"target="_parent">Pays</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu5');"><a href="contact.html"target="_parent">Contact</a></dt>
</dl>
</code>
A voir également:
- Propriete du Menu en javascript
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Excel menu déroulant en cascade - Guide
- Telecharger javascript - Télécharger - Langages
- Windows 11 menu contextuel classique - Guide