Toggle navbar

Le toggle n'affiche pas la navbar en fenêtré.

Sujet résolu

1 mars 2024 à 18:32:15

Bonjour, j'aurais besoin d'aide pour mon bouton toggle car je ne comprend pas pourquoi il n'affiche pas la navbar déroulante en mode fenêtré.

La partie html

<DOCTYPE HTML>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="MyMiaou.css">
        </head>

        <body>
  
            <nav class="navbar">
                <div class="logo">
                  <img src="img/Logo .png" />
                </div>
                <div class="icon">
                    <span class="toggle">☰</span>
                </div>
                <ul class="list-item">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Facebook</a></li>
                  <li><a href="#">Twitter</a></li>
                  <li><a href="#">Categorys</a></li>
                  <li><a href="#">Contact us</a></li>
                  <li><a href="#">About us</a></li>
                </ul>
              </nav>
           
          
            
        </body>
    </html>

La partie CSS

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    font-family: arial, tahoma;
    list-style: none;

}
.navbar {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 80px;
    background-color: #222;
    border-bottom: 1px solid #555
  }
  .logo {
    padding: 10px;
    width: auto;
    float: left;
  }
  .logo img {
    height: 55px;
  }
  .list-item {
    float: right;
    margin-right: 25px;
    margin-top: 17px;
  }
  .list-item li {
    float: left;
    padding: 13px 13px;
    font-size: 18px;
    border-radius: 3px;
    transition: all .7s ease-in-out;
  }
  .list-item li a {
    color: #EEE;
  }
  .list-item li:hover {
    background-color: brown;
  }

  .icon {
    display: none;
  }
  .toggle {
    float: right;
    margin: 20px;
    color: #EEE;
    font-size: 30px;
    border: 1px solid #EEE;
    padding: 0px 5px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  @media (max-width: 1309px) {
    .icon {
      display: block;
      width: 100%;
      height: 80px;
      background-color: #111;
      border-bottom: 1px solid #444;
    }
    .list-item {
      width: 100%;
      margin: 0;
      padding: 0;
      position: relative;
      top: -4px;
      background-color: #222;
      display: none;
    }
    .list-item li {
      text-align: center;
      display: block;
      border-bottom: 1px solid #333;
      float: none;
    }
  }
  .footer{ 
    position: absolute;
    z-index: 100;     
    text-align: center;    
    bottom: 0px; 
    width: 100%;
    background: rgba(228, 141, 11, 0.952);
    color: white
}

La partie Jscript

$('.toggle').click(function () {
    "use strict";
    $('nav ul').slideToggle();
});



$(window).resize(function () {
    "use strict";
    if ($(window).width() > 780) {
        $('nav ul').removeAttr('style');
    }
});

-
Edité par TimRig 1 mars 2024 à 19:52:16

AbcAbc6

1 mars 2024 à 19:23:32

Bonjour, Merci d'indiquer un titre de sujet en rapport avec votre problématique.

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : Problème Toggle navbar)

Liens conseillés

Bonsoir, ou est-ce que dans votre HTML vous faite appelle à la librairie jQuery? Pour quelles raisons utiliser du jQuery en 2024?? Pourquoi ne pas utiliser du vanilla js??

TimRig

1 mars 2024 à 20:20:19

AbcAbc6 a écrit:

Bonjour, Merci d'indiquer un titre de sujet en rapport avec votre problématique.

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Merci de modifier votre titre. Pour cela, éditez le premier message de votre sujet.

(titre originel : Problème Toggle navbar)

Liens conseillés

Charte de bonne conduite

Règles générales du forum

Bonsoir, ou est-ce que dans votre HTML vous faite appelle à la librairie jQuery? Pour quelles raisons utiliser du jQuery en 2024?? Pourquoi ne pas utiliser du vanilla js??

Bonsoir, Vous avez raison j'ai oublié le lien jquery et je n'utilise pas vanilla js car je débute en code et je ne connais pas cela.

Auriez vous par hasard un lien vannila js pour faire marcher le toogle ?

AbcAbc6

1 mars 2024 à 20:52:17

Bonsoir,

>> Auriez vous par hasard un lien vannila js pour faire marcher le toogle ?

Domi65

2 mars 2024 à 15:55:30

« je n'utilise pas vanilla js car je débute en code et je ne connais pas cela. »

En fait, si. Ce qu'AbcAbc6 appelle malicieusement (je suppose qu'il voulait que tu fasses des recherches sur ce "concept" nommé Vanilla), c'est tout simplement le JS en soi, tel qu'il est spécifié dans l'ECMAScript. ;-)

De nos jours, vu ses possibilités natives, il devient préférable d'apprendre JS plutôt que ses surcouches, devenues la plupart du temps inutiles, voire nuisibles.

Cordialement.

Toggle navbar

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

Toggle navbar

Le toggle n'affiche pas la navbar en fenêtré.

Mauvais titre

Liens conseillés

Mauvais titre

Liens conseillés

Toggle navbar

Supprimer

Modérer

Signaler le message aux modérateurs