{HTML + CSS + JS} Menu responsive ne marche pas par TadasJS - page 1

Bonjour à tous, j'ai un site web en responsive : quand je clique sur le menu (3 barres), le menu ne s'affiche pas alors que c'est censé s'afficher.

Le code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cremza Bot | Accueil</title>
    <link rel="stylesheet" type="text/css" media="screen" href="index.css" />
    <link rel="icon" type="image/x-icon" href="Images/cremzaico.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="Images/cremzaico.ico" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <script src="main.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src ="loadImg.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
    <script src="navprop.js"></script>
</head>
<body>
      <div class="se-pre-con"></div>
      
      <div class="conteneur">
            <header>
                  <nav>
                        <div class="icone-menu">
                              <i class="fa fa-bars fa-2x"></i>
                        </div>

                        <div class="menu">
                              <ul>
                                    <li><a href="index.html">Accueil</a></li>
                                        <li><a href="commandes.html">Commandes</a></li>
                                        <li><a href="https://paypal.me/TadasJS">Faire un don</a></li>
                                        <li><a href="https://discordapp.com/oauth2/authorize?client_id=484449701735825419&permissions=8&scope=bot">Inviter le bot</a></li>
                              </ul>
                        </div>

                  </nav>   
            </header>

                <div class="contenu">

                      
                                    <img class="cremzapdp" src="Images/CremzaPDP.png" alt="" lang="fr"/>
                                    <h1>Cremza, un bot Discord qui est avec vous !</h1>                              
                                  <hr/>
                                  <div id="createurs">
                                        <h2>Le créateur du bot</h2>
                                        <button class="fonda">
                                              <h3 class="pseudo">Zuki#6294</h3>
                                              <img class="pdp1" src="Images/pdpzuki.png" alt="PP du fonda"/>
                                        </button>
                                  </div>
                                  <hr/>
                                  <div id="présentation">
                                        <h2>Cremza, qu'est ce que c'est ?</h2>
                                        <p>Cremza est un bot Discord axé jeux et amusement codé avec le coeur et avec passion par Zuki#6294, un passionné d'informatique et de développement à ses heures perdues.<br/>Le bot est <strong>entièrement</strong> en <span class ="dr">fra</span>nç<span class="db">ais</span> , pour vous les amis français vous aurez la chance d'avoir un bot français à 100 pourcents sur vos serveurs !</p>
                                  </div>
                                  <hr/>
                                  <div id="discord">
                                        <h2>Le Discord du bot</h2>
                                     <iframe src="https://discordapp.com/widget?id=489138903325081613&theme=dark" width="500" height="500" allowtransparency="true" frameborder="0"></iframe>
                                     <form action="https://discord.gg/ayr8uv2" method="get">
                                        <input type="submit"  value="Le Discord du bot Cremza :" name="Submit" id="frm1_submit"/>
                                    </form>
                                  </div>
                                  <hr/>
                                  <div id = "mentionsh">
                                        <section>
                                              <div class="contb">
                                              <h2>Mentions honorables :</h2>
                                              <button>
                                                    <p>Asriel#9052<p>
                                              </button>
                                              <button>
                                                    <p>Lucky12345#4179</p>
                                              </button>
                                              </div>
                                              </section>
                                  </div>
                                  <hr/>
                                  <div class="faq">
                                        <h2>FAQ :</h2>
                                        <ul>
                                              <li class="q"><span class="s">Question</span> : Comment j'installe Cremza sur mon serveur Discord ?</li>
                                              <li class="r"><span class="s">Réponse</span> : Vous devez aller sur le lien suivant : <a href="https://discordapp.com/oauth2/authorize?client_id=484449701735825419&permissions=8&scope=bot">Cliquez ici</a>, une fois cliqué vous serez redirigé sur la page Discord du bot demandant l'autorisation, vous l'acceptez et vous devriez compléter le captcha. Une fois le captcha terminé, le bot est sur votre serveur !</li>
                                              <li class="q"><span class="s">Question</span> : Avec quel langage de programmation a été fait le bot ?</li>
                                              <li class="r"><span class="s">Réponse</span> : Avec JavaScript + Discord.JS .</li>
                                              <li class="q"><span class="s">Question</span> : Le bot possède t'il un serveur Discord ?</li>
                                              <li class="r"><span class="s">Réponse</span> : Oui, le lien est <a href="https://discord.gg/invite/ayr8uv2">ici .</a></li>
                                              <li class="q"><span class="s">Question</span> : Est-ce que un lien Github, Pastebin ou autre sera disponible pour voir le script du bot ?</li>
                                              <li class="r"><span class="s">Réponse</span> : Non, jamais pour éviter les vols et le plagiat du bot.</li>
                                         </ul>     
                                         <hr/>
                                    
                                         
                                  </div>
                            </div>
                        </div> 
                        
                      </body>
                      </html>

Le code CSS :

@font-face{
    src: url("Police/ASTONISHED.TTF");
    font-family: "Astonished";
}

