Autres astuces en CSS - Un menu escamotable spécial Mobile

→ Un menu escamotable spécial Mobile uniquement en CSS

Ce menu, visible ci-contre à droite, fonctionne également avec le même principe sur ce site même. Vous le verrez si vous le consultez sur un mobile.

C'est le mélange de deux astuces présentées ici :

Des boutons fixes déployables

CSS : Des textes en accordéon

Je vous invite à les consulter, au moins pour en connaitre les sources.

C'est un utilisateur ( Luxman ) qui avait utilisé la première procédure à cet effet, j'avais trouvé l'idée élégante et j'avais décidé de l'améliorer encore un peu en lui ajoutant les textes en accordéon. Merci à lui, en tout cas de m'avoir indirectement suggéré le tutoriel de ce procédé... qu'il utilise d'ailleurs complètement à présent... au moins sur ce site http://www.wehrle-alsace.com/.

Le code ci-dessous est détaillé et commenté le plus possible, il a une première partie [style type="text/css"]...[/style] à mettre au début du code source de la boîte encadrée de ces balises, ou bien tel quel dans un fichier de style additionnel qui sera déclaré pour tout le site (me contacter pour réaliser une telle opération ou lire ce tutoriel) ou dans un fichier spécifique comme c'est le cas pour ce tutoriel (nommé CSS_menu_escamotable_mobile.css) dont l'appel au début du code source est le suivant :


    <link charset="utf-8" href="skin/css/CSS_menu_escamotable_mobile.css" rel="stylesheet" />    

#menu-deployable {
	position:relative; /* mettre fixed pour fixer */
	/*z-index:5000;*/ /* facultatif... tout dépend où et comment ce dispositif est installé, mais z-index élevé pour être superposé au reste de la page en utilisation mobile */
	top:10px; /* position en haut */
	right:0px; /* position à droite */
}
#menu-deployable li{ /* Attributs d'une ligne d'un bouton */
	list-style:none;
	height:48px; /* hauteur */
	padding:0px;
	width:48px; /* largeur */
}
#menu-deployable bandeau{ /* Attributs du bandeau non survolé */
	right:290px; /* position à droite (=largeur bandeau) : d'où juxtaposé avec son bouton*/
	padding:0px;
	position:absolute;
	opacity:0; /* opacité = 0 donc non visible */
	transform:scale(0); /* échelle 0 : donc non visible */
	transform-origin: top right; /* déroulement à partir du haut à droite */
	transition:all 0.7s ease; /* vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
#menu-deployable bouton{ /* Attributs de la zone d'un bouton = idem li ci-dessus */
	height:48px; /* hauteur */
	width:48px; /* largeur */
	display:block;
	position:relative;
}
#menu-deployable bouton:hover bandeau{ /* Attributs du bandeau survolé */
	position:relative;
	width:290px; /* largeur  en pixels */
	height:auto; /* hauteur : auto donc s'adapte en hauteur au contenu */
	padding:5px; /* marges intérieures du bandeau */
	display:block;
	border-radius:6px; /* arrondis */
	opacity:1; /* opacité = 1 donc visible */
	transform:scale(1); /*échelle 1 : donc visible*/
}
#menu-deployable .Item { /* Attributs du menu non survolé */
	background:url('images/iconemenu64.png')no-repeat;  /* URL de l'image */
	background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#menu-deployable .Item:hover { /* Attributs du menu survolé */
	background:url('images/iconemenu64h.png')no-repeat; /* URL de l'image */
	background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#menu-deployable .Item bandeau { /* Attributs du bandeau */
	background-color:#444444; /* couleur de fond */
	color:inherit; /* couleur du texte */
	border:2px solid #000000; /* bordure : épaisseur nature couleur */
}

