Menu déroulant responsive sur menu horizontal

Question

jojaba

Modérateur

10 Mar 2014 à 17:46

Bonjour,

Je suis en train de confectionner un menu déroulant qui devra pouvoir fonctionner également pour les petites résolutions. Je ne rentre pas dans le détail du codage mais pour faire simple, le menu déroulant s'affiche automatiquement au passage de la souris sur l'élément de menu (tout en css, pas de Javascript). Mais on peut également ouvrir le menu déroulant en cliquant sur l'élément et le refermer en recliquant sur l'élément ou en cliquant sur un autre endroit de la page (perte de focus), là, j'utilise jQuery. J'ai pas pu tester sur Firefox en utilisant la vue adaptative (c'est comme ça qu'ils nomment la vue responsive) parce que le "touch" ne semble pas fonctionner (alors qu'en principe ça devrait).
Ma question : est-ce que le scroll (par le touch-glissé) va engendrer une perte de focus ou pas. La question est importante puisque le menu se referme à la perte de focus et que si ce menu est assez haut, il faudra scroller pour voir le bas du menu.

Merci d'avance. Smiley smile

Modifié par jojaba (14 Mar 2014 - 10:42)

Ten

11 Mar 2014 à 09:15

Le scroll n’impacte jamais le focus. Donc non, le scroll ne va pas engendrer une perte de focus — en revanche, si tu scrolles sur une page et que le focus n’est pas transporté via javascript conjointement au scroll, le focus restera ou il était. Avec un exemple :
1 - Ton menu est une ancre qui va vers une section loin en bas;
2 - Tu cliques / appuies dessus, et la page scrolle vers cette section;
3 - Si le focus n’est pas transporté : il est resté sur le menu tout la-haut, alors que tu visionnes le bas de la page.
3.bis - Si le focus est transporté (correctement) : tu visionnes le bas de la page et le premier élément focusable de cette section reçoit le focus.

Le meilleur test pour essayer, comprendre et améliorer ce type de subtilité est la navigation au clavier. Tabules, tabules, tabules, appuie sur Entrée et observes…

Pas évident à saisir et à appliquer, et je te donne dans le mille : l’immense majorité des plugins jQuery ne respectent pas le focus et la navigation au clavier Smiley fache

. Ce sont généralement des artifices purement visuels…

Bon courage !

PS : Pour la version CSS : tu doubles le :hover avec le :focus ? Sinon pas de navigation possible au clavier non plus !

jojaba

Modérateur

11 Mar 2014 à 09:53

Merci Ten pour ces précisions et conseils. Pour info (et aussi pour critiques et propositions d'améliorations), voici le code du menu concerné :
HTML (épuré pour simplifier la lecture) :

<ul id="hmenu">
    <li><a href="index.php" rel="home">Accueil</a></li>
    <li><a href="agenda.php">Agenda</a></li>
    <li><a href="#" id="toggle-cat-list">Catégories</a>
        <ul id="cat-list-menu">
            <li><a href="categorie-01" title="Catégorie 01">Catégorie 01</a></li>
	        <li><a href="categorie-02" title="Catégorie 2">Catégorie 02</a></li>
	        <li><a href="categorie-03" title="Catégorie 3">Catégorie 03</a></li>
	        <li><a href="categorie-04" title="Catégorie 4">Catégorie 04</a></li>
	        <li><a href="categorie-05" title="Catégorie 5">Catégorie 05</a></li>
        </ul>
    </li>
</ul>

jQuery :

<script>
    jQuery(document).ready(function() {
        jQuery("#toggle-cat-list").on("click", function(e) {
            e.preventDefault();
            jQuery("#cat-list-menu").slideToggle(600);
        })
        jQuery("#toggle-cat-list").on("blur", function() {
            jQuery("#cat-list-menu").slideUp(600);
        })
    })
</script>

CSS :

#hmenu, #cat-list-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

#hmenu > li {
	display: inline;
	position: relative;
	margin: 0;
	padding: 0;
}

#hmenu > li > a {
	font-size: 2.5em;
	display: inline-block;
	line-height: 90px;
	margin: 0;
	padding: 0 1%;
	text-decoration: none;
	color: #FFF;
}

#hmenu > li > a:hover,
#hmenu > li > a:focus,
#hmenu > li.current-menu-item > a,
#hmenu > li.current-menu-ancestor > a {
	transition: all 0.7s ease-out;
	color: #fff;
	background: #ad1216;
	text-shadow: -1px 1px 1px #000;
}

/* Categories menu */
#cat-list-menu {
    display: none;
    position: absolute;
    right: 1%;
    top: 45px;
    width: 230px;
    z-index: 10;
    background: rgb(182, 19, 24);
    background: rgba(182, 19, 24, .9);
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 3px #000;
}

#hmenu li:hover > ul#cat-list-menu,
#hmenu li:focus > ul#cat-list-menu{
    display: block;
}

#cat-list-menu a {
	font-size: 2em;
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 1% 2%;
	text-decoration: none;
	color: #FFF;
}

#cat-list-menu a:hover,
#cat-list-menu a:focus {
	transition: all 0.7s ease-out;
	color: #FFF;
	background: #ad1216;
	text-shadow: -1px 1px 1px #000;
}

Par défaut, le menu déroulant s'affiche automatiquement au survol de la souris. Pour les appareils "tactiles", au clic sur "Catégories" on affiche le menu. Le clic suivant sur "Catégories" referme le menu ou le clic sur une autre partie de la page (onblur).

***edit***
Apparemment, la navigation clavier ne fonctionne pas pour mon menu déroulant... Va falloir que je revois ça Smiley cligne

**/edit**
Modifié par jojaba (11 Mar 2014 - 15:26)

jojaba

Modérateur

11 Mar 2014 à 15:54

Houla, ça m'a l'air bien plus compliqué que je ne pensais.
Fort heureusement, Google est mon ami et j'ai pu trouver une ressource vraiment très complète sur ce sujet :
Tutoriel : créer un menu déroulant accessible en CSS | Édition N°44 | le train de 13h37
Dès que j'ai davantage de temps, je m'y colle Smiley cligne

jojaba

Modérateur

14 Mar 2014 à 09:42

Bon eh bien, j'ai dû faire des concessions pour ne pas trop perdre de temps...
Le côté accessible n'est pas obligatoire dans mon cas. Ce qui est importnat c'est que le menu soit responsive (fonctionne sur tout type de support) et que la navigation au clavier fonctionne également.
J'ai donc modifié comme ceci :
HTML

<ul id="hmenu">
    <li><a href="index.php" rel="home">Accueil</a></li>
    <li><a href="agenda.php">Agenda</a></li>
    <li><a href="#" id="toggle-cat-list">Catégories</a>
        <ul id="cat-list-menu">
            <li><a href="categorie-01" title="Cliquer pour dérouler les catégories">Catégorie 01 <img src="images/arrow-down.png" alt="" /></a></li>
	        <li><a href="categorie-02" title="Catégorie 2">Catégorie 02</a></li>
	        <li><a href="categorie-03" title="Catégorie 3">Catégorie 03</a></li>
	        <li><a href="categorie-04" title="Catégorie 4">Catégorie 04</a></li>
	        <li><a href="categorie-05" title="Catégorie 5">Catégorie 05</a></li>
        </ul>
    </li>
</ul>

CSS (la partie concernant le menu déroulant) :

/* Categories menu */
#cat-list-menu {
    position: absolute;
    right: 1%;
    top: 45px;
    width: 230px;
    z-index: 10;
    background: rgb(182, 19, 24);
    background: rgba(182, 19, 24, .9);
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 1px 3px #000;
}

#cat-list-menu a {
	font-size: 2em;
	display: block;
	padding: 1% 2%;
	text-decoration: none;
	color: #FFF;
}

jQuery

