J'ai essayé de faire un menu sur le côté de JavaScript. Je voulais gérer ce problème avec JQuery Toggle, mais cela ne s'est pas produit. Est-ce parce que la position est relative?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul{
margin: 0px;
padding: 0px;
}
ul li{
display: block;
}
ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: white;
letter-spacing: 2px;
transition: all .25s ease-in-out;
border-bottom: 1px solid white;
}
hr{
float: left;
width: 100px;
}
div{
height: 400px;
width: 150px;
background-color: red;
display: inline-block;
position: relative;
right: 226px;
}
i{
margin-left: 200px;
display: inline-block;
font-size: 24px;
position: relative;
bottom: 201px;
background-color: white;
color: red;
right: 46px;
transition: all 1s ease ease-in-out;
}
ul li a:hover{
background-color: rgb(0,108,250);
}
i:hover{
color: rgb(0, 108, 250);
}
</style>
<script>
$(document).ready(function(){
$("i").click(function(){
$("#div1").toggle(500)
})
})
</script>
</head>
<body>
<i class="fas fa-bars"></i>
<div id="div1">
<ul>
<li><a href="#" id="ana">Ana Sayfa</a></li>
<li><a href="#" id="hak">Hakkimizda</a></li>
<li><a href="#" id="ile">Iletisim</a></li>
<li><a href="#" id="rek">Reklam</a></li>
<li><a href="#" id="more">Daha Fazla</a></li>
</ul>
</div>
</body>
</html>
3 Réponses :
J'ai changé un peu dans votre CSS, mais principalement j'ai déplacé le Démo strong> p> p> i code> après le div code>. Vérifiez-le et voyez si c'est ce dont vous avez besoin.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="div1">
<ul>
<li><a href="#" id="ana">Ana Sayfa</a></li>
<li><a href="#" id="hak">Hakkimizda</a></li>
<li><a href="#" id="ile">Iletisim</a></li>
<li><a href="#" id="rek">Reklam</a></li>
<li><a href="#" id="more">Daha Fazla</a></li>
</ul>
</div>
<i class="fas fa-bars"></i>
Oui, cela a à voir avec Votre Maintenant quand un élément a Vous pouvez voir tout cela visuellement par vous-même à l'aide de vos outils de développeur de votre navigateur, par exemple Inspecteur de page pour Firefox ou Chrome's DevTools . position: relatif . Je vais expliquer ce qui se passe:
Corps commence en haut de la fenêtre et est aussi élevé que le plus élevé que le plus élevé de ses enfants le pousse à être, de sorte qu'il s'étend vers le bas pour s'adapter à ses enfants, mais pas plus. Avant de basculer, # div1 est le plus haut enfant. Après avoir basculé, # div1 est masqué, alors seul le reste et le corps sera une hauteur très faible .
Position: relative , une chose qui se passe est que vous pouvez utiliser haut , gauche , droite et inférieur dessus pour le déplacer relatif à l'endroit où il serait normalement. Votre a position: relatif , et il a aussi inférieur: 201px , donc il est donc déplacé de 2015. Normalement, ce serait en haut de la fenêtre, à l'intérieur du corps . Lorsqu'il est déplacé aussi loin, cela se termine à l'extérieur de la fenêtre, de sorte que vous ne pouvez plus le voir.
Ceci est votre extrait avec quelques modifications:
Position: relative code> de CSS, le positionnement est maintenant basé sur Flex (avec marge) li>
- transition ajusté un peu et ajouté certains styles pour faire le mouvement de bouton plus lisse (consultez une solution pour
transition code> Propriété et - Menu_off Code> Classe de modification) LI>
ul> p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="menu-container">
<div class="menu-container__menu-bar js-menu-bar">
<ul>
<li><a href="#" id="ana">Ana Sayfa</a></li>
<li><a href="#" id="hak">Hakkimizda</a></li>
<li><a href="#" id="ile">Iletisim</a></li>
<li><a href="#" id="rek">Reklam</a></li>
<li><a href="#" id="more">Daha Fazla</a></li>
</ul>
</div>
<i class="fas fa-bars menu-container__toggle-button js-menu-toggle-button"></i>
</div>
</body>
</html>
Il y a quelques points à venir ici. Tout d'abord, vous basculez le menu entier sur
Affichage: Aucune , qui l'enlève à partir du flux du site Web. Ensuite, vous avezbas: 201px sur votre icône. Alors, qu'est-ce qui se passe est que lorsque le menu est basculé hors du flux, l'icône est poussée à 201 px de la page visible. Retirez la position par rapport à tout, retirez vos attributs droit et inférieur ainsi que la marge-gauche sur l'icône. Vous verrez que cela fonctionne. Ensuite, positionnez simplement l'icône en haut et vous êtes bon.