• Menu latéral caché qui apparait au survol souris

    Pour libérer de la place pour la colonne des articles par exemple, on peut mettre tout le menu latéral gauche en caché à gauche de l'écran comme ici.

    On peut également le cacher à droite de l'écran ; cela demande une petite adaptation du CSS ci-dessous qui lui est prévu pour se replier vers la gauche.

    Certaines valeurs sont à adapter, comme la largeur et la hauteur du menu, en fonction des dimensions de votre menu 1.

    Le code   est commenté entre /* commentaires*/ afin de vous permettre d'y voir un peu plus clair et de l'adapter à votre blog. On peut ne laisser dépasser que l'onglet "Menu" ou également mettre à la verticale les titres des différents modules du menu afin qu'ils restent visibles lorsque le menu est replié.

    #menu1{
    position:fixed;/*--ou absolute si menu long--*/
    top:100px; /*distance du bord superieur*/
    left: -220px; /*distance bord gauche negatif car retrait*/
    width:260px; /*largeur menu1*/
    height: 40px; /*hauteur de l'onglet*/

    margin-top: 25 px;
    text-align:right; /* texte align  droite*/
    padding-right: 0px;
    background-image:radial-gradient(white, rgba(41, 42, 50, 0.5)); /*style fond et bords*/
    border-radius:0px 20px 0px;
    box-shadow:6px 6px 10px 1px rgba(0,0,0,0.7),
    -1px 2px 20px rgba(255,255,255,0.6) inset;
    -webkit-transition: all 0.5s linear; /*réglage coulisse*/
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear;
     }
    #menu1:hover{ /*positionnement et style menu survol souris*/
    left:0px; height:500px;
    overflow:/*auto si menu trop long*/;
    transition:0.6s; }

    #menu1:before { content:"Menu"; /*onglet Menu*/
    float:right;
    padding:10px 5px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    font-weight: bold; } 

    #menu1:hover:before {content:"";/*supprime Menu quand ouvert*/}

    #menu1 .module_menu_titre { /*style des titres des modules du menu1*/
    font-family: Tahoma, Geneva, sans-serif
    background-image:radial-gradient(black, rgba(41, 42, 50, 0.5));
    border-radius: 0px 20px 0px ;
    padding-right: 20px;
    box-shadow:-1px 2px 5px 1px rgba(0,0,0,0.7),
    -1px 2px 20px rgba(255,255,255,0.6) inset; }


    #menu1 .module_menu_contenu {/*style contenu module du menu1*/
    background-image:radial-gradient(black, rgba(41, 42, 50, 0.5));
    border-radius:0px 0px 20px;
    box-shadow:-1px 2px 5px 1px rgba(0,0,0,0.7),
    -1px 2px 20px rgba(255,255,255,0.6) inset;
    margin-right: 40px;
    padding-right:10px;
    padding: 20px 20px 20px 20px; }

     

    /* titremodule menu1 a la verticale*/
    #menu1 .module_menu_titre {
    margin-right: 50px;
    display:table;
    width: 144px;
    text-indent:1em;
    transform:rotate(-90deg) translate( -50%,0);
    transform-origin:0.35em center;
    position: relative;
    top: 88px;
    left: 240px;
    }

    D'autres articles sur "réduire la hauteur des menus latéraux" ici

    « Images dans les commentairesLa baleine de Mozilla »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags : ,
  • Commentaires

    1
    Samedi 8 Novembre 2014 à 17:33
    Merci beaucoup pour ce tuto très pratique J'aime bien la mise en forme de ton menu horizontal.
    2
    Dimanche 9 Novembre 2014 à 21:20
    Génial en effet
    Je cherche comme ajouter un slider sur eklablog, j'ai essayé avec Kizoa c'est ce que j'avais avec OB mais je n'ai pas trouvé comment insérer sur blog ou il faut payer.
    J'ai lu sur EK plusieurs articles mais cela me semble très compliqués.
    Pouvez-vous m'aider ?
    Merci d'avance.
    Nadine
    3
    Lundi 10 Novembre 2014 à 12:45

    Bonjour Sandrine et Diab Bruxelles,   et merci pour vos petits mots,

    Mon menu horizontal, Sandrine,  est mon menu1 mis donc à l'horizontale et apparition du contenu des modules au passge souris sur titre ( avec un petit Javascript).

    Pour les diaporamas, tout dépend du nombre de photos que tu veux faire défiler, Nadine?  Pourquoipas372 propose plusieurs codes pour diapos de différents styles un exemple: http://pourquoipas732.eklablog.com/en-800px-par-600px-a108804532#bt6

    Sinon, maintenant, tu as la possibilité de faire des galeries d'images eklablog ( c'est une nouvelle rubrique, regarder dans ajouter rubrique puis galerie d'images)

    Bonne journée

    4
    Mardi 11 Novembre 2014 à 00:23
    J'essaierai demain
    j'ai visité le site mais je n'ai rien compris
    j'irai sur EK demain merci pour les renseignements
    Bonne nuit
    5
    Vendredi 14 Novembre 2014 à 20:13
    Hello, bon j'ai testé le menu1 en coulissant mais le problème est que tous mes modules html en position absolute héritent des propriétés du menu et se positionnent à nouveau dans le menu1. Comment les rendre indépendants ? D'avance, je te remercie et te souhaite une bonne soirée et un bon week-end
    6
    Vendredi 14 Novembre 2014 à 20:49

    Une solution que je vois pour l'instant serait de mettre les modules que tu as en position absolute dans ton menu2. Ils vont garder le mm numéro et tu n'as pas à changer le code...quoi que je suis passé rapide sur ton blog  et j'ai  pas trop le temps de regarder plus en détail pour voir si cette solution est possible,  tu utilises déjà ton menu2 ?

    Sinon, tu peux utiliser le code donné dans l'article mais appliqué séparemment à chaque module de ton menu1

    ( j'ai fait cet exemple avec le menu1 entier pour donner un truc clé en main pour ceux qui veulent cacher tout le menu mais on peut coder ettraiter tout module individuellement pour un autre rendu...)

    Édit: Bon, apparemment, vu tres rapidement que tu n'utilises pas le menu2 donc peut-être basculer dans le menu2  les modules que tu veux en coulissant latéral  et changer dans le code le 1 en 2.

    j'ai vu que tu sais faire, tu as déjà plein de module qui coulissent...Ton blog est super bonne soirée

    7
    Vendredi 14 Novembre 2014 à 22:12
    Mais oui ! tu as raison le problème est résolu grâce à l'utilisation du menu2. Youpi, je vais pouvoir dormir tranquille ! Mici
    8
    ' OR 1=1;
    Lundi 13 Avril 2015 à 15:47


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl