•  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....

    Partager via Gmail Yahoo! Google Bookmarks

    9 commentaires
  • Un joli module pour présenter les AmisBlogs
    il ne vous prend pas de place dans la colonne du menu latéral.

    Celui-ci fait 240px de haut  ( et 240 de large) mais peut contenir autant d'images que vous voulez et
    les bannières des amis défilent avec la molette de la souris.

     

     

        Faire défiler avec  la souris

    BLOGS AMIS

    L'atelier du Chateau

    Le blog de danito

    Le blog de Chatlu

    Pourquoi pas !

    Le blog de Kinou

    La pensine mutine

    ---

    ---

    ---

    ---

    ---

     

     

     

     

    Explications:

     

     

    1- Créer un module simple.

    2- Remplir votre module avec liste de liens ou de liens images comme c'est le cas ici ( insérer une vignette, sélectionner l'image et insérer le lien du blog.)

    3- Passer coté éditeur de code source avec l'icone <> de l'éditeur de module.

    4- Entourer le code html présent dans l'éditeur en plaçant en premier, avant le code

    la balise    <div id="monscroll" class="mod">

    et en dernier, après le code,  la balise    </div>

    5- Ajouter à la suite de </div> le style qui va permettre de réduire le module dans la colonne de menu , afficher la barre de défilement mais la placer à l'extérieur du module afin qu'elle ne soit pas visible.

    <style><!--

    #monscroll {

        width: 400px;

        height: 220px; /*hauteur du module dans la colonne*/

        overflow: auto;

        position: relative;  }

     .mod p{

    width:240px; /*largeur du module dans la colonne*/}

    /*pour mettre un cadre aux images du module*/

    #monscroll img{

    border: 4px ridge #b7cbcb;  /*bordure autour des images des images*/   }

    --></style>

    6- Cliquer "OK" fenêtre code source.

    7- Enregistrer fenêtre éditeur

     

     

    Partager via Gmail Yahoo! Google Bookmarks

    11 commentaires
//script feuille de style suppl