Probléme de fonction

Fermé

tiran58 Messages postés 58 Date d'inscription jeudi 5 juin 2014 Statut Membre Dernière intervention 21 avril 2016 - Modifié par tiran58 le 21/01/2015 à 10:32
tiran58 Messages postés 58 Date d'inscription jeudi 5 juin 2014 Statut Membre Dernière intervention 21 avril 2016 - 27 janv. 2015 à 08:42

Bonjour ;

j'ai un problème de fonction je veux avec un menu dynamique afficher un sous menu a l'ouverture d'une page avec

<li><a onclick="javascript:montre('smenu1');">menu1</a></li>

qui afiche

smenu1

<nav id="smenu1">
     <dd>
      <dt></br>
       <a onload="javascript:montre('smenu1');" href="1.php"class="bouton">sous_menu1</a></br></br>
       <a onload="javascript:montre('smenu1');" href="2.php"class="bouton">sous_menu2</a></br></br>

      </dt> 
     </dd>
    </nav>

le problème et que le menu n'affiche plus que l'id

smenu1

et non

smenu2

quand je suit dans la page

1.php

2.php

.

si je clique sur

<li><a onclick="javascript:montre('smenu2');">menu2</a></li>

l'id

smenu1

s'affiche comment faire pour afficher

smenu2

?
si quelqu'un a la solution sa serai cool ^^

smenu2

     <dd>
      <dt></br>
       <a onload="javascript:montre('smenu2');" href="1.php"class="bouton">sous_menu3</a></br></br>
       <a onload="javascript:montre('smenu2');" href="2.php"class="bouton">sous_menu4</a></br></br>

voici le javascripte:

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript">
      </script>
      <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>

et le

css

ul{ /*menu*/
    display: table;
    width: 100%;
    margin: 12px auto;
 margin-top: -25px;
    padding: 0;
 background: linear-gradient(deepskyblue, dodgerblue);
    background: -webkit-linear-gradient(deepskyblue, dodgerblue);
    background:    -moz-linear-gradient(deepskyblue, dodgerblue);
    background:     -ms-linear-gradient(deepskyblue, dodgerblue);
    background:      -o-linear-gradient(deepskyblue, dodgerblue);
    background:         linear-gradient(deepskyblue, dodgerblue);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
 cursor: pointer;
}
ul li{
    display: table-cell;
 cursor: pointer;
}
ul li a{
    display: block;
    text-align: center;
    color: rgba(0, 0, 0, .7); 
    text-decoration: none;
    padding: 8px 8px 17px 8px;
 text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
 box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 100%, 32%) inset, 
                0 -2px 0 hsl(210, 100%, 38%) inset, 
                0 -3px 0 hsl(210, 100%, 44%) inset, 
                0 -4px 0 hsl(210, 100%, 50%) inset, 
                0 -5px 0 hsl(210, 100%, 60%) inset;
 transition: padding .3s .1s;
 position: relative;
 cursor: pointer;
 }
ul li:first-child a{
    border-radius: 3px 0 0 20px;
 cursor: pointer;
}
ul li:last-child a{
    border-radius: 0 3px 20px 0;
 cursor: pointer;
}
ul li a:hover, 
ul li a:focus{
    background: rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 100%, 42%) inset, 
                0 -2px 0 hsl(210, 100%, 48%) inset, 
                0 -3px 0 hsl(210, 100%, 54%) inset, 
                0 -4px 0 hsl(210, 100%, 60%) inset, 
                0 -5px 0 hsl(210, 100%, 70%) inset; 
 padding: 8px 25px 17px 25px;
 transition: all .3s 0s;
 cursor: pointer;
 } 
ul li a:active{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
 cursor: pointer;
}
ul li a::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 9px;
    margin-left: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
 cursor: pointer;
 }
ul li a:hover::before,
ul li a:focus::before{
    background: white;
    box-shadow: 0 0 2px white, 
                0 -1px 0 rgba(0, 0, 0, .4);
 cursor: pointer;
}
ul li a img{
 position: absolute;
 left: 50%;
    bottom: 13px;
    margin-left: -15px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
 cursor: pointer;
 
}
nav {   
 display:inline-bloc;
    width: 250px;
 text-align:center;
 height: 510px  ;
    margin: 100px ;
 vertical-align: top;
 position: absolute;
 top: 290px;
 text-decoration: none;
    right: 1000px;
    bottom: 150px auto ;
 border: 3px solid black;
 background: linear-gradient(deepskyblue, dodgerblue);
 background: -webkit-linear-gradient(deepskyblue, dodgerblue);
    background:    -moz-linear-gradient(deepskyblue, dodgerblue);
    background:     -ms-linear-gradient(deepskyblue, dodgerblue);
    background:      -o-linear-gradient(deepskyblue, dodgerblue);
    background:         linear-gradient(deepskyblue, bodgerblue);
 border-radius: 25px ;
 list-style-type: none;
 cursor: pointer;
 

 }
#dt a{
    display: block;
    width: 250px;
    border: 1px solid black;
 text-align:center;
 height: -20px;
    margin: 100px auto;
 vertical-align: top;
 position: fixed;
    right: 1000px;
    bottom: 300px;
 padding:50px; 
 width:400px;
 margin:100px auto; 
 border:6px solid #67ab9f; 
 background-color:#b3d8d2; 
 -moz-border-radius:20px; 
 -khtml-border-radius:20px; 
 -webkit-border-radius:20px;
 border-radius:20px;
 list-style-type: none;
 cursor: pointer;
}
nav dd dt a{
 position:absolute;
 text-align:center;
 text-decoration:none;
 top:650;
 list-style-type: none;
 margin-left:-40px ;
 cursor: pointer;
 display:block;
 }
dt{
 list-style-type: none;
 text-align:center;
 font: 1.1em sans-serif;
 display: block;
    text-align: center;
    color: rgba(0, 0, 0, .7); 
    text-decoration: none;
 margin-left: -100px auto;
 margin-top: 0px auto;
 left:100px ;
 cursor: pointer;
 display:block;
}
dd dt a{
    display: block;
    text-align: center;
    color: rgba(0, 0, 0, .7); 
    text-decoration: none;
    padding: 8px 8px 17px 8px;
 text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
 cursor: pointer;
 }
ul li a{
    display: block;
    text-align: center;
    color: rgba(0, 0, 0, .7); 
    text-decoration: none;
    padding: 8px 8px 17px 8px;
 text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
 cursor: pointer;
 }
.bouton {
    width:auto;
    padding:7px 0;
    text-align:center;
    display: inline-block;
    float:center;
    margin:0 0px 0 0;
    border-radius:5px;
    font-size: 1.em;
    width:90%;
 text-decoration:none;
    color:#000;
    font: 1em sans-serif;
 background: #F8F8F8;
 background: -webkit-linear-gradient( #F8F8F8, #D7D7D7); 
 background: -moz-linear-gradient( #F8F8F8, #D7D7D7); 
 background: -ms-linear-gradient( #F8F8F8, #D7D7D7); 
 background: -o-linear-gradient( #F8F8F8, #D7D7D7); 
 background: linear-gradient( #F8F8F8, #D7D7D7);
 color:#4D5B54; 
 text-shadow: 0px 1px 0px rgba( 255, 255, 255, 1);

 }
.bouton:hover {
 background: #F5F5F5;
 background: -webkit-linear-gradient( #FFF, #CCC);
 background: -moz-linear-gradient( #FFF, #CCC);
 background: -ms-linear-gradient( #FFF, #CCC);
 background: -o-linear-gradient( #FFF, #CCC);
 background: linear-gradient( #FFF, #CCC);
}
.bouton:active{
 box-shadow: 1px 1px 10px #CCC inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
 color:#AAA;
}
nav
{
    float: left;
    width: 155px;
    border: 1px solid black;
 margin-left:10px;
 }

section
{

    margin-left: 320px;
    border: 0px solid black;}
section a img{
 position: relative;
 left: 50%;
 margin-top:15px;
    bottom: 15px;
    margin-left: 10px ;
    width: 30px;
    height: 30px;
 cursor: pointer;
}

l'architecture se présente comme ceci :

 

             *************
             *       head*
             *************
             *       menu*
             *************
             * s *       *
             * m*        *
             * e *body   *
             * n *       *
             * u *       *
             *************
             *    footer *
             *************

merci d'avance

tiran58

A voir également:

Probléme de fonction
Fonction si et - Guide
Fonction somme excel - Guide
Fonction moyenne excel - Guide
Fonction trier excel - Guide
Fonction ms dos non valide - Forum Windows 8 / 8.1

2 réponses

Réponse 1 / 2

Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
Modifié par Kopros le 21/01/2015 à 14:57

Ben si tu mets

<a onload="javascript:montre('smenu1');" href="1.php"class="bouton">sous_menu1</a></br></br>

<a onload="javascript:montre('smenu1');" href="2.php"class="bouton">sous_menu2</a>

C'est normal qu'il te montre le smenu1 ! La fonction est appelée 2 fois au chargement de la page, avec le même paramètre.

Sur la page 1 je mettrais ça :

<a onload="javascript:montre('smenu1');" href="1.php"class="bouton">sous_menu1</a></br></br>
<a onclick="javascript:montre('smenu2');"  href="2.php"class="bouton">sous_menu2</a>

Et sur la page 2 ça :

<a onclick="javascript:montre('smenu1');" href="1.php"class="bouton">sous_menu1</a></br></br>
<a onload="javascript:montre('smenu2');" href="2.php"class="bouton">sous_menu2</a>

Voilà. Autre chose, normalement le slash des balises orphelines comme br se met à la fin, comme ça : <br/>
Et aussi quand t'as un long bout de code à mettre, comme ton css, utilise un site externe pour le coller, comme par exemple pastebin ( https://pastebin.com/ )

Réponse 2 / 2

tiran58 Messages postés 58 Date d'inscription jeudi 5 juin 2014 Statut Membre Dernière intervention 21 avril 2016 13
Modifié par tiran58 le 21/01/2015 à 16:22

Merci mes le problème et que je veux absolument afficher le Smenu1 dans tous les cas voici mon menu entier :

https://pastebin.com/NEBYCU1J

Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
Modifié par Kopros le 22/01/2015 à 10:34

Ok, j'ai l'impression que y'a un problème avec ta logique sur le js (et surtout avec le onload).

Je te propose d'utiliser jQuery, c'est plus simple. Télécharge la dernière version ici : https://jquery.com/download/

et ensuite t'importes le .js (c'est la bibliothèque) avant de mettre le reste du javascript.
Tu commences par virer les onclick et onload.
Enlève aussi ton js.

Tu mets une class sur les liens du menu (par exemple, menu_link) et ajoute leur un attribut data (par exemple, data-id="1" pour le 1er lien).
Mets aussi une autre class sur les nav qui ont juste un id comme smenu1 (par exemple, content_section)

Et tu mets un code qui ressemble à ça (pas testé) dans une balise js ou un fichier externe :

$(document).ready(function(){
    // Tout ce qui est là sera exécuté une fois que la page aura finie de charger
    // On commence par tout masquer
    $('.content_section').css('display','none');
    // Là on met la ligne pour ouvrir le smenu1 comme tu l'as demandé
    $('#smenu1').css('display','block');
    
    // Ensuite on mets en place l'événement click
    $('.menu_link').click(function(){
        // On re-cache tout pour fermer les blocks précédemment ouverts
        $('.content_section').css('display','none');
        // Puis on ouvre celui qui est demandé
        $('#smenu'+$(this).data('id')).css('display','block');
    });
});

Et voilà ça devrait marcher ! Sur tes boutons qui sont ailleurs que dans le 1er nav, il te suffit de mettre la class menu_link, et l'attribut data-id="1" (où 1 c'est le numéro de l'id du nav que tu veux ouvrir) et c'est tout.

tiran58 Messages postés 58 Date d'inscription jeudi 5 juin 2014 Statut Membre Dernière intervention 21 avril 2016 13
Modifié par tiran58 le 22/01/2015 à 11:15

en gros pour l'histoire de Class et id data sa doit donner sa ?

<ul >
    <li><a href="index.php" class="menu_link"1" data-id=1"><img src=image/home.png">!!!!</a></li>

<nav id="smenu1">
     <dd>
      <dt><br />
       <a ="javascript:montre('smenu1');" href="assurances.php"class="bouton">Assurances</a><br /><br />
       <a ="javascript:montre('smenu1');" href="juridique.php"class="bouton">Juridique</a><br /><br />

      </dt> 
     </dd>
    </nav>

je ne croie pas avoir tous compris :s

Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
Modifié par Kopros le 22/01/2015 à 12:10

Bah c'est déjà pas mal mais je vais te montrer la syntaxe qu'il faut ! :)

Pour les onclick et onload, je voulais dire qu'il faut enlever l'attribut et aussi la valeur ! sinon la syntaxe de l'html n'est pas correcte.
L'attribut html c'est toujours comme ça : nom-de-lattribut="valeur"

Pour reprendre ton exemple, ça donnerait ça :

<ul >
    <li><a href="index.php" class="menu_link" data-id="1"><img src=image/home.png">!!!!</a></li>

<nav id="smenu1">
     <dd>
      <dt><br />
       <a href="assurances.php" class="bouton menu_link" data-id="2">Assurances</a><br /><br />
       <a href="juridique.php" class="bouton menu_link" data-id="3">Juridique</a><br /><br />

      </dt> 
     </dd>
    </nav>

Voilà, l'attribut data-* est un peu spécial, il a débarqué avec la version 5 d'html. + d'infos là dessus ici : https://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html

Pour les data-id j'ai mis des valeurs au pif, tu corrigeras. Il faut mettre le numéro qui est dans l'id du truc que tu veux ouvrir avec ces liens (j'sais pas si c'est clair^^).
Et avec ça et la fonction que je t'ai mise dans mon message d'avant, ça va gérer le menu.

En tout j'espère avoir bien saisi ce que tu voulais faire ! Sinon ça va réagir pas comme tu veux et faudrait que tu me reformules ce qui n'irait pas.

PS : j'ai oublié un détail dans ma fonction en js, je vais la modifier
Edit : je ne peux plus la modifier. Il suffit d'ajouter return false; à la fin, comme ça :

...
$('#smenu'+$(this).data('id')).css('display','block');
return false;
...

tiran58 Messages postés 58 Date d'inscription jeudi 5 juin 2014 Statut Membre Dernière intervention 21 avril 2016 13
Modifié par tiran58 le 22/01/2015 à 13:54

merci !

le jquery-1.11.2.min.js je le mais a la racine de mon site ?
le scripte je le mais dans menu.php ? et sous quelle balise ?
le 1er menu et un lien vair l'index il n'affiche donc pas de sous menu la class et le data-id doive être pressent ?

comment se forme set balise ?

<li><a javascipte=montre('smenu1');">Service Juridique</a></li>

<a  class="menu_link" data-id="1">Service Juridique</a></li>

?

edite : Parse error: syntax error, unexpected '(', expecting variable (T_VARIABLE) or '$' in C:\xampp\htdocs\intranet\menu.php on line 2

Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
Modifié par Kopros le 22/01/2015 à 13:58

Alors tu places ton fichier js où tu veux, du moment que le lien qui en fait appel à l'intérieur des pages soit correct. En général on place ce fichier dans un dossier à part, qu'on appelle par exemple "js".

Ensuite tu y fais appel dans ta page en plaçant ça avant la balise </body> :

<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>

(j'ai fait un copier coller, c'est pas la même version du jquery)

Si tu nommes le dossier "krakapouet" et non "js", la valeur de src serait donc krakapouet/jquery-2.0.3.min.js

Ce code est valable si ta page et le dossier en question font partie du même dossier.
Si tu veux en savoir + sur les chemins des fichiers : https://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html

Pour le script, soit tu crées un fichier pour le mettre dedans (par exemple, tonfichier.js) et tu y fais appel de la même manière que l'autre, soit tu le mets directement sur toutes les pages où le menu est présent, comme ça :

<script type="text/javascript">
// le script ici
</script>

Je te conseilles de faire un fichier externe, comme ça si t'as une modif à faire tu la feras que dans ce fichier, sinon faudrait reprendre toutes les pages avec le script dedans.

Dans tous les cas, tu devras toujours placer l'appel du jquery avant les autres dans l'html.

Bon courage !

Discussions similaires

discord a cessé de fonctionner de manière inattendue

comment contourner la fonction FILTRE

Durée de Fonctionnement cpu

Message "cette fonction n'est pas disponible actuellement"

Comment savoir comment on nous a ajouté sur Snap

Discussions similaires

Newsletters