jQuery(document).ready(function() {
    jQuery("#cat-list-menu").css( "display", "none" );
    jQuery("#toggle-cat-list").on("click", function(e) {
        e.preventDefault();
        if (jQuery("#cat-list-menu").css( "display" ) == "none") {
           jQuery("#cat-list-menu").slideDown(600);
           jQuery("#toggle-cat-list").attr("title", "Cliquer pour fermer la liste des catégories");
           jQuery("#toggle-cat-list").html('Catégories <img src="images/arrow-up.png" alt="" />');
       }
       else {
           jQuery("#cat-list-menu").slideUp(600);
           jQuery("#toggle-cat-list").attr("title", "Cliquer pour dérouler la liste des catégories");
           jQuery("#toggle-cat-list").html('Catégories <img src="images/arrow-down.png" alt="" />');
       }
    })
})

Je vous ai concocté un fiddle : http://jsfiddle.net/P7eWy/ (les petites flèches n'y sont pas)
Une copie d'écran pour que vous vous voyez ce que ça donne sur le site que je développe :

Bon, tout ça ne fonctionne que si JS est activé, s'il ne l'est pas, le menu est déroulé.
Peut-être des conseils/suggestions pour prendre en charge la désactivation JS ? Pour les écrans < 300 px, je ne sais pas trop si c'est la bonne solution, il faudriat peut-être que je passe à des éléments de menu en pleine largeur qui reviennent dans le flux (pas de superposition par rapport au contenu).
Modifié par jojaba (14 Mar 2014 - 10:42)

miltone

19 Mar 2014 à 23:28

salut Jojaba.

Ton sujet tombe à pique car je cherche à faire exactement la même chose. Une navigation avec des sous-menus et le tous bien entendu responsive.

Cela ne va s'en doute pas t'aider mais pour le moment de mon coté je ne possède pas de sous menu mais je procède ainsi pour obtenir un menu responsive pour petit écran : Fiddle

As-tu une idée de périphérique petit écran n'activant pas JS de manière automatique ?

Une des possibilités serait éventuellement de pouvoir ajouter du code html en rapport à une media-queries pour petite résolution mais je ne vois pas trop comment procédé pour le moment.

Sinon construire entièrement l'architecture du menu et masqué suivant les besoins certaines parties...

Es-tu sur de pouvoir faire correspondre, dans une même architecture de menu responsive, l'activation JS et la désactivation sans toucher à la structure ? Car sans JS ca implique d'ajouter d'avantage de structure que celle-ci te sera inutile avec JS activé.

bref je suis désolé si je ne t'apporte pas de solution immédiatement mais je partage ma réflexion pour le même problème si cela peut t'aiguiller...

bon courage

jojaba

Modérateur

20 Mar 2014 à 06:20

Salut miltone,

ça tombe bien, j'avais adapté mon;menu pour petits écrans. Pas trop le temps de mettre à jour le fiddle, voici la css :

@media (max-width: 400px) {

    .main-menu {
		height: auto !important;
		text-align: center !important;
	}
	
	.main-menu img#logo {
		float: none !important;
		display: inline-block !important;
		margin: 0 !important;
		padding: 0.5em 0 0 0.5em !important;
	}
	
	#hmenu {
	    text-align: center !important;
	}
	
	#hmenu > li > a {
	    font-size: 2em !important;
		width: 30%;
    }
    
    #cat-list-menu {
        position: static !important;
        width: 100% !important;
        text-align: left !important;
        
        background: #ececec !important;
    }
    
    #cat-list-menu a, #cat-list-menu a:link {
		font-size: 1.5em !important;
        color: #b61318 !important;
        border-bottom: #b61318 1px solid !important; 
    }
    
    #cat-list-menu a:hover {
        color: #FFF !important;
    }
	
	.loop-listing article {
        width: auto !important;
    }
    
    aside {
        display: block !important;
        width: auto !important;
    }
}

Ce que ça donne lorsqu'on clique sur "Catégories" :

Pour le cas où js est désactivé, le menu est déroulé par défaut (css). C'est pas top au niveau design mais j'ai pour l'instant pas trouvé mieux...

Quant à connaître le matériel prenant en charge par défaut JavaScript, c'est une excellente question dont j'aimerais également connaître la réponse. Smiley cligne

PS : Le tuto de Raphaël est une référence en la matière à mon avis Smiley cligne

Modifié par jojaba (20 Mar 2014 - 06:56)

Sujet clos

Web Mobile et responsive web design

Menu déroulant responsive sur menu horizontal