[JQUERY] menu responsive en jQuery
AntoninDevpHp
Messages postés
5
Statut
Membre
-
AntoninDevpHp Messages postés 5 Statut Membre -
AntoninDevpHp Messages postés 5 Statut Membre -
Bonjour,
je suis actuellement en plein développement d'un site internet, cependant lors de la partie responsive du site, je rencontre des difficultés pour intégrer un menu responsive. En effet lorsque je clique sur mon toglle menu, le menu s'affiche mais il ne se remet pas quand on clique sur la croix.
Voici mon code html :
Mon CSS :
et mon Javascript :
Je vous remercie d'avance pour toute aide éventuelles.
je suis actuellement en plein développement d'un site internet, cependant lors de la partie responsive du site, je rencontre des difficultés pour intégrer un menu responsive. En effet lorsque je clique sur mon toglle menu, le menu s'affiche mais il ne se remet pas quand on clique sur la croix.
Voici mon code html :
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title> La start Up - French </title>
<meta charset="utf-8">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<!-- / --------- globale --------- / -->
<div class="global">
<!-- / --------- header --------- / -->
<header class="header">
<a href="#" class="logo"> <img src="img/logo.png" alt="La start-up"> </a>
<a href="#" class="header-icon"></a>
<nav class="menu">
<a href="index.php">Home</a>
<a href="categories.php">Par catégorie</a>
<a href="annuaire.php">Annuaire</a>
<a href="inscription.php">Inscrivez votre start-up</a>
<a href="about.php">À propos</a>
<a href="contact.php">Contacts</a>
</nav>
<div class="social">
<a href="#"><span class="socicon">a</span></a>
<a href="#"><span class="socicon">b</span></a>
<a href="#"><span class="socicon">x</span></a>
<a href="#"><span class="socicon">d</span></a>
<a href="#"><span class="socicon">r</span></a>
</div>
</header>
Mon CSS :
.header-icon {
position: relative;
display: block;
float: left;
margin-left: 100px;
width: 70px;
height: 70px;
cursor: pointer;
}
.header-icon:after {
content: '';
position: absolute;
display: block;
width: 1.5rem;
height: 0;
top: 16px;
left: 30px;
box-shadow: 0 10px 0 2px white, 0 20px 0 2px white, 0 30px 0 2px white;
}
.close-icon {
position: relative;
display: block;
float: left;
margin-left: 100px;
width: 70px;
height: 70px;
cursor: pointer;
margin-top: 30px;
}
.close-icon:before {
content: '';
position: absolute;
display: block;
width: 1.5rem;
height: 0;
top: 16px;
left: 40px;
box-shadow: 0 10px 0 1px white;
-webkit-transform : rotate(-225deg);
}
.close-icon:after {
content: '';
position: absolute;
display: block;
width: 1.5rem;
height: 0;
top: 16px;
left: 27px;
box-shadow: 0 10px 0 1px white;
-webkit-transform : rotate(225deg);
}
et mon Javascript :
$(document).ready(function(){
var menuOpen = false;
$('.header-icon').click(function(){
if (menuOpen == false) {
$('.menu').clearQueue().animate({
"right" : '0'
})
$('.global').clearQueue().animate({
"margin-left" : "-250px"
})
$('.header-icon').addClass('close-icon');
$('.header-icon').removeClass('header-icon');
menuOpen = true;
};
});
$('.close-icon').click(function(){
if (menuOpen == true) {
$('.menu').clearQueue().animate({
"right" : "-250px"
})
$('.global').clearQueue().animate({
"margin-left" : "0"
})
$('.close-icon').addClass('header-icon');
$('.close-icon').removeClass('close-icon');
menuOpen = false;
};
})
})
Je vous remercie d'avance pour toute aide éventuelles.
A voir également:
- [JQUERY] menu responsive en jQuery
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Excel menu déroulant en cascade - Guide
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
1 réponse
Salut
tu devrais utiliser la fonction toggle() de jquery sur la meme class pour anime et montre / anime et cache les class cibles sans faire des addClass, removeClass et des if
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
tu devrais utiliser la fonction toggle() de jquery sur la meme class pour anime et montre / anime et cache les class cibles sans faire des addClass, removeClass et des if
(".icon").click(function(){
(".element").toggle (
function(){fonctions1; } , function(){fonctions2; }
);
})
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Je te remercie pour ton aide précieuse, cependant j'ai réussi à me débrouiller autrement en faisant comme ceci (système B) :
$(document).ready(function(){ $('.close-icon').css("display", "none"); var menuOpen = false; $('.header-icon').click(function(){ if (menuOpen == false) { $('.menu').clearQueue().animate({ 'right' : '1px' }); $('.global').clearQueue().animate({ 'margin-left' : '-240px' }); $(this).fadeOut(200); $('.close-icon').fadeIn(200); menuOpen = true; }; }); $('.close-icon').click(function(){ if (menuOpen == true) { $('.menu').clearQueue().animate({ 'right' : '-240' }); $('.global').clearQueue().animate({ 'margin-left' : '0px' }); $(this).fadeOut('fast'); $('.header-icon').fadeIn(200); menuOpen = false; }; }); })Mais merci encore,
Antonin