tuto menu responsive

Tu enlèves le @include pour avoir ceci à la place :

box-shadow : 0 10px 0 1px #fff;

Il est quand même préférable de préfixer !

Bonjour,

Avec Compass :

    .header__icon{
        &:after{
        }
    }

Sans Compass :

    .header__icon{  
    }
    .header__icon:after{
    }

Tu peux utiliser entre autre cette adresse pour les prefix :
http://cssprefixer.appspot.com/

Merci pour ces réponses, j'avance donc doucement et je bloque de nouveau quand on ajoute le JS pour créer l'évenment au clique. Dans le CSS à 21mn28 du tuto il y a :

    .with--sidebar{
      .menu{@include transform(translateX(0px));  
      }
    }

Ce code est sensé transformer le hamburger du menu en menu déroulant.
Comme je n'utilise pas Compass je ne sais vraiment pas encore une fois comment le faire avec mon CSS de base ?
SI vous pouvez m'aider, une fois de plus ?
Merci

Re bonjour,
Je vais expliquer un peu mieux où je bloque...
Dans le tuto on a un fichier js qui déclenche la class "with--sidebar" au clique

(function($){
    $('#header_icon').click(function(e){
            e.preventDefault();
            $('body').toggleClass('with--sidebar');
    })
})(jQuery);

Auparavent on avait ajouter

id="header_icon"

dans le code html
Ensuite dans le css on part du principe que si le with-sidebar est activé on va dérouler le menu.
Seulement si j'utilise pas Compass je peux pas faire de condition dans mon css ?
Dans le tuto le code css est le suivant :

  .with--sidebar{
      .menu{@include transform(translateX(0px));  
      }
    }

J'ai essayé cela :

  .with--sidebar{
      .menu{ transform:translateX(0px);  
      }
    }

Ce qui ne fonctionne pas...
Quel code CSS faire pour que mon menu déroule au clique ?
Merci

Merci, j'avais quelques difficultés. Je vais continuer le tuto. Je devrais peut être me mettre à Compass...

De rien, regardes au moins un tuto sur Compass ;)

Il faut utiliser compass parce que le dernier ligne n'est pas du propre css

Salut, as tu trouvé une solution au problème
.with--sidebar{
.menu{@include transform(translateX(0px));
}
}
Je bloque au même endroit et je n'arrive pas à trouver la solution.
Merci :)

Tu bloque au niveau du JS ou du CSS ? Green68 a donné la "traduction" un peu plus haut du SCSS en CSS, du code que tu as écris :

.with--sidebar .menu {
  -moz-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

juste pour dire que j'ai fini par trouver d'ou venait mon erreur, l'appel de mon app.js n'était pas bien placé dans mon index rrr je referai plus l'erreur au moins.
merci en tout cas :)

Hello,
je bloque aussi moi mais c'est plutot du coter du JS je croit, quand je fait le test alert('test); le js est bien charger. mais quand j'appel la fonction toogleClass
la classe body ne change pas.

(function($){

$('#header__icon').click(function(e){
    e.preventDefault();
    $('body').toggleClass('with--sidebar');
})

})(jQuery);

    <a href="#" class="header__icon" id="header__icon"></a>