IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

[Bootstrap 4]navbar : n'effacer que le sous-sous-menu


Sujet :

Bibliothèques & Frameworks

  1. #1
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 378
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 378
    Points : 5 731
    Points
    5 731
    Billets dans le blog
    1
    Par défaut [Bootstrap 4]navbar : n'effacer que le sous-sous-menu
    Bonsoir,

    pas satisfait par ce que j'ai trouvé sur le web, j'ai entrepris de coder moi-même un menu bootstrap 4 à 2 niveaux. Je n'ai utilisé que la documentation (étonnant, venant de moi, n'est-ce pas Jérôme ? ).

    Donc 1), de cette doc, j'ai construit un squelette valable pour toute page bootstrap 4 et 2), j'ai construit un menu à 2 niveaux en me servant du chapitre sur navbar. Cela dit, y a un comportement qui ne me plait pas : quand on a déroulé les 2 niveaux du menu, puis qu'on clique sur l'item du sous-sous-menu, ce que je voudrais, c'est que ça n'efface que le contenu du sous-sous-menu, mais que ça laisse affiché le contenu du sous-menu. Hors bootstrap est fait de telle sorte que ça efface le contenu des 2 niveaux. Quel js rajouter pour obtenir le comportement que je souhaite ?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
     
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--obligatoire pour tout projet bootstrap-->
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../../../favicon.ico">
     
        <title>Bootstrap menu multi-niveaux squelette</title>
     
        <!-- Bootstrap core CSS (acces au cdn, donc css non chargé mais en ligne) -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
     
        <!-- Font Awesome (acces au cdn, donc icônes non chargées mais en ligne) -->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!------ Include the above in your HEAD tag ---------->
     
       </head>
     
      <body>
     
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Action</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <a class="dropdown-item" href="#">Something else here</a>
                  <a class="dropdown-item dropdown" href="#"></a>
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Submenu
                  </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                    </div>
     
                </div>
              </li>
            </ul>
          </div>
        </nav> 
     
        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
     <!-- <script type="text/javascript" src="monscript.js"></script>-->
      </body>
    </html>

    https://codepen.io/laurentsc/pen/LvaOxy
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour Laurent,

    Citation Envoyé par laurentSc Voir le message
    ...j'ai entrepris de coder moi-même un menu bootstrap 4 à 2 niveaux...

    Citation Envoyé par laurentSc Voir le message
    Je n'ai utilisé que la documentation (étonnant, venant de moi, n'est-ce pas Jérôme ? ).
    Tu m'en bouches un coin !!


    Cela dit... il me semble t'avoir déjà fourni le code d'un menu multi-niveaux * :

    Et qui fonctionne bien , en plus !

    Compare-le avec ton propre code.
    Tu remarqueras que les "dropdown-menu" sont dans des <ul><li>.


    * Que j'ai trouvé sur le web ! (et modifié ensuite).

  3. #3
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 378
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 378
    Points : 5 731
    Points
    5 731
    Billets dans le blog
    1
    Par défaut
    Merci,

    j'avais vu ta réponse en début d'après-midi sur mon téléphone, mais parti en vélo (sur du plat ; pas besoin des freins !), mais quand, je suis rentré, coupure d'électricité, donc la télécommande de la porte du garage ne marchait plus et...à la porte. J'ai pu rentrer seulement vers 18h... Ton menu fonctionne comme je le souhaite.
    Par contre, si je l'intègre dans mon code, il ne marche plus. Je dois avoir d'autres js qui le font foirer...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  4. #4
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 378
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 378
    Points : 5 731
    Points
    5 731
    Billets dans le blog
    1
    Par défaut
    Comme ton menu n'est pas compatible avec mon code, et comme il est très difficile de trouver ce qui coince, j'ai tenté de modifier mon menu en mettant les dropdowm-menu dans des <ul><li> : https://codepen.io/laurentsc/pen/LvaOxy. Le problème reste
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour Laurent,

    1- comme d'habitude, tu fais tout à l'envers...

    Au lieu de partir d'un code QUI FONCTIONNE (et SPÉCIFIQUE Bootstrap 4), tu te remets à bricoler un "truc" qui ne marche pas, en espérant que quelques tours de passe-passe suffiront...

    2- COMMENCE par avoir une page CORRECTEMENT CONFIGURÉE !!
    Si je reprends le code que tu as donné :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html lang="en">
      <head>
    ...
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!------ Include the above in your HEAD tag ---------->
     
       </head>
      <body>
    ...
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    ...
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
     <!-- <script type="text/javascript" src="monscript.js"></script>-->
      </body>
    </html>

    Tu as 2 FOIS :
    • 4.1.1/js/bootstrap.min.js
    • 4.0.0-beta/js/bootstrap.min.js !!

    • 3.2.1/jquery.min.js
    • jquery-3.2.1.slim.min.js : c'est pareil !! (sauf que le "slim" est allégé)


    3- Quant au script du menu, tu l'as mis où ??
    Tu te souviens de ce que je t'ai dit ?
    L'ORDRE dans lequel sont déclarés les scripts est IMPORTANT.
    Idem dans codepen : il faut déclarer le script Bootstrap APRES le script jQuery.
    Dernière modification par Invité ; 25/06/2019 à 21h37.

  6. #6
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 378
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 378
    Points : 5 731
    Points
    5 731
    Billets dans le blog
    1
    Par défaut
    Bonjour Jérôme,

    plutôt que faire marcher mon code, je suis revenu au tien.
    Pour éliminer les risques de non-compatibilité, j'ai réduit mon code au minimum.
    Je respecte bien l'ordre de déclaration des js : jQuery puis bootstrap puis le script du menu (je l'avais viré de mon essai car y en avait pas)

    Le premier sous-menu s'affiche bien quand on clique dessus, mais quand on clique sur le sous-sous-menu, au lieu d'en afficher le contenu, tout disparaît !
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  7. #7
    Invité
    Invité(e)
    Par défaut

    Montre ton code...

  8. #8
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 378
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 378
    Points : 5 731
    Points
    5 731
    Billets dans le blog
    1
    Par défaut
    Comme c'est au départ du code PHP, j'ai fait "voir le source" et ait créé un fichier (qui montre le problème) :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=9" />
       <title> EIS System Support Site</title>
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--obligatoire pour tout projet bootstrap-->
       <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> 
       <link href="http://localhost/eis4/css/style.css" rel="stylesheet"/>
       <link href="http://localhost/eis4/css/style-menu2.css" rel="stylesheet"/>
       <link href="http://localhost/eis4/css/style-menu_images.css" rel="stylesheet"/> 
     
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
     
        <!-- Bootstrap core CSS (acces au cdn, donc css non chargé mais en ligne) -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
     
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
     
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
     
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
     
        <script type="text/javascript" src="http://localhost/eis4/js/monscript.js"></script>
     
     
    </head>
    <body>
      <!-- début de ton code html-->
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#">Hidden brand</a>
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
           <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Submenu action</a></li>
                      <li><a class="dropdown-item" href="#">Another submenu action</a></li>
     
     
                      <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                          <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                        </ul>
                      </li>
                      <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                          <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                        </ul>
                      </li>
     
     
     
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
     
          <!-- fin de ton code html-->
     	page<br/>
     
    </body></html>

    monscript.js :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
      if (!$(this).next().hasClass('show')) {
        $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
      }
      var $subMenu = $(this).next(".dropdown-menu");
      $subMenu.toggleClass('show'); // appliqué au ul
      $(this).parent().toggleClass('show'); // appliqué au li parent
     
      $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu.show').removeClass("show"); // appliqué au ul
        $('.dropdown-submenu.show').removeClass("show"); // appliqué au li parent
      });
      return false;
    });
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  9. #9
    Invité
    Invité(e)
    Par défaut
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
     
        <!-- Bootstrap core CSS (acces au cdn, donc css non chargé mais en ligne) -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    ...
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

    Laurent...


    Et on t'a DEJA DIT qu'il faut ajouter :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    $(function(){
     
    ...
     
    });
    Dernière modification par Invité ; 25/06/2019 à 21h37.

  10. #10
    Invité
    Invité(e)
    Par défaut
    Voilà le code qui fonctionne :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    <!DOCTYPE html>
    <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
       <title> EIS System Support Site</title>
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--obligatoire pour tout projet bootstrap-->
       <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> 
       <link href="http://localhost/eis4/css/style.css" rel="stylesheet"/>
       <link href="http://localhost/eis4/css/style-menu2.css" rel="stylesheet"/>
       <link href="http://localhost/eis4/css/style-menu_images.css" rel="stylesheet"/> 
     
        <!-- Bootstrap core CSS (acces au cdn, donc css non chargé mais en ligne) -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    	<!-- font-awesome 4 -->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     
    <style>
     .dropdown-submenu {
      position: relative;
    }
    .dropdown-submenu a::after {
      transform: rotate(-90deg);
      position: absolute;
      right: 6px;
      top: .8em;
    }
    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-left: .1rem;
      margin-right: .1rem;
    }
     
    /* --------------------- */
    /* SPECIAL : ROTATION des flèches */
    /* Niveau 1 */
    li .dropdown-toggle:after {
      transition: all 0.5s;
    }
    li.show > .dropdown-toggle:after {
      transform: rotate(180deg);
    }
    /* sous-Niveaux suivants */
    li li.show > .dropdown-toggle:after {
      transform: rotate(90deg);
    }
    </style>
    </head>
    <body>
      <!-- début de ton code html-->
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
    ............
        </nav>
     
          <!-- fin de ton code html-->
     	page<br/>
     
    	<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.js"></script>
     
        <script type="text/javascript" src="http://localhost/eis4/js/monscript.js"></script>
     
    </body>
    </html>

    monscript.js :
    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // sous-sous-menus
    $(function(){
     
    	$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
    	  if (!$(this).next().hasClass('show')) {
    		$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    	  }
    	  var $subMenu = $(this).next(".dropdown-menu");
    	  $subMenu.toggleClass('show'); // appliqué au ul
    	  $(this).parent().toggleClass('show'); // appliqué au li parent
     
    	  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    		$('.dropdown-submenu .show').removeClass("show"); // appliqué au ul
    		$('.dropdown-submenu.show').removeClass("show"); // appliqué au li parent
    	  });
    	  return false;
    	});
     
    });
    Dernière modification par Invité ; 01/05/2019 à 10h55.

  11. #11
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 378
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 378
    Points : 5 731
    Points
    5 731
    Billets dans le blog
    1
    Par défaut
    Grâce à ton aide, ça marche nickel avec Firefox, par contre, avec Internet Explorer, le menu n'apparaît pas du tout. Pourtant la doc dit
    Supported browsers#

    Bootstrap supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 10-11 / Microsoft Edge.
    J'ai IE11. Et si je m'attache à ce navigateur, c'est que c'est le navigateur officiel dans mon entreprise...et que le code que je met au point, c'est pour eux.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Bonjour,
    pas lu le post, juste en diagonal
    J'ai IE11. Et si je m'attache à ce navigateur, c'est que c'est le navigateur officiel dans mon entreprise
    Tu ne devrais donc tester qu'avec celui-ci, c'est le plus à la traine !

    Supprime cette ligne de ton code
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    ou remplace la par
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    sans oublier de mettre un <!DOCTYPE html>.

  13. #13
    Invité
    Invité(e)
    Par défaut
    "Internet Explorer" a été remplacé par "Edge".

    A quelle version de I.E. sont-ils dans ta boite ?
    Là est la question...

    Pour tester (à voir) :



    Citation Envoyé par NoSmoking Voir le message
    ...pas lu le post, juste en diagonal...
    Tant que ce n'est pas "de travers"...

    ...c'est le plus à la traine !...
    Et "à la haine" ! (des développeurs)

  14. #14
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 378
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 378
    Points : 5 731
    Points
    5 731
    Billets dans le blog
    1
    Par défaut
    J'ai rajouté le doctype que j'avais oublié puis ai changé ou supprimé la ligne mentionnée par NoSmoking, mais rien y fait…

    Dans ma boîte, on a IE11 et Windows10.

    Le site de test que tu me proposes, Jérôme, suppose d'être en ligne. Or, je développe en local, et à terme, c'est de l'intranet.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  15. #15
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 378
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 378
    Points : 5 731
    Points
    5 731
    Billets dans le blog
    1
    Par défaut
    Hier soir, j'ai écrit
    FR : Je pense que Schneider devrait changer de navigateur internet. Même Microsoft le préconise : https://www.20minutes.fr/arts-stars/...ernet-explorer.

    Etes-vous d'accord là-dessus ? Ca fait des années que j'entend du mal sur Internet Explorer (je sais de quoi je parle, vu que mon métier est webmaster). Si vous êtes d'accord, à qui faudrait-il faire remonter cela, pour que les choses bougent ?



    EN : I think that Schneider should change of internet browser. Even Microsoft say that (article in french): https://www.20minutes.fr/arts-stars/...ernet-explorer.

    Do you agree? I hear bad comments about Internet Explorer since a few years (I know what I say as my job is webmaster). If you agree, who do you follow?
    sur le Facebook local (Yammer, outil de Microsoft). Wait and see...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CR X]dans le même sens que les sous totaux
    Par abdoing dans le forum SAP Crystal Reports
    Réponses: 0
    Dernier message: 10/08/2007, 13h20
  2. Réponses: 3
    Dernier message: 15/05/2006, 09h49
  3. Réponses: 3
    Dernier message: 15/02/2006, 12h27
  4. afficher/effacer des <tr> sous Firefox
    Par Macintoc dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 29/06/2005, 10h10
  5. Recherche BDD telle que PGS sous Windows sans Cygwin ... :(
    Par Shepard dans le forum Décisions SGBD
    Réponses: 2
    Dernier message: 20/12/2004, 15h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo