Refermeture menu accordeon responsive apres clic

Bonjour

Je m'attèle à mettre en place un menu accordeon responsive.
Le menu est fixe en haut sur desktop (et mobile à écran suffisamment
large), et doit être sous forme d'un item '≡' et accordeon sur petit
écran.

Comme mon site est essentiellement "onepage", l'accordeon doit se
refermer quand on clic sur un item de menu... ***mais pas si le menu est
en mode desktop*** !

Comment coder ça ?

Actuellement j'en suis là :
http://jsfiddle.net/kerlutinoec/uL62fnwr/
Pour tester le responsive en dessous 480px de large :
http://fafouland.free.fr/essai.html

Merci pour votre aide.

Bonjour kerlutinoec,

Tu as un menu qui dans un cas aura une forme A, et dans un autre cas une forme B.

Personnellement, si je prend du recul sur ce que tu expliques, je te proposerai ceci :

Transformer A en B (passage de PC à mobile) est difficile si les réactions sont radicalement différentes.
Pour ma part, je réalise deux fois le menu dans des éléments séparés.
Imaginons le menu PC dans un élément : nav-desktop.php

<nav class="desktop">
#Menu PC ici
</nav>

Et le menu mobile : nav-mobile.php

<nav class="mobile">
#Menu mobile ici
</nav>

Chacun de ces menus auraient leur définition dans un fichier css :

nav.desktop{}
nav.desktop ul {}
...
nav.mobile{}
nav.mobile ul{}
...

Dans ton modèle de page, tu insères les deux menus, mais sur les medias query en CSS3, tu joues sur la propriété "display" que tu passes à "block" ou "none".
Modifié par Kikimagik (02 Sep 2015 - 18:28)