begin process at 2012 05 29 13:38:32
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

menu reste ouvert affichage de la page


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

menu reste ouvert affichage de la page

vendredi 29 avril 2011 à 09:11:12 | menu reste ouvert affichage de la page

ju0123456789

Bonjour,

J'ai un menu vertical en CSS (entre autres), et quand j'arrive sur ma page je voudrais laissé ouvert par défaut un element du menu. Voici mon CSS (je pense que le JS sera inutile là)

Code :
ul.menu, ul.menu ul {
  padding: 0;
  width: 180px;
  list-style-image : url(/images/menu/on.gif);
  margin-left: 25px;
  text-align:left;
  border-width:0px;
  border-color:#000;
  border-style:solid;
}

ul.menu ul
{
  list-style:none; 
}

ul.menu a {
  display: block;
  text-decoration: none;
  border: 0px #000 solid;
  font-size:12px;
  height:7px;
}

ul.menu li {
  margin-top: 1px;
  list-style-type:none;
}

ul.menu li a, ul.menu ul.menu li a {
  background: transparent;
  color: #000;	
  padding: 0.5em;
}

/* Quand on passe la souris sur les liens */
ul.menu li a:hover, ul.menu ul.menu li a:hover {
  font-weight:bolder;
  list-style-image : url(/images/menu/off.gif);
}

ul.menu li ul li a, ul.menu ul.menu li ul li a {
  background: transparent;
  color: #000;
  padding-left: 17px;
}

/* quand on passe la souris, 2e niveau (Si pas remplit = 1er niveau) */
ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
  font-weight:bolder;
  border-left: 0px #000 solid;
  padding-left: 8px;
}

/* quand on passe la souris, 3e niveau (Si pas remplit = 1er/2e niveau) */
ul.menu ul.menu li a:hover {
    border-left: 0;
    padding-left: 0.4em;
}

/* 2e niveau dans le cas où ça découlerais un 3e niveau */
ul.menu ul.menu {
    border-left: 0px #96d004 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
    font-weight:bolder;
	 color:#09f;
}
div.panel {
    border: 1px #000 solid;
    padding: 5px;
    margin-top: 1px;
}

ul.menu div.panel a, ul.menu div.panel li a:hover  {
    display :inline;
    color: #666;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    font-weight: bold;
}
ul.menu div.panel a:hover {
    color: #000;
    text-decoration: underline;
}



et mon HTML (alors là je suis désolé ya une partie de PHP imbriquée dedans, mais bon pour vous je pense que la lecture sera facile)
Code HTML :
<ul class="menu">
  <li><a href="#">Portables</a>
    <ul class="acitem"><?php
    AfficheOptionMenu( 'LAP@13P', '13"' );
    AfficheOptionMenu( 'LAP@14P', '14"' );
    AfficheOptionMenu( 'LAP@15P', '15"' );
    AfficheOptionMenu( 'LAP@16P', '16"' );
    AfficheOptionMenu( 'LAP@17P', '17"' );
    AfficheOptionMenu( 'LAP@EEE', 'NetBooks' ); ?>
    </ul>
  </li>
  <li><a href="#">Stations</a>
    <ul class="menu nestedmenu acitem">
      <li><a href="#" id="a">Bureautique</a>
        <ul class="acitem">
          <li><a href="/html/produitsalavente.php?rubrique=bur">TOUS</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=bur&amp;sr=bas">Basique</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=bur&amp;sr=adv">Avanc&eacute;e</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=bur&amp;sr=eco">&Eacute;cologique</a></li>
        </ul>
      </li>
      <li><a href="#" id="b">Cr&eacute;ation</a>
        <ul class="acitem">
          <li><a href="/html/produitsalavente.php?rubrique=cre">TOUS</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=cre&amp;sr=img">Image / Photo</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=cre&amp;sr=vid">Vid&eacute;o</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=cre&amp;sr=3dm">3D</a></li>
        </ul>
      </li>
      <li><a href="#" id="c">Gaming</a>
        <ul class="acitem">
          <li><a href="/html/produitsalavente.php?rubrique=gam">TOUS</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=gam&amp;sr=bas">Gamer basique</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=gam&amp;sr=adv">Gamer avanc&eacute;</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=gam&amp;sr=seb">Hard Core Gamer</a></li>
        </ul>
      </li>
      <li><a href="#" id="d">Multimedia</a>
        <ul class="acitem">
          <li><a href="/html/produitsalavente.php?rubrique=mul">TOUS</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=mul&amp;sr=mhd">Multimedia HD</a></li>
          <li><a href="/html/produitsalavente.php?rubrique=mul&amp;sr=mct">Multimedia MediaCenter</a></li>
        </ul>
      </li>
      <li><a href="/html/produitsalavente.php?rubrique=cal">Calcul</a></li>
      <?php
      AfficheOptionMenu( 'DES', 'Design' );
      AfficheOptionMenu( 'PI3', 'Intel&reg; i3' );
      AfficheOptionMenu( 'PI5', 'Intel&reg; i5' );
      AfficheOptionMenu( 'PI7', 'Intel&reg; i7' );
      AfficheOptionMenu( 'FER@QUA', 'Quadro&reg; Fermi' );
      ?>
    </ul>
  </li>
  <li><a href="#">Serveurs</a>
    <ul class="acitem"><?php
      AfficheOptionMenu( 'TOW', 'Serveurs Tour' );
      AfficheOptionMenu( 'S1U', 'Serveurs 1U' );
      AfficheOptionMenu( 'S2U', 'Serveurs 2U' );
      AfficheOptionMenu( 'STO', 'Serveurs Storage' ); ?>
    </ul>
  </li>
</ul>


Si quelqu'un aurait une idée de comment je peux procéder.. merci.

Ju'


Cette discussion est classée dans : menu, border, ul, li, hover


Répondre à ce message

Sujets en rapport avec ce message

Menu vertical [ par Sogeekette ] Bonjour,Je souhaite créer un menu vertical pour un site, ça marche sauf que je peux mettre que 12 différentes parties maximum et j'en ai 14 à insérer liste et menu déroulant [ par inaden ] Bonjour,Voilà, j'essaie de m'appliquer à faire les choses bien maintenant que j'en ai compris le bienfondé.Donc utilisation de CSS à mort.J'ai suivi l liste imbriquée et pseudo class hover [ par inaden ] Bonjour,j'étais sur un site et tout se passais bien. On m'a fait remarquer que explorer 6 n'afiichais pas mes menus déroulants.Il passe partout sur ma Menu déroulant disparait au survol [ par badziz ] Bonjour, j'ai récupéré un menu déroulant en css qui fonctionne parfaitement sous Firefox. Mais sous IE je ne peux survoler que les 2 premieres sous ca problème affichage a:hover span avec IE, Chrome et safari [ par natalide78 ] Bonjour, j'ai un peu souci d'affichage concernant un menu qui s'affiche au survol de la souris, le tout est fait en CSS. le sous menu s'affiche corre changer la couleur d'un element [ par debra54 ] [i]bonsoir a tous ,voila je voudrais créer un menu horizontale qui a chaque clique me redirige vers une page (ou lien ) et cette meme case est alors Probleme affichage menu sur IE9 (css) [ par ju0123456789 ] Bonjour, Je suis en train de dev un petit site vitrine, tout se passe bien pour le moment, sauf une chose, j'ai l'image de fond de mon menu (quand on Problème décalage menu déroulant [ par badziz ] Bonjour, j'ai un menu déroulant qui fonctionne parfaitement mais lorsque je passe d'une catégorie à une sous-catégorie, la case de la catégorie s'agra javascript et ajax [ par wilto ] Bonjour à tous, Voilà j'ai un problème: sur mon site j'utilise l'ajax pour l'affichage des pages seulement dans une des pages j'aimerai y insérer un Probléme d'ajout d'un sous menu à un sous menu [ par msmcml ] Salut, j'ai un probléme avec ce menu je n'arrive pas à ajouter des sous menus aux sous menus, jeveux qu'il soit sur 3 niveaux et non pas seulement 2,


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 5,008 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales