Sujet Précédent Sujet Suivant

[JQUERY] menu responsive en jQuery

Fermé
AntoninDevpHp Messages postés 5 Date d'inscription mercredi 27 mai 2015 Statut Membre Dernière intervention 10 juin 2015 - 9 juin 2015 à 15:20
AntoninDevpHp Messages postés 5 Date d'inscription mercredi 27 mai 2015 Statut Membre Dernière intervention 10 juin 2015 - 10 juin 2015 à 14:24
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 : 
<!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:

1 réponse

Réponse 1 / 1
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 10/06/2015 à 04:32
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 

(".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.
0
AntoninDevpHp Messages postés 5 Date d'inscription mercredi 27 mai 2015 Statut Membre Dernière intervention 10 juin 2015
10 juin 2015 à 14:24
Bonjour à toi !

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
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses