En poursuivant votre navigation sur le site, vous acceptez l’utilisation de cookies pour : [vous identifier / personnaliser votre expérience]. Cliquez ici Pour en savoir plus.

Script CSS : Animation hamburger

...

ConnexionSe connecterInscriptionS'inscrire
Script mis à jour le 16/12/14

Description du script CSS :

Animation de bouton menu (open/close) navigation style hamburger

Droits d'utilisations de ce script CSS :

Je peux revendre ce script
Je peux l'utiliser plusieurs fois
Je peux l'utiliser pour mes clients
Je peux modifier ce script
Je dois citer l'auteur du script
<a href="#" class="nav-open">  <div class="inner"></div></a>/*Scss*/body {  background-color: #293042;  box-sizing: border-box;}.nav-open {  border: 3px solid white;  height: 30px;  left: 50%;  position: absolute;  top: 50%;  transform: translate(-50%, -50%);  width: 30px;    .inner, .inner::before, .inner::after {    background-color: white;    content: "";    display: block;    height: 3px;    width: 14px;    transition: all .5s ease;  }    .inner {    left: 50%;    position: absolute;    top: 50%;    transform: translate(-50%, -50%);        &::before {      margin-top: -6px;      position: absolute;    }        &::after {      margin-top: 6px;      position: absolute;    }  }}.nav-open.nav-close {  .inner {    background-color: transparent;    left: 54%;        &::before, &::after {      transform: rotate(45deg);      transform-origin: 0 50%;      width: 17px;    }        &::after {      transform: rotate(-45deg);    }  }}/*JS*/$('.nav-open').on("click", function(e) {  e.preventDefault();    $(this).toggleClass('nav-close');});

Attention le code css et est en SCSS, il nécessite d'être compilé de manière à être interprêté par votre navigateur.

16/12/14 : Première version du script

Questions posées fréquemment
Vous trouverez un bouton "signaler" en haut à droite de cette fiche pour avertir le créateur d'un problème.
Demande de support

Vous rencontrez une difficulté ou avez besoin d'informations supplémentaires sur le script ? N'hésitez pas à contacter l'auteur en cliquant sur le bouton ci-dessous :

GwenWeb

Inscrit le : 24 Septembre 2014

Intérêt : non-renseigné

Voir son profil >>

Nombre de visites du script : 1187

Moyenne de visites des scripts : 13


Prix de vente moyen d'un script : 3 euros

// Commentaires sur ce script CSS :

Veuillez vous inscrire et/ou vous connecter pour laisser un commentaire

Il n'y a pas encore de commentaire sur ce script.
Essayez-le et soyez le premier à laisser votre avis !

Basile : Mascotte chez 1script.frSITE EN TEST PUBLIQUE :
Bonjour, je vous rappelle que le site est en phase de test. En savoir plus ?
Script par GwenWeb
Autres scripts du même membre GRATUIT

PARTAGER CE SCRIPT

Twitter Facebook Google Plus Linkedin email

SECTIONS / CATEGORIES

NEWSLETTER : S'ABONNER

BASIL VOUS EXPLIQUE TOUT

Découvrez 1script.fr en vidéo

SUIVEZ 1SCRIPT.FR

ACCÈS