.md-bandeau-menu{ /*attributs du bandeau*/
	width: 100%; /*largeur du bandeau*/
	margin: 10px auto 30px; /*marges extérieures H DG B*/
	text-align: left; /*alignement texte gauche*/
}
.md-bandeau-menu titre { /*attributs des titres-menus*/
	font-family: Verdana, sans-serif; /*police*/
	font-size: 25px; /*taille police*/
	line-height: 40px; /*hauteur ligne*/
	padding-left:10px; /*marge intérieure gauche*/
	color: #C2662E; /*couleur texte*/
}
.md-bandeau-menu label{ /*attributs des titres-catégories*/
	font-family: Verdana, sans-serif; /*police*/
	font-size: 18px; /*taille police*/
	line-height: 28px; /*hauteur ligne*/
	padding: 5px 5px; /*marges intérieures*/
	margin:0px auto 5px; /*marges extérieures H DG B à adapter*/
	position: relative;
	z-index: 20;
	display: block;
	height: 40px; /*hauteur*/
	cursor: pointer;
	color: #3c3c3c; /*couleur texte*/
	background: linear-gradient(#ebebeb 0%,#e1e1e1 100%); /*couleur fond*/
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		1px 0px 0px 0px rgba(255,255,255,0.9) inset,
		0px 2px 2px rgba(0,0,0,0.1); /*ombre portée boite titre*/
}
.md-bandeau-menu label::before { /*pseudo classe image triangle bas avant*/
	content: '▼'; /*contenu*/
	font-size: 18px; /*taille police*/
	color: #C2662E;
	margin-right:5px;
}
.md-bandeau-menu label:hover::before { /*au survol pseudo classe image triangle droite avant*/
	content: '►'; /*contenu*/
}
.md-bandeau-menu input:checked + label::before { /*séléctionné pseudo classe image triangle droite avant*/
	content: '►'; /*contenu*/
	color: #ebebeb;
}
.md-bandeau-menu label:hover{
	background: #ebebeb; /*couleur fond au survol*/
}
.md-bandeau-menu input:checked + label,
.md-bandeau-menu input:checked + label:hover{ /*attributs des titres sélectionnés et au survol*/
	background: linear-gradient(#c0c0c0 0%,#808080 100%); /*couleur fond*/
	color: #ebebeb; /*couleur texte*/
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.3); /*ombre portée boite titre*/
}
.md-bandeau-menu input{
	display: none;
}
.md-bandeau-menu article{ /*attributs des articles-liens masqués*/
	background: #222222; /*couleur fond*/
	margin-top: -5px; /*marge extérieure haute*/
	margin-left:-5px; /*marge extérieure gauche*/
	overflow: hidden;
	height: 0px; /*hauteur = 0 -> invisible*/
	transform:scale3d(1,0,1); /*échelle = 0 -> invisible*/
	transform-origin: top; /*origine transformation : ici haut*/
	position: relative;
	z-index: 10;
}
.md-bandeau-menu article p{ /*attributs des articles-paragraphes*/
	font-style: normal; /*à ajuster ou supprimer*/
	color: #c0c0c0; /*couleur*/
	font-size: 14px; /*taille police*/
	line-height: 23px; /*hauteur ligne*/
	margin:0; /*marges extérieures*/
	padding: 8px 0px; /*marges intérieures*/
}
.md-bandeau-menu article p::before{ /*pseudo class caractère avant*/
	content: '●'; /*contenu*/
	margin-right:5px; /*marge extérieure droite*/
}
.md-bandeau-menu article p a { /*attributs des articles-liens*/
	color:coral; /*couleur*/
}
.md-bandeau-menu article p a:hover { /*attributs des articles-liens survolés*/
	color:gold; /*couleur*/
}
.md-bandeau-menu article p.new::after { /*pseudo class image new après*/ 
	content: url('images/new.png');
	margin-left:5px; /*marge extérieure gauche*/
}
.md-bandeau-menu article p.maj::after { /*pseudo class image maj après*/
	content: url('images/maj.png');
	margin-left:5px; /*marge extérieure gauche*/
}  
.md-bandeau-menu input:checked ~ article{ /*attributs des articles à la sélection*/
	transition:all 0.5s ease; /*transition à la sélection -temps, nature-*/
}
.md-bandeau-menu input:checked ~ article.md{ /*attributs des articles à la sélection*/
	height: auto; /*hauteur*/
	transform:scale3d(1,1,1); /*échelle = 1 -> visible*/
}

→ Dans le code ci dessus, il est indiqué : position:relative; /* mettre fixed pour fixer */ . Si vous l'utilisez pour un Menu Mobile il vaut mieux le fixer, ce qui ne pose aucun souci avec adHoc.

→ Vous devrez adapter le chemin des images du(des) bouton(s) et éventuellement des images de Nouveauté et de Mise à jour à votre configuration. Ici ces images sont placées dans un dossier images placé au même niveau que le fichier de style dans skin/css.

→ Il est possible de ne placer qu'une seule image de bouton et dans ce cas de supprimer la règle #menu-deployable .Item:hover { ... }...

→ Il est possible de remplacer les images de Nouveauté et de Mise à jour par du texte, dans ce cas, dans les règles correspondantes, placez :
content: 'NEW';
color: #ff0000;
margin-left:5px;

par exemple. Vous pouvez remplacer selon le même principe les flèches en triangle placées devant les catégories (label) et la puce qui précède chaque item (toutes issues de police de caractères standard).

Puis ci-dessous le code simplifié pour ne conserver que la structure, à placer dans votre boîte.


<div style="float:right;">
<div><!-- conteneur -->
<ul id="menu-deployable">
 <li>
<bouton class="Item" href="#" title="Menu">
<bandeau>
<div style="background-color: transparent; max-height: 500px; overflow: auto;">
<section class="md-bandeau-menu">

<titre><a href="index.php" target="_top">Accueil</a></titre><br />
<titre>Menu1</titre>

<div><!-- bloc md-1 -->
 <input id="md-1" name="md-categorie" type="radio" /> <label for="md-1">CatégorieA</label>
<article class="md">
<p><a href="pages/008-camera-informations-camera-fr.php" target="_top">ItemA1 (Lien Camera interne)</a></p>
<p><a href="https://github.com/pixedelic/Camera" target="_blank">ItemA2 (Lien Camera Github externe)</a></p>
</article><!-- fin article md -->
</div><!-- fin bloc md-1 -->

<div><!-- bloc md-2 -->
 <input id="md-2" name="md-categorie" type="radio" /> <label for="md-2">CatégorieB</label>
<article class="md">
<p class="new"><a href="#" target="_top">ItemB1</a></p>
<p class="maj"><a href="#" target="_top">ItemB2</a></p>
<p><a href="#" target="_top">ItemB3</a></p>
</article><!-- fin article md -->
</div><!-- fin bloc md-2 -->

<titre>Menu2</titre>

<div><!-- bloc md-3 -->
 <input id="md-3" name="md-categorie" type="radio" /> <label for="md-3">CatégorieC</label>
<article class="md">
<p><a href="#" target="_top">ItemC1</a></p>
<p><a href="#" target="_top">ItemC2</a></p>
<p><a href="#" target="_top">ItemC3</a></p>
</article><!-- fin article md -->
</div><!-- fin bloc md-3 -->

<div><!-- bloc md-4 -->
 <input id="md-4" name="md-categorie" type="radio" /> <label for="md-4">CatégorieD</label>
<article class="md">
<p><a href="#" target="_top">ItemD1</a></p>
<p><a href="#" target="_top">ItemD2</a></p>
<p><a href="#" target="_top">ItemD3</a></p>
<p><a href="#" target="_top">ItemD4</a></p>
<p><a href="#" target="_top">ItemD5</a></p>
<p><a href="#" target="_top">ItemD6</a></p>
</article><!-- fin article md -->
</div><!-- fin bloc md-4 -->

<div><!-- bloc md-5 -->
 <input id="md-5" name="md-categorie" type="radio" /> <label for="md-5">CatégorieE</label>
<article class="md">
<p><a href="#" target="_top">ItemE1</a></p>
<p><a href="#" target="_top">ItemE2</a></p>
</article><!-- fin article md -->
</div><!-- fin bloc md-5 -->

</section><!-- fin md bandeau menu -->
</div><!-- fin overflow -->
</bandeau>
</bouton>
</li>
</ul><!-- fin menu deployable -->
</div><!-- fin conteneur -->
</div><!-- fin float -->
  • Ici est indiqué [div style="float:right;"] car le bouton menu est fixé à droite, mais il est possible de le placer à gauche, et dans ce cas, modifier les règles correspondantes dans le style ci-dessus.

  • Un [div...] overflow de 500px de hauteur maximum est en place afin de pouvoir faire défiler ce menu sur toute sa hauteur avec un ascenseur vertical. Vous pouvez ajuster cette hauteur.

  • Sur ordinateur, il suffit de ne plus survoler le procédé pour qu'il se ferme. Sur les smartphones, en revanche, il faudra cliquer en dehors du procédé pour le fermer... ou sur un lien bien évidemment...

  • Pas d'affolement sur l'imbrication des balises... Vous pouvez vous contenter de copier-coller ce code, puis, il suffit de repérer les blocs correspondants à une catégorie et ses items dont il est nécessaire de préciser des id différentes pour chaque bloc id="md-1" id="md-2" etc.... Et les titres (nom de menu) qui peuvent, comme dans l'exemple, posséder un lien ou pas... Vous ajoutez ou supprimez autant de blocs et de titres que nécessaire.

  • Repérez comment les informations de Nouveauté ou de Mise à jour sont placées. Simplement ainsi : [p class="new"] et [p class="maj"] dans la balise [p] qui précède l'item.

  • → La dernière ligne droite !

    Votre boîte "menu mobile" est prête... et enregistrée (c'est plus simple de l'enregistrer sans titre... cela évite d'avoir à supprimer l'affichage de son titre en utilisant la feuille de style -me contacter si vous le souhaitez quand même-).

    Il faut, à présent la placer dans votre site. Selon toute vraisemblance, elle devra s'afficher en permanence en Mobile et donc il vaut mieux la placer dans une section du Header Pied de page ou bien dans une section de la page _index, verticale (et dans ce cas, il est plus simple qu'elle soit seule dans cette section) ou horizontale. Sur ce site elle est déclarée dans la boîte solitaire en bas du pied de page. Il va falloir modifier le style afin d'interdire son affichage en Web et de le rétablir en Mobile.

    Et pour cela... il faut "mettre ses doigts dans le cambouis"... Imaginons que, comme ici, vous ayez placé cette boite dans le footer en dernière position... Ici c'est la n°4 puisque j'ai 4 boîtes (0, 1, 2, 3) au premier rang du footer. J'ai placé ceci dans la zone /*footer*/ de style.css :

    
    #foot-box-4 {display:none;} /*ne pas afficher sur Web : c'est la boite qui contient le menu mobile*/
    

    Elle doit être affichée en Mobile et donc, dans la partie /*mobile*/ (ici dès que l'écran est inférieur à 900px) ceci :

    
    #foot-box-4 {display:contents;} /*afficher cette boite sur mobile pour afficher le menu mobile*/
    

    Sur ce site, je souhaitais que le bouton soit présent en Mobile, en haut à droite, d'où les positions de fixation du style plus haut... mais, il y a dans le style standard d'adHoc le bouton de connexion, il m'a fallu repousser à gauche ce bouton. J'ai donc ajouté cette règle au dessous de la précédente :

    
    a#login-btn  { margin-right:50px; } /*déplacer login-btn pour afficher bouton menu mobile*/
    

    Bien évidemment, chaque cas sera un peu différent, mais le principe restera le même... Sur ce site, les boutons de menu sont un peu différents de ceux du tutoriel... S'il vous intéressent, n'hésitez surtout pas à me les demander... je vous les communiquerai avec plaisir ou vous aiderai à en créer à vos couleurs...

    Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.


    Astuces

    adHoc

    Iframes responsives

    Camera

    Unite Gallery

    Animations au survol

    Autres astuces en CSS

    Audio-Players

    Carousels