Refermeture menu accordeon responsive apres clic

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à :
<http://www.cssplay.co.uk/menus/>
dont avec effet "slide" :
<http://www.cssplay.co.uk/menus/ipad-slide-down.html>
alonzy alonzo en plousse complicado :
<http://www.cssplay.co.uk/menus/ipad-flyout-slide.html>
dont un que j'aime bien ;-)
<http://www.cssplay.co.uk/menus/css3-zoom-icon.html>

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 :
<http://www.cssplay.co.uk/menus/cssplay-responsive-click-droplist-menu-v2.html>
et il y en a d'autres ...



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8

SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:

Des exemples en veux-tu en voilà :
<http://www.cssplay.co.uk/menus/>
dont avec effet "slide" :
<http://www.cssplay.co.uk/menus/ipad-slide-down.html>
alonzy alonzo en plousse complicado :
<http://www.cssplay.co.uk/menus/ipad-flyout-slide.html>
dont un que j'aime bien ;-)
<http://www.cssplay.co.uk/menus/css3-zoom-icon.html>

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