Je crée une barre de navigation qui bascule lorsque je clique sur un bouton. C'est fait mais mon bouton est fixé au même endroit et j'aimerais le faire suivre le mouvement de ma barre de navigation coulissante. Comment puis-je le faire?

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle("slow");
  });
});
.main_menu {
  position: fixed;
  top: 0;
  background-color: #358ef3;
  height: 9rem;
  width: 100%;
}

.wideScreen {
  margin-top: -0.625rem;
  width: 4rem;
  height: 1rem;
  position: fixed;
  top: 9rem;
  left: 0;
}

.wideScreen>button {
  width: 100%;
  height: 100%;
}

.wideScreen>button>img {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_menu" id="panel">
  <form class="" action="index.html" method="post">
    <div class="slidecontainer">
      <h2>Bac+: <span id="output"></span></h2>
      <label for="myRange"></label><input type="range" min="1" max="8" value="0" class="slider" id="myRange">
    </div>
  </form>
</div>
<div class="wideScreen">
  <button id="flip">
    </button>
</div>
0
lolo zemadnessgamer 8 nov. 2019 à 18:41

2 réponses

Meilleure réponse

Une raison pour laquelle le bouton ne peut pas être à l'intérieur de l'élément dont il fait partie (l'en-tête)?

$(document).ready(function() {
    $("#flip").click(function() {
        $("#panel-inner").slideToggle("slow");
    });
});
body {
    padding: 0;
    margin: 0;
}

#panel {
    position: fixed;
    top: 0;
    width: 100%;
}

.main_menu {
    background-color: #358ef3;
    height: 9rem;
    overflow: hidden;
}

.wideScreen {
    width: 4rem;
    height: 1rem;
}

.wideScreen>button {
    width: 100%;
    height: 100%;
}

.wideScreen>button>img {
    width: 100%;
    height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="panel">
    <div id="panel-inner" class="main_menu">
        <form class="" action="index.html" method="post">
            <div class="slidecontainer">
                <h2>Bac+: <span id="output"></span></h2>
                <label for="myRange"></label>
                <input type="range" min="1" max="8" value="0" class="slider" id="myRange">
            </div>
        </form>
    </div>

    <div class="wideScreen">
        <button id="flip">
        </button>
    </div>
</div>
2
isherwood 8 nov. 2019 à 15:57

Remplacez les règles CSS suivantes

.wideScreen {
  margin-top: -0.625rem;
  width: 4rem;
  height: 1rem;
  position: fixed;
  top: 9rem;
  left: 0;
}

Avec

.wideScreen {
  margin-top: -0.625rem;
  width: 4rem;
  height: 1rem;
 top: 9rem;
  left: 0;
}

Le problème est dû au positionnement fixe.

0
isherwood 8 nov. 2019 à 18:20