S'il vous plaît, veuillez me pardonner mais je collerai tout mon code ici afin que quelqu'un puisse repérer l'erreur. Je l'ai essayé pour les deux derniers jours sans succès. Je veux juste que ma barre Naville apparaisse et disparaisse le clic. C'est-à-dire, merci d'avance. Toute aide sera appréciée. Je veux que ma barre de navigation apparaisse et disparaisse, cliquez sur Click.
3 Réponses :
Je pense qu'il y a un problème dans votre structure HTML. J'ai édité un peu votre code pour le faire fonctionner. En outre, j'ai utilisé un script pour JQuery. J'espère que cela aidera.
p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nav Bar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".toggle").click(function(){
$(".nav").toggle();
});
});
</script>
<style>
* {
font-family: 'Open Sans', sans-serif;
box-sizing: border-box;
color: #333;
font-size: 100%;
line-height: 1.5;
}
body {
margin: 0;
background-size: cover;
}
nav {
--duration: .5s;
--easing: ease-in-out;
position: relative;
width: 220px;
margin: 20px;
}
nav ol {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
margin: -4px 0 0 0;
}
nav a {
display: block;
text-decoration: none;
background: #fff;
transform-origin: 0 0;
transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
transition-delay: var(--delay-out);
border-radius: 4px;
padding: 1em 1.52em;
}
nav a:hover {
background: #efefef;
}
nav .sub-menu a {
font-size: .9em;
color: #666666;
border-left: 2em solid white;
padding: .75em;
background: linear-gradient(to right, #dddddd 2px, #ffffff 2px);
}
nav .sub-menu a:hover {
background: linear-gradient(to right, #dddddd 2px, #efefef 2px);
}
h1.toggle {
display: inline-block;
margin: 20px 0px 0px 20px;
padding: 20px;
border: 0px solid #e8e8e8;
border-radius: 2px;
width:15.5%
}
h1.toggle:hover {
background: #e8e8e8;
}
h1 span {
float: right;
font-size: 27px;
display: inline-block;
position: relative;
top: -9px;
}
</style>
</head>
<body>
<h1 class="toggle">Menu <span>×</span></h1>
<nav class="nav">
<ol>
<li class="menu-item"><a href="#0">Home</a></li>
<li class="menu-item"><a href="#0">About</a></li>
<li class="menu-item">
<a href="#0">Widgets</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Grocerry</a></li>
<li class="menu-item"><a href="#0">Discount</a></li>
<li class="menu-item"><a href="#0">Huge Sale</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Juice</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Russi</a></li>
<li class="menu-item"><a href="#0">Paneer Pyaza</a></li>
<li class="menu-item"><a href="#0">Rasbhari</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Contact</a></li>
</ol>
</body>
</html>Bonjour, le problème avec le code est que en l'utilisant, ma navigation NAVBAR perd la facilité élégante et soulage la transition de retard. Si je peux maintenir le style initial et que je puisse toujours réaliser la fonction que vous avez créée, je serais heureux. Merci pour l'effort.
OK Alors, essayez le code suivant pour ajouter un effet de décomposition. Ici, j'ai utilisé Fadetoggle () au lieu de basculer ()
p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nav Bar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".toggle").click(function(){
$(".nav").fadeToggle(1000);
});
});
</script>
<style>
* {
font-family: 'Open Sans', sans-serif;
box-sizing: border-box;
color: #333;
font-size: 100%;
line-height: 1.5;
}
body {
margin: 0;
background-size: cover;
}
nav {
/* --duration: .5s;
--easing: ease-in-out;*/
position: relative;
width: 220px;
margin: 20px;
}
nav ol {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
margin: -4px 0 0 0;
}
nav a {
display: block;
text-decoration: none;
background: #fff;
transform-origin: 0 0;
/* transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
transition-delay: var(--delay-out);*/
border-radius: 4px;
padding: 1em 1.52em;
}
nav a:hover {
background: #efefef;
}
nav .sub-menu a {
font-size: .9em;
color: #666666;
border-left: 2em solid white;
padding: .75em;
background: linear-gradient(to right, #dddddd 2px, #ffffff 2px);
}
nav .sub-menu a:hover {
background: linear-gradient(to right, #dddddd 2px, #efefef 2px);
}
h1.toggle {
display: inline-block;
margin: 20px 0px 0px 20px;
padding: 20px;
border: 0px solid #e8e8e8;
border-radius: 2px;
width:15.5%
}
h1.toggle:hover {
background: #e8e8e8;
}
h1 span {
float: right;
font-size: 27px;
display: inline-block;
position: relative;
top: -9px;
}
</style>
</head>
<body>
<h1 class="toggle">Menu <span>×</span></h1>
<nav class="nav">
<ol>
<li class="menu-item"><a href="#0">Home</a></li>
<li class="menu-item"><a href="#0">About</a></li>
<li class="menu-item">
<a href="#0">Widgets</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Grocerry</a></li>
<li class="menu-item"><a href="#0">Discount</a></li>
<li class="menu-item"><a href="#0">Huge Sale</a></li>
</ol>
</li>
<li class="menu-item">
<a href="#0">Juice</a>
<ol class="sub-menu">
<li class="menu-item"><a href="#0">Russi</a></li>
<li class="menu-item"><a href="#0">Paneer Pyaza</a></li>
<li class="menu-item"><a href="#0">Rasbhari</a></li>
</ol>
</li>
<li class="menu-item"><a href="#0">Contact</a></li>
</ol>
</body>
</html>Tu es le meilleur homme. Merci beaucoup. J'espère que cela ne vous dérange pas si je reviens et posez d'autres questions. Acclamations!!!
Merci pour le compliment ... Bien sûr, vous pouvez demander à toute autre requête que vous avez.
J'ai eu une pile avec la même erreur, les causes sont deux commandes de structure dans votre HTML et un mauvais appel dans la balise de script
Je suis désolé de ne pas avoir mis de couleur de fond dans mon CSS, mais lorsque vous ajoutez une certaine couleur, vous remarquerez que lorsque vous cliquez sur le menu, les éléments de menu disparaissent, mais il y a un bloc de barre blanche-navigateur qui reste.