En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Menu escamotable spécial Mobile
 
 
 
    Imprimer la page...
    Imprimer la section...

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 :

Des boutons fixes déployables

CSS Textes en accordéon 

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

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&amp;pg=20&amp;mnuid=19&amp;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.


Date de création : 24/04/2020 @ 16:18
Catégorie : Astuces - Autres astuces en CSS
Page lue 64100 fois


Réactions à cet article


Réaction n°3 

par Luxman le 03/07/2020 @ 15:43

Hello Jean-Denis.

I have finally updated my friend Laurents homepage https://www.wehrle-alsace.com/ from 5.02.09 to 5.03.03 using your "menu escamotable spécial Mobile" and I think it works. Could not get your "titre" to work. Its not your fault. When I put a link at "titre", it just behaved with the font, size and color from the style.css. Dont know where I have made the mistake so I made a copy off your code "label" and called it "labellink" and used it. So Im happy.

Best regards

René

Thank you and keep up the good work.


Hello René,

Merci à toi d'avoir utilisé ce menu. Bravo pour ton adaptation...
Il n'y a pas de souci pour le remplacement d'une balise par une autre... le principal étant que cela fonctionne à ton goût !

Très cordialement,

Thank you for using this menu. Bravo for your adaptation ...
There is no problem replacing one tag with another ... the main thing is that it works to your liking!

Very cordially,

Jean-Denis


Réaction n°2 

par cdombo le 05/05/2020 @ 15:50

Hello JD

Je dirais même plous : excellent ! ....as usual

71site.....71 sacré site cool

CdomBo


Bonjour Dominique,

Un très grand merci pour cette remarque... que j'apprécie franchement ! biggrin

En ces temps troublés... à plus d'un titre... elle me fait très plaisir.

Très cordialement,

Jean-Denis


Réaction n°1 

par Luxman le 29/04/2020 @ 15:06

Hi Jean Denis.What can I say.Thanks! Thanks! and once again thank you. I'll probably find out using the menu.I also like your left menu at https://cuirs.71site.fr/ Its also fine.You have so many great ideas (codes) gathered on 71site.fr. .Don't understand French so use google translate.Best regardsRené (Luxman old Japanese hifi)


Hello René,

Merci de ces commentaires. Et merci à toi de m'avoir suggéré ce menu...
C'est très souvent ainsi que les idées de recherche viennent...
Ta réaction m'incite à continuer !

Très cordialement,

Thank you for these comments. And thank you for suggesting this menu ...
This is very often how research ideas come ...
Your reaction encourages me to continue!

Very cordially,

Jean-Denis