28172 sujets

CSS et mise en forme, CSS3

Comment avoir un sous-menu avec un Menu simple image

Bonjour,

comme le titre l'indique, j'ai un menu avec une image simple et j'aimerais y intégrer un sous-menu. voir demo

Est-ce qu'un sous-menu en css peut s'intégrer ou un sous-menu en Javascript?

Avez-vous des codes à suggérer?

voici mon code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#menu_principal {
	float: left;
	height: 60px;
	text-align: center;
	width: 500px;
	background:url(menu_principal.jpg) no-repeat top;
}

/* MENU PRINCIPAL CONNECTER */
#menu_connect { width: 499px; height: 60px; position: relative; z-index:0; float:left; overflow:hidden; }
#menu_connect #menunav { margin-top: 0px; padding: 0px; }
#menu_connect #menunav li { display: inline; }
#menu_connect #menunav li a { float: left; width: 60px; height: 0; padding-top: 60px; }
#menu_connect #menunav li a { background-image: url(menu1_connect.jpg); background-repeat: no-repeat; }

/* BUTTONS */
#menu_connect #menunav li#lien1 a { background-position: 0 0; }
#menu_connect #menunav li#lien2 a { background-position: -62px 0; }
#menu_connect #menunav li#lien3 a { background-position: -124px 0; }
#menu_connect #menunav li#lien4 a { background-position: -186px 0; }
#menu_connect #menunav li#lien5 a { background-position: -248px 0; }
#menu_connect #menunav li#lien6 a { background-position: -310px 0; }
#menu_connect #menunav li#lien7 a { background-position: -372px 0; }
#menu_connect #menunav li#lien8 a { background-position: -434px 0; }

/* OVER STATES */
#menu_connect #menunav li#lien1 a:hover { background-color: transparent; background-position: 0 -60px; }
#menu_connect #menunav li#lien2 a:hover { background-color: transparent; background-position: -62px -60px; }
#menu_connect #menunav li#lien3 a:hover { background-color: transparent; background-position: -124px -60px; }
#menu_connect #menunav li#lien4 a:hover { background-color: transparent; background-position: -186px -60px; }
#menu_connect #menunav li#lien5 a:hover { background-color: transparent; background-position: -248px -60px; }
#menu_connect #menunav li#lien6 a:hover { background-color: transparent; background-position: -310px -60px; }
#menu_connect #menunav li#lien7 a:hover { background-color: transparent; background-position: -372px -60px; }
#menu_connect #menunav li#lien8 a:hover { background-color: transparent; background-position: -434px -60px;; }

/* PRESSED STATES */
#menu_connect #menunav li#lien1 a:active { background-position: 0 -120px; }
#menu_connect #menunav li#lien2 a:active { background-position: -62px -120px; }
#menu_connect #menunav li#lien3 a:active { background-position: -124px -120px; }
#menu_connect #menunav li#lien4 a:active { background-position: -186px -120px; }
#menu_connect #menunav li#lien5 a:active { background-position: -248px -120px; }
#menu_connect #menunav li#lien6 a:active { background-position: -310px -120px; }
#menu_connect #menunav li#lien7 a:active { background-position: -372px -120px; }
#menu_connect #menunav li#lien8 a:active { background-position: -434px -120px; }

/* ON STATES */
#menu_connect.lien1 #menunav li#lien1 a { background-position:  0  -180px; cursor: default; }
#menu_connect.lien2 #menunav li#lien2 a { background-position: -62px -180px; }
#menu_connect.lien3 #menunav li#lien3 a { background-position: -124px -180px; }
#menu_connect.lien4 #menunav li#lien4 a { background-position: -186px -180px; }
#menu_connect.lien5 #menunav li#lien5 a { background-position: -248px -180px; }
#menu_connect.lien6 #menunav li#lien6 a { background-position: -310px -180px; }
#menu_connect.lien7 #menunav li#lien7 a { background-position: -372px -180px; }
#menu_connect.lien8 #menunav li#lien8 a { background-position: -434px -180px; }


/* MENU SECONDAIRE */
#menu_sec { width: 200px; height: 60px; position: relative; z-index: 90;}
#menu_sec #menunav {  padding: 0; }
#menu_sec #menunav li { display: inline; }
#menu_sec #menunav li a { float: left; width: 50px; height: 0; padding-top: 60px; overflow: hidden; }
#menu_sec #menunav li a { background-image: url(menu_sec.jpg); background-repeat: no-repeat; }

/* BUTTONS */
#menu_sec #menunav li#lien1 a { background-position: 0 0; }
#menu_sec #menunav li#lien2 a { background-position: -50px 0; }
#menu_sec #menunav li#lien3 a { background-position: -100px 0; }
#menu_sec #menunav li#lien4 a { background-position: -150px 0; }

/* OVER STATES */
#menu_sec #menunav li#lien1 a:hover { background-color: transparent; background-position: 0 -60px; }
#menu_sec #menunav li#lien2 a:hover { background-color: transparent; background-position: -50px -60px; }
#menu_sec #menunav li#lien3 a:hover { background-color: transparent; background-position: -100px -60px; }
#menu_sec #menunav li#lien4 a:hover { background-color: transparent; background-position: -150px -60px; }

/* PRESSED STATES */
#menu_sec #menunav li#lien1 a:active { background-position: 0 -120px; }
#menu_sec #menunav li#lien2 a:active { background-position: -50px -120px; }
#menu_sec #menunav li#lien3 a:active { background-position: -100px -120px; }
#menu_sec #menunav li#lien4 a:active { background-position: -150px -120px; }

/* ON STATES */
#menu_sec.lien1 #menunav li#lien1 a { background-position: 0 -180px; cursor: default; }
#menu_sec.lien2 #menunav li#lien2 a { background-position: -50px -180px; }
#menu_sec.lien3 #menunav li#lien3 a { background-position: -100px -180px; }
#menu_sec.lien4 #menunav li#lien4 a { background-position: -150px -180px; }
</style>
<body>
        <div id="menu_principal" >
                <div id="menu_connect">
                    <ul id="menunav">
                        <li id="lien1"><a href="{$smarty.const.URL}/index.php" title="Annonce Gratuite"></a></li>
                        <li id="lien2"><a href="{$smarty.const.URL}/pages.php?page=19" title="&Agrave; propos de Hobby Clssified"></a></li>
                        <li id="lien3"><a href="{$smarty.const.URLS}{if $smarty.session.username==''}/login_order.php?goto=usercheckout.php {else}/usercheckout.php{/if}" title="Annoncer gratuitement"></a></li> 
                        <li id="lien4"><a href="{$smarty.const.URL}/toplistings.php?pg=new" title="Annonces R&eacute;dcentes"></a></li>
                        <li id="lien5"><a href="{$smarty.const.URL}/pages.php?page=15" title="Nos forfait gratuits"></a></li>
                        <li id="lien6"><a href="{$smarty.const.URL}/pages.php?page=22" title="Partenaires Hobbies"></a></li>
                        <li id="lien7"><a href="{$smarty.const.URL}/modules.php?mod=help_center_fr&amp;nID=3&amp;pg=LN" title="Besoin d&acute;aide"></a></li>
                        <li id="lien8"><a href="{$smarty.const.URL}/contactus.php" title="Contactez-Nous!"></a></li>
                    </ul>
                </div>
        </div>
</body>
</html>

Modifié par helals (13 Feb 2010 - 00:39)
Bonjour,

Avec ton code XHTML, si les images sont indisponibles ou désactivées, les liens ne seront pas (ou difficilement) cliquables parce qu'ils sont vides. Il y a une règle d'or : si l'image véhicule du contenu, elle ne doit pas être gérée en CSS, mais intégrée au code (X)HTML au moyen de l'élément img, avec l'attribut alt correctement renseigné.

Il est tout à fait possible d'imbriquer des sous-menus en HTML. Exemple :
<ul id="menunav">
  <li><a href="URL"><img src="image-1.png" alt="Accueil" /></a></li>
  <li><a href="URL"><img src="image-2.png" alt="À propos" /></a></li>
  <li>
    <a href="URL"><img src="image-3.png" alt="Annoncer (gratuit)" /></a>
    <ul>
      <li><a href="URL">Sous menu 3.1</a></li>
      <li><a href="URL">Sous menu 3.2</a></li>
      <li><a href="URL">Sous menu 3.3</a></li>
    </ul>
  </li>
  <li>
    <a href="URL"><img src="image-4.png" alt="Récentes" /></a>
    <ul>
      <li><a href="URL">Sous menu 4.1</a></li>
      <li><a href="URL">Sous menu 4.2</a></li>
      <li><a href="URL">Sous menu 4.3</a></li>
      <li><a href="URL">Sous menu 4.4</a></li>
      <li><a href="URL">Sous menu 4.5</a></li>
    </ul>
  </li>
  <li>
    <a href="URL"><img src="image-5.png" alt="Forfaits" /></a>
    <ul>
      <li><a href="URL">Sous menu 5.1</a></li>
      <li><a href="URL">Sous menu 5.2</a></li>
    </ul>
  </li>
  <li><a href="URL"><img src="image-6.png" alt="Partenaires" /></a></li>
  <li><a href="URL"><img src="image-7.png" alt="Aide" /></a></li>
  <li><a href="URL"><img src="image-8.png" alt="Contacter" /></a></li>
</ul>

Quant à rendre un tel menu déroulant, les CSS suffisent (sauf pour IE 6, où du JavaScript s'avère nécessaire pour appliquer l'effet de la pseudo-classe :hover sur l'élément li) ; mais, un menu déroulant ne sera jamais parfaitement accessible (notamment pour les utilisateurs qui naviguent au clavier).
Modifié par Victor BRITO (13 Feb 2010 - 16:24)
Bonjour Victor,

à l'origine, pour alléger le code on m'a suggéré d'utiliser une seul image avec du css pour le menu. J'ai trouvé ce code qui me semblait bien adapter, mais il semble que c'est plus difficile d'intégrer un sous-menu déroulants à ce genre de codage css.

Avec votre code il faut une image par liste.

Que pensez-vous que je puisses faire?

Intégrer une image par liste ou garder le même code.
helals a écrit :
Intégrer une image par liste ou garder le même code.

Vu que les images en question ne sont pas du tout décoratives, il vaut mieux intégrer une image par liste.

Soit dit en passant, il ne faut pas oublier que les navigateurs ont la faculté de mettre en cache les images utilisées, de même que les fichiers CSS et JavaScript externes. Smiley cligne
Je vais suivre votre conseil. Je vais intégrer une image par liste.

Merci beaucoup de votre réponse Victor
Sujet clos
Aller à