Mise en page menu CSS

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
lordbdp
Gecko
Messages : 87
Inscription : 22 sept. 2005, 19:51

Mise en page menu CSS

Message par lordbdp »

Bonjour,

J'ai trouvé ce menu http://www.xs4all.nl/~peterned/examples/cssmenu.html comme exemple.

J'ai voulu l'adapter à mon site mais tous les blocs restent ouverts. J'ai du cafouiller quelquepart mais je ne voit pas où (aperçu du resultat : http://www.e-central.fr/test/test_index.php)?

Partie CSS :

Code : Tout sélectionner

.gauche {
float:left;
width: 140px;
height: 100%;
}

Code : Tout sélectionner

#menugauche ul,#menugauche li,#menugauche a {
    display:block;
    margin:0;
    padding:0;
    border:0;
  }

#menugauche ul {
    width:150px;
    border:1px solid #9d9da1;
    background:white;
    list-style:none;
  }

#menugauche li {
    position:relative;
    padding:1px;
    padding-left:26px;
    background:url("imgs/green.gif") no-repeat;
    z-index:9;
  }
#menugauche li.folder  { background:url("imgs/green.gif") no-repeat; }
#menugauche li.folder ul {
      position:absolute;
      left:120px; /* IE */
      top:5px;
    }    
#menugauche li.folder>ul { left:140px; } /* others */

#menugauche a {
    padding:2px;
    border:1px solid white;
    text-decoration:none;
    color:gray;
    font-weight:bold;
    width:100%; /* IE */
  }
#menugauche li>a { width:auto; } /* others */

#menugauche li a.submenu {
    background:url("imgs/sub.gif") right no-repeat;
  }

  /* regular hovers */

#menugauche a:hover {
    border-color:gray;
    background-color:#bbb7c7;
    color:black;
  }
#menugauche li.folder a:hover {
      background-color:#bbb7c7;
    }
  
  /* hovers with specificity */
  
#menugauche li.folder:hover { z-index:10; }
    
#menugauche ul ul, #menugauche li:hover ul ul {
    display:none;
  }

#menugauche li:hover ul, #menugauche li:hover li:hover ul {
    display:block;
  }
Partie HTML :

Code : Tout sélectionner

<div class="gauche">
        <ul id="menugauche">
          <li><a href="#"> blabla 1 </a></li>
    <li class="folder">      
      <a href="#" class="submenu"> blabla 2 </a>
      <ul>
        <li><a href="#"> blabla 3 </a></li>
        <li class="folder">
          <a href="#" class="submenu"> blabla 4</a>
          <ul>
            <li><a href="#"> blabla 5 </a></li>
            <li><a href="#"> blabla 6 </a></li>
            <li><a href="#"> blabla 7 </a></li>
          </ul>
        </li>
        <li><a href="#"> blabla 8 </a></li>
      </ul>
    </li>
    <li class="folder">
      <a href="#" class="submenu"> blabla 9</a>
      <ul>
        <li><a href="#"> blabla 10 </a></li>
        <li><a href="#"> blabla 11 </a></li>
        <li><a href="#"> blabla 12 </a></li>
      </ul>
    </li>
    <li><a href="#"> blabla 13 </a></li>
        </ul>
      </div>


Merci d'avance...
anselme

Message par anselme »

j'utilise ce menu depuis longtemps pour remonter a la source il faut aller la > http://www.dean.edwards.name/IE7/compat ... Menus.html

et meme la > http://www.meyerweb.com/eric/css/edge/menus/demo.html
Invité

Message par Invité »

J'y suis allé mais j'ai rien compris de ce que je devait faire :shock: ! French only for me please !
lordbdp
Gecko
Messages : 87
Inscription : 22 sept. 2005, 19:51

Message par lordbdp »

zut! j'm'étai pas logué !
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités