Tutorial]Créer un menu en css

[Invité]

Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.

Connexion avec identifiant et mot de passe

[Diabolo]

Slt,
Comme vous avez remarqué, j'ai crée un nouveau menu en haut à gauche du site en css 

Très simple à mettre en oeuvre et sans aucune requête serveur en +

Je me suis inspiré de ce très bon site (Incontournable)
http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique

1/Aller ver Créer un bloc en HTML dans admin>>blocs
Pour ceux qui utilise le WYSWIG vous avez un onglet "html" pour coller votre code html

Coller le code html dans le bloc:

Code:

<ul id="menu">
<li><a href="/">Accueil</a></li>
<li><a href="/forum.html">Forums</a></li>

<li><a href="/Downloads.html">Téléchargements</a></li>
<li><a href="/Content.html">Documentation</a></li>
<li><a href="/Web_Links.html">Liens Web</a></li>

</ul>

Sauvegardez et activez le bloc en lui donnant le nom de "sommaire"

Vous verrez juste la liste à puce ds le bloc, pour l'instant.

2/Ouvrir votre fichier .css et rajouter le code css donné par le site

3/Enregistrer l'image de fond dans >>themes/style/    à coté de votre style.css

Voila c'est fini.
Vous pouvez modifier le code.css du site pour modifier les couleurs, de même, vous pouvez changer l'image de fond 

Note: Pour ceux qui utilisent un thème Mx

Vous pouvez très facilement agrandir les blocs de gauche : Ouvrir theme.html de votre thème:

Rechercher:

Code:

<!-- START left_noblocks -->
          <td class="blocksLeft" width="195" valign="top">
<div id="leftcolumn" style="width: 195px;">
            <!-- START blocks_left_loop -->
            <!-- START block_left -->
            <table width="100%" border="0" cellspacing="0" cellpadding="2" style="margin-bottom: 5px;">
              <tr>
                <td align="center" class="boxtitle">{BLOCK_TITLE}</td>
              </tr>
              <tr>
                <td colspan="2" valign="top" class="boxcontent">{BLOCK_CONTENT}</td>
              </tr>
            </table>
            <!-- END block_left -->

Remplacer la valeur de width par celle désirée en px.  195 dans notre exemple

Ouvrir ensuite style.css
rechercher

Code:

.blocksLeft {
wiidth: 195px;
;
}

remplacer de même width par la valeur désirée 195px dans notre exemple

Voila tout est possible n'hésitez pas à retravailler votre fichier css pour modifier les couleurs, etc...

De même, pour votre liste à puce si vous souhaitez rajouter, supprimer, modifier les liens