Refermeture menu accordeon responsive apres clic

Le
fra-PasDeSp
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.
--
Fra
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #26364622
Le 22/08/15 15:49, Fra a écrit :
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 ?



Le mieux est d'utiliser une liste :

/-----------
<ul id="menu">
<li><a href="#propos">A propos</a></li>
<li><a href="#rea">Réalisations</a></li>
<li>informations
<ul>
<li><a href="inf1">infos 1</a></li>
<li><a href="inf2">infos 2</a></li>
<li><a href="inf3">infos 3</a></li>
</ul>
</li>
<li><a href="contact">Contact</a></li>
</ul>
----------/

Des exemples en veux-tu en voilà :
dont avec effet "slide" :
alonzy alonzo en plousse complicado :
dont un que j'aime bien ;-)



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



Ça marche bien sur mon ordi avec Firefox.
Ça marche pas mal (tien ? là je comprends pourquoi il y a un div
"menumobile")

Merci pour votre aide.



Voir comment Stu fait pour présenter un menu "desktop" et le modifier
pour phone :
et il y en a d'autres ...



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
fra-PasDeSp
Le #26364672
SAM
Des exemples en veux-tu en voilà :
dont avec effet "slide" :
alonzy alonzo en plousse complicado :
dont un que j'aime bien ;-)



Ils m'affichent tous "This demo is too wide for your mobile screen" en
vue adaptative 320 px. Donc ça le fait pas pour du responsive !




> 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

Ça marche bien sur mon ordi avec Firefox.
Ça marche pas mal (tien ? là je comprends pourquoi il y a un div
"menumobile")



Ca marche mais le menu ne se referme pas quand on clique sur un de ces
items (sachant que la cible est une ancre). -mais il ne doit pas par
contre se refemer en vue desktop sinon le menu disparait totalement !-
--
Fra
Publicité
Poster une réponse
Anonyme