@font-face{
    src: url("Police/HKGrotesk-Bold.otf");
    font-family: "HKGrotesk Bold";
}

@font-face{
    src: url("Police/JosefinSans-Regular.ttf");
    font-family: "Josefin";
}

@font-face{
    src: url("Police/HKGrotesk-Regular.otf");
    font-family: "HKGrotesk";
}

@font-face{
    src: url("Police/HKGrotesk-Light.otf");
    font-family: "HKGrotesk Light";
}

@font-face{
    src: url("Police/HKGrotesk-Medium.otf");
    font-family: "HKGrotesk Medium";
}

@font-face{
    src: url("Police/boston_traffic.ttf");
    font-family:"Boston Traffic";
}

@font-face{
    src: url("Police/bubblerone-regular.ttf");
    font-family: "Bubblerone";
}

@font-face{
    src: url("Police/handlee-regular.ttf");
    font-family: "Handlee";
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    
}

body {
    font-family: "Josefin",sans-serif;
    font-weight: lighter;
    background-color: black;
    color: whitesmoke;
    
}

header {
    width: 100%;
    height: 80vh;
    background: url("Images/fond.jpg") no-repeat 50% 50%;
    background-size: cover;
}

.contenu {
    width: 94%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    margin-top: -15em;
}

.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

.no-js #loader { 
    display: none;
  }
  
.js #loader { 
    display: block;
    position: absolute; 
    left: 100px; 
    top: 0; 
}

.se-pre-con {
	position: fixed;
	left: 0px;
    top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(Images/Spinner-1s-200px.gif) center no-repeat #000;
}

strong{
    color:#7289da;
}

.dr{
    color:blue;
}

.db{
    color: red;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: #444444;
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: center;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: gray;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

nav ul li a:hover{
    color: #444444;
    border-bottom: 0.1em solid white;
}

.icone-menu {
    line-height: 60px;
    width: 100%;
    background: #2c2929;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}

.contenu ul li a:hover{
    color: gray;
}

.q{
    color: #7289da;
}

.s{
    text-decoration: underline;
}


 h1{
     font-family: "Boston Traffic";
     text-decoration: underline;
     font-size: 3em;
     line-height: 1em;
 }

 h2{
     text-decoration: underline;
     font-size: 1.9em;
     font-family: "Bubblerone";
 }

 hr{
     color: white;
     width: 20cm;
 }

 

 .t3{
     font-size: 1.3em;
     text-decoration: underline;
     font-family: "Bubblerone";
 }

#createurs{
    margin-top: 3.2em;
    margin-bottom: 4.2em;
}

input {
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
    border: 1.1px solid #ffffff;
    background-color: #5c7df5;
    font-size: 1em;
}

input:hover{
    background-color:#99aab5;
}

.fonda{
    font-family: "HKGrotesk Bold";
    background-color: gold;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    border: 1px solid #000000;
}

.fonda:hover{
    background-color: #ffdf32;
    color: grey;
}

.contb button{
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    border-radius:20px;
    border: 1px solid #000000;
    background-color: silver;
}

.contb button:hover{
    background-color: #d2d2d2;
    color: gray;
}

.pdp1{
    height: 5em;
    width: 5em;
}

.cremzapdp{
    height: 7.5em;
    width: 6em;
}

.faq a{
    color: currentColor;
}

.faq a:hover{
    color: gray;
}

.faq ul li{
 list-style-type: square;   
}


@media(max-width: 810px) {

    .logo {
          position: fixed;
          top: 0;
          margin-top: 16px;
    }

    nav ul {
          max-height: 0px;
          background: #2c2929;
    }

    nav.black ul {
          background:gray;
    }

    .showing {
          max-height: 34em;
          margin-top: -2em;
    }

    nav ul li {
          box-sizing: border-box;
          width: 100%;
          padding: 24px;
          text-align: center;
    }

    .icone-menu {
          display: block;
    }

    .contenu {
        margin-top: -20em;
    }

    iframe{
        display: none;
    }

}

@media(max-width: 500px) {

h1{
    font-size: 2em;
}

.contenu{
    margin-top: -17em;
}

hr{
    width: 80%;
}

}

@media(max-width: 1000px) {

.h1{
    font-size: 2em;
}

}

Code navprop.js :

$(document).ready(function() {
$(".icone-menu").on("click", function() {
$("nav ul").toggleClass("showing");
});
});                 
$(window).on("scroll", function() {
if($(window).scrollTop()) {
 $('nav').addClass('black');
 }
                                
else {
 $('nav').removeClass('black');
 }
})

Code loadImg.js :

$(window).load(function() {
     $(".se-pre-con").fadeOut("slow");;
     });

Pour le main c'est une lib

{HTML + CSS + JS} Menu responsive ne marche pas

{HTML + CSS + JS} Menu responsive ne marche pas

Supprimer

Modérer

Signaler le message aux modérateurs