[JQUERY] menu responsive en jQuery

AntoninDevpHp Messages postés 5 Date d'inscription Statut Membre Dernière intervention -
AntoninDevpHp Messages postés 5 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

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

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

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.

AntoninDevpHp Messages postés 5 Date d'inscription Statut Membre Dernière intervention

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

Discussions similaires

menu caché

Comment activer le Bluetooth sur une TV Samsung ?

Mon PC marque press the esc key for startup menu

Déblocage du mode hôtel Philips 20HF5234/10

Votre réponse

Discussions similaires