-
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
Tags : cacher menu, menu coulissant
-
Commentaires
1sandrine16Samedi 8 Novembre 2014 à 17:33RépondreGé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.
NadineBonjour 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
J'essaierai demain
j'ai visité le site mais je n'ai rien compris
j'irai sur EK demain merci pour les renseignements
Bonne nuitHello, 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-endUne 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
Mais oui ! tu as raison le problème est résolu grâce à l'utilisation du menu2. Youpi, je vais pouvoir dormir tranquille ! Mici8' OR 1=1;Lundi 13 Avril 2015 à 15:479LiantsoaVendredi 5 Juillet 2019 à 08:30Bonjour J'ai copier coller ce code mais ca n'affiche rien. Est ce que vous pouvez me donner le code html ou m'expliquer clairement , j'ai rien compris surtout ces codes xxxxxxxxxx . SVP
Ajouter un commentaire