• Boutons menu pour colonne ou article

    exemple ici

    --------------------------

     

     

    Code à coller dans la source  HTML

    -

    <div id='cssmenu'><ul>
       <li class='last'><a href='ici votre page.html'><span>ici le nom de votre page</span></a></li>
    <li class='last'><a href='ici votre page.html'><span>ici le nom de votre page</span></a></li>
    <li class='last'><a href='ici votre page.html'><span>ici le nom de votre page</span></a></li>
    <li class='last'><a href='ici votre page.html'><span>ici le nom de votre page</span></a></li>
    </ul>
    </div>

     

     

     

     

    Code à coller dans le  Css

     

    /*bouton menu */

    #cssmenu,#cssmenu ul,
     #cssmenu ul li,
     #cssmenu ul li {
       margin0;
       padding0;
       border0;
       list-stylenone;
       line-height1;
       displayblock;
       positionrelative;
       -webkit-box-sizingborder-box;
       -moz-box-sizingborder-box;
       box-sizingborder-box;
     }

    #cssmenu {
      width200px;
      font-familyHelveticaArialsans-serif;
      color#ffffff;
    }
    #cssmenu ul ul {
      displaynone;
    }
    #cssmenu ul li.active ul {
      displayblock;
    }
    .align-right {
      floatright;
    }

    #cssmenu ul li {
      padding15px 10px;
      border-left3px solid #1682ba;
      border-right3px solid #1682ba;
      border-top2px solid #1682ba;
      border-bottom2px solid #1682ba;
      cursorpointer;
      z-index1;
      font-size14px;
      font-weightbold;
      text-decorationnone;
      color#ffffff;
      text-shadow1px 2px rgba(0000.35);
      background-webkit-linear-gradient(#36aae7#1fa0e4);
      background-moz-linear-gradient(#36aae7#1fa0e4);
      background-o-linear-gradient(#36aae7#1fa0e4);
      background-ms-linear-gradient(#36aae7#1fa0e4);
      backgroundlinear-gradient(#36aae7#1fa0e4);
      box-shadowinset 1px rgba(2552552550.15);
    }
    #cssmenu ul li a:hover,
    #cssmenu ul li.active a,
    #cssmenu ul li.open {
      color#000000;
      background-webkit-linear-gradient(#1fa0e4#1992d1);
      background-moz-linear-gradient(#1fa0e4#1992d1);
      background-o-linear-gradient(#1fa0e4#1992d1);
      background-ms-linear-gradient(#1fa0e4#1992d1);
      backgroundlinear-gradient(#1fa0e4#1992d1);
    }

    *

    Ce que vous pouvez modifier dans le code 

    -----------------------------------------------

    ce qui est en rouge  = la largeur du bouton

    en vert = les marges du texte 

    en orange  = les bordures du cadre

    en bleu  = la taille et la couleur du texte 

    en rose = la couleur des boutons 

    attention !! sur la ligne des background , placez deux couleurs proches l'une de l'autre

     

    à répéter dans les cinq lignes ( regardez ce qui est en rose dans le code)

    *

    pour les menus survoler

    ---------------------------

    en mauve = la couleur du texte

    en bordeaux =  La couleur du bouton

    *

     

    Un tout grand merci à Nono 59 pour m'avoir permis de vous offrir ce code

    Vous pouvez visiter son magnifique blog ICI et lui dire personnellement merci  

    *

    « Régler la taille de l'écriture dans la page "archives"curseurs vaches »