• Module menu contenu caché déroulant survol souris sur le titre

     Afin de réduire la hauteur de votre menu latéral, il s'agit de cacher le contenu de chaque module de menu et au passge de la souris sur le titre du module, le contenu se déroule.

     

    Une fois le menu latéral constitué avec les outils de l'interface eklablog ( /!\ ici, le menu sur la gauche de l'article est factice, pour vous montrer le rendu mais les liens ne mènent nulle part !), 

     

    A - clic droit souris sur le titre d'un module:
    Pour exemple ici, clic sur "module de liens".

    Dans la fenêtre -de dialogue du navigateur- qui s'ouvre, clic sur "examiner l'élément".
    Dans le bas de la page, s'affiche sur fond blanc le code html de la page avec la ligne concernant le module en sélectionné/surligné.
    Ainsi, on repère le  module de liens et son numéro; 
    Dans notre exemple,   module_menu144577288

    Comme il s'agit d'un id, son sélecteur (pour appliquer du CSS) sera:

    #module_menu144577288

    Nous voilà donc en possession du sélecteur qui va nous permettre d'appliquer un style bien particulier à notre module de menu "module de liens"" !

     

    B - Il nous faut connaitre la hauteur des titres de nos modules ( à retrouver dans "modifier le thème" >> >"menu 1 ou 2" >> "titre module" > format.

    Ici, les titres font 60px de haut.

    Le principe:
    Nous allons ajouter un CSS qui affiche le module avec une hauteur de 60px, la hauteur du titre;  
    Puis un CSS qui affiche le module de sa réelle hauteur au survol du titre avec la souris:

     

    /*effet Module de liens*/

     #module_menu144577288 { 
    overflow: hidden; 
    height: 62px;  /*60px etant la hauteur du titre du module*/
    -webkit-transition: all 1.5s ease 0.15s; 
    -moz-transition: all 1.5s ease 0.15s;
    transition: all 1.5s ease 0.15s; }

    #module_menu144577288:hover {
    height:218px; /*hauteur du module en entier*/}

    /*FIN effet module de liens*/

     
    C - On renouvelle la procédure pour chaque module du menu: module "derniers articles":
    1- clic droit sur titre
    2-Récupérer id du module module_menu144577290
    3- ajouter CSS adapté aux dimensions titre, hauteur module entier

     

    /*effet Module derniers articles*/

     #module_menu144577290 { 

    overflow: hidden; 
    height: 62px;  /*60px etant la hauteur du titre du module*/
    -webkit-transition: all 1.5s ease 0.15s; 
    -moz-transition: all 1.5s ease 0.15s;
    transition: all 1.5s ease 0.15s; }

    #module_menu144577290:hover {height:218px; /*hauteur du module en entier*/}

    /*FIN effet module derniers articles*/

     

    N'hésitez pas à intervenir par le biais des commentaires si vous rencontrez quelques difficultés....

    « examiner un élément de la page et trouver son sélecteurPremière lettre de paragraphe // lettrine »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags : , ,
  • Commentaires

    1
    Jeudi 16 Avril 2015 à 08:44

    Bonjour,

    J'espère que vous allez bien ?

    Suite aux réponses que vous m'avez donnez pour ajouter des amis dans un bloc déroulant avec manette (ou bouton) je n'arrive pas. Et je voudrais aussi mettre une manette à des articles, mais comment ?

    Merci pour la réponse.

    En attendant, bonne journée à vous.

    2
    Jeudi 16 Avril 2015 à 08:47

    (suite message)

    Par contre j'ai retirée certaines fonction en haut, ce qui rend le blog plus clair.

    Et est ce possible de rapprocher les catégories d'articles qui sont très espacées ?

    Merci pour votre réponse qui je sais, me sera de grand secours.

    Amitiés. 

     

    3
    Jeudi 16 Avril 2015 à 12:47

    Bonjour Mamieninette, 

    Ici, ça va. C'est presque l'été au niveau des températures mais cela ne va surement pas durer..

    Pour ajouter une image "blogs amis", on se retrouve sur cet article plutot
    http://bloginscription.ek.la/module-avec-blogs-amis-a114984806 et tu m'expliques ce que tu fais et où cela bloque . Okay ?

     Et je voudrais aussi mettre une manette à des articles, mais comment ?

    Tu voudrais aussi ajouter l'effet "barre de défilement" à d'autres modules de ton menu sur le coté ? c'est ça ? ou tu voudrais mettre la barre de défilement dans les articles eux-mêmes, pour qu'ils apparaissent en moins longs sur le blog ?

    Que veux tu dire par "rapprocher les catégories un peu trop espacées" ? donne moi un exemple avec le titre, nom des catégories ou leur emplacement sur le blog...

    Bonne journée

    4
    Jeudi 16 Avril 2015 à 14:44

    Bonjour Maximum,

    Merci.Je vais y aller.

    Pour les barres de défilement, c'est pour les autres modules : qui a connu çà ? les années 60, etc....

    A tout de suite.

    Bises.

    5
    Dimanche 10 Mai 2015 à 15:40

    Merci pour tes explications chez Maurice, mais je crois que je faisais ainsi, mais étourdie comme je suis, j'ai sans doute voulu aller trop vite !

    Ton blog à l'air d'une mine d'or ! je garde ton lien en favoris !

    Merci pour tout ce que tu partages

    Je suis du sud dans le 06.......

    6
    Jeudi 4 Juin 2015 à 19:27

    Bonjour Monsieur,

    Sauriez vous m'expliquer (pour une nulle !) comment mettre Windows 7 sur mon nouveau Pc, qui est sur Windows 8.1 ??

    Je n'aime pas du tout ce 8... Peux t on revenir sur 7 ???

    Mon autre PC est sur 7, du coup je me sers du vieux, plus facile pour moi........Mais c'est dommage puisque j'en ai un neuf..........

    Merci si vous savez et pouvez me dire !

    Je suis allé consulter des forums mais je ne comprends pas

    ce qu'il raconte ( DD, BIOS, Drivers, etc )

    Bonne soirée

    7
    Mercredi 23 Septembre 2015 à 20:12

    Bonsoir, 

    Désolé Ghislaine, ton commentaire était passé aux oubliettes !

    As-tu toujours le CD d'installation de windows 7 ?

     

    (ou tu connais quelqu'un qui a gardé le sien)

     

    car si tu n'as le CD windows 7, je ne vois pas trop comment tu pourrais faire pour le ré-installer à la place de windows 8.1

    8
    Lundi 26 Octobre 2015 à 10:44

    Bonjour Maximum 34,

    Je reviens ici pour savoir comment gérer un flux RSS ? Peut on les retirer ?

    Je m'aperçois qu'avec google, des choses paraissent et ne le voudrait pas.

    Merci de ta réponse.

    J'espère que tu vas bien et te souhaite une bonne journée.

     

    9
    far
    Dimanche 17 Avril 2016 à 15:25
    merci pr ce tuto


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl