Menu escamotable spécial Mobile
Un menu escamotable spécial Mobile
Ce menu, visible ci-contre, fonctionne à l'identique 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 :
Je vous invite à les consulter, au moins pour en connaitre les sources. 
C'est suite à un post sur le forum de freeguppy.org, sur lequel je n'ai pas pu m'exprimer puisque je suis exclu définitivement de guppy -et, encore une fois, mon droit de réponse d'auteur et d'adaptateur est bafoué...- L'auteur (Luxman) évoquait pour un menu mobile, sur ce site une adaptation des boutons fixes déployables qu'il avait trouvée sur ce présent site en me citant. J'ai trouvé l'idée élégante et j'ai 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é ce tutoriel.
Il est entièrement en CSS.
Ci-dessous le code de style (commenté le plus possible) qu'il est possible de mettre dans le fichier styleplus, ou mobstyle (RD mobile, puisque censé n'être mis en place que sur mobile)... ou au début de la boite libre dans laquelle il sera placé encadré par les balises <style type="text/css">...</style> . Ou encore, comme c'est le cas ici, dans une feuille de style dédiée.
Vous devrez adapter le chemin des images du(des) bouton(s) et éventuellement des images de nouveauté et de MAJ à votre configuration. Il est possible de ne placer qu'une image de bouton et dans ce cas de supprimer la règle #menu-deployable .Item:hover { ... }... et de remplacer les images de nouveauté et de MAJ par du texte : content: 'NEW'); color: #FF0000; par exemple. Vous pouvez remplacer selon le même principe les flèches en triangle placées devant les catégories (label).
#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:#f6f6f6; /* couleur de fond */
color:inherit; /* couleur du texte */
border:2px solid #616161; /* 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-menu*/
font-family: Verdana, sans-serif; /*police*/
font-size: 25px; /*taille police*/
line-height: 40px; /*hauteur ligne*/
padding-left: 10px; /*marge intérieure gauche*/
color: #ce662e; /*couleur texte*/
}
.md-bandeau-menu label{ /*attributs des titres-catégories*/
font-family: Verdana, sans-serif; /*police*/
font-size: 19px; /*taille police*/
line-height: 28px; /*hauteur ligne*/
padding: 5px 5px; /*marges intérieures*/
margin: 1px; /*marges extérieures*/
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; /*couleur texte*/
margin-right:5px; /*marge extérieure droite*/
}
.md-bandeau-menu label:hover::before { /*au survol pseudo classe image triangle droite avant*/
content: '►'; /*contenu*/
}
.md-bandeau-menu input:checked + label::before { /*sélectionné pseudo classe image triangle droite avant*/
content: '►'; /*contenu*/
color: #ebebeb; /*couleur texte*/
}
.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: #ffffff; /*couleur fond*/
margin-top: -5px; /*marge extérieure haute*/
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 paragraphes-liens*/
font-style: italic; /*à ajuster ou supprimer*/
color: #777777; /*couleur*/
font-size: 14px; /*taille police*/
line-height: 23px; /*hauteur ligne*/
margin:0; /*marges extérieures*/
padding: 8px 10px; /*marges intérieures*/
}
.md-bandeau-menu article p.new::after { /*pseudo classe image new après*/
content: url('images/new.png');
margin-left:5px;
}
.md-bandeau-menu article p.maj::after { /*pseudo classe image maj après*/
content: url('images/maj.png');
margin-left:5px;
}
.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*/
}
Si vous fixez ce bouton dans le style ci-dessus, il sera toujours présent (il faut donc choisir judicieusement sa place) et ce menu sera accessible à tout moment... ce qui peut être bien pratique sur un mobile... Mais, sur guppy, en fonction de l'affichage de certaines pages, le résultat est très imparfait... (page devant être "scrollée" horizontalement...). Personnellement, sur ce site, je ne l'ai pas fixé. Mais, sur un autre de mes sites : https://cuirs.71site.fr/ conçu avec le CMS adHoc le même type de menu, à droite sur mobile est fixé, et fonctionne de manière tout à fait satisfaisante.
Ci dessous le code d'intégration du bouton et du menu simplifié tel qu'il se présente ci-contre. A placer dans une boite libre. Notez bien que les liens présentés peuvent être internes ou externes au site... A vous de composer le menu qui vous semble le plus utile...
<div style="float : right ;">
<div>
<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><input id="md-1" name="md-categorie" type="radio" /> <label for="md-1">CatégorieA</label>
<article class="md">
<p><a href="articles.php?lng=fr&pg=20&mnuid=19&tconfig=0" target="_top">¤ ItemA1 (camera_interne)</a></p>
<p><a href="https://github.com/pixedelic/Camera" target="_blank">¤ ItemA2 (github_camera)</a></p>
</article>
</div>
<div><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>
</div>
<titre>Menu2</titre>
<div><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>
</div>
<div><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>
</article>
</div>
</section>
</div>
</bandeau>
</bouton>
</li>
</ul>
</div>
</div>
Ce sont les parties surlignées en blanc qu'il faudra adapter pour votre menu.
Le bouton est placé à droite (d'où float:right; ) : à modifier pour le placer à gauche, et donc également les différentes positions dans le style... (me contacter au besoin...)
La notion de survol est absente des mobiles. C'est donc au clic que réagira ce menu. Y compris pour le fermer (clic au dehors). Il ne se fermera donc pas tout seul, contrairement à cette version sur ordinateur, dès qu'on ne le survole plus. Pour permettre de naviguer dans ce menu, j'ai ajouté ce conteneur
<div style="background-color: transparent; max-height: 500px; overflow: auto;">...</div>
qui permet de mettre en place un ascenseur vertical dès que le contenu dépasse 500px. Valeur à adapter évidemment...
Pas d'inquiétude sur l'imbrication du code. Une fois copié et collé, vous n'avez plus qu'à ajouter les titres, catégories (label) et items nécessaires, et ce, possible directement dans l'éditeur. Voir aussi comment insérer les classes .new et .maj. pour les items à mettre en évidence... là encore à adapter à vos besoins...
Il sera peut-être nécessaire de rendre transparent le fond de votre boite libre... Tout dépend de la position de cette boite, en MOBILE (et/ou en WEB si vous le souhaitez)... donc, pour cela et pour tout le reste...
N'hésitez pas à poster sur le forum de ce site pour plus d'informations ou d'aides, ou directement par courriel, via le Contact de ce site.
Catégorie : - Autres astuces en CSS
Page lue 94429 fois
