Forum d'entraide PHPFrance

Bonjour à tous,

j'ai récemment passé mon site sur wordpress et j'ai voulu modifier mon thème en intégrant un menu déroulant vertical.

J'ai modifié le code du header grâce au tutoriel de ce site et je l'ai un peu modifié pour qu'il corresponde à mes besoins (avec l'aide de quelqu'un, bien entendu..).
Je souhaiterais utiliser ce menu déroulant à la fois pour les catégories, les sous catégories et les sous-sous catégories (excusez moi mais je ne sais pas trop quel autre vocabulaire employer...).
Le code du menu ne devait pas être prévu pour les sous-sous catégories (ou catégories filles filles ^^)

J'ai décelé un problème dans l'affichage des sous-sous catégories (voyez vous-même http://montaigu.basket.free.fr/ en passant votre souris sur l'onglet "présentation du club" > la catégorie fille-fille "création" empêche de cliquer sur la catégorie fille "le bureau")
mais je n'ai pas assez de connaissance en code pour trouver ce qui cloche.

Voici le code en question :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="distribution" content="global" />


<meta name="language" content="en, sv" />


<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<link rel="shortcut icon" type="image/x-icon" href="/mafavicon.ico" />

        <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<style type="text/css" media="screen">
        @import url( <?php bloginfo('stylesheet_url'); ?> );        
</style>

<?php wp_head(); ?>

</head>

<body style="background-color: #B6C1C9">
<br/>
<div id="wrapper">
<div id="masthead">







<style type="text/css" media="screen">#nav2 {
    background:#777;
    font-size:1.1em;
}

#nav2, #nav2 ul {
        list-style: none;
        line-height: 1;
}

#nav2 a ,#nav2 a:hover{
        display: block;
        text-decoration: none;
        border:none;
}

#nav2 li {
        float: left;
        list-style:none;
        border-right:1px solid #a9a9a9;
}

#nav2 a,#nav2 a:visited {
        display:block;
        font-weight:bold;
        color: #f5f5f4;
        padding:6px 12px;

}

.children {
padding:0px;
border-top:2px
}


.children .children, .children .children a {
padding-left:40px;
float:none;

}




#nav2 a:hover, #nav2 a:active
{
        background:#000;
        text-decoration:none
}        

/* Dropdown Menu */
#nav2 li ul {
        position: absolute;
        left: -999em;
        height: auto;
        width: 174px;
        border-bottom: 1px solid #a9a9a9;
}

#nav2 li li {
        width: 172px;
        border-top: 1px solid #a9a9a9;
        border-right: 1px solid #a9a9a9;
        border-left: 1px solid #a9a9a9;
        background: #777;
}

#nav2 li li a,#nav2 li li a:visited{
        font-weight:normal;
        font-size:0.9em;
        color:#FFF;
}

#nav2 li li a:hover,#nav2 li li a:active{
        background:#000;
}        

#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul{
        left: auto;
}

a.main:hover{
    background:none;
} </style>        
                 







<div id="menu">
<ul id="nav2" class="clearfloat">
<li><a href="<?php echo get_option('home'); ?>/" class="on">Accueil</a></li>
 <?php wp_list_categories('sort_column=post_date&sort_order=desc&title_li=');

    $this_category = get_category($cat);
    if (get_category_children($this_category->cat_ID) != "") {
        echo "<ul>";
        wp_list_categories('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID);
        echo "</ul>";
    }
?>
</ul>
        

        
</ul>
<a href=""></div>
</div>





<!-- Begin #content -->
<div id="content">

Voyez-vous une erreur dans le code qui serait à l'origine de ce problème d'affichage d'onglet ?

Merci d'avance à ceux qui se pencheront sur mon problème.

Je décèle une erreur potentielle : pour imbriquer des listes en (X)HTML, il faut procéder comme suit :

Code : Tout sélectionner

<ul>
  <li>Menu 1</li>
  <li>Menu 2
    <ul>
      <li>Menu 2.1
        <ul>
          <li>Menu 2.1.1</li>
        </ul>
      </li>
      <li>Menu 2.2</li>
      <li>Menu 2.3
        <ul>
          <li>Menu 2.3.1</li>
          <li>Menu 2.3.2
            <ul>
              <li>Menu 2.3.2.1</li>
            </ul>
          </li>
          <li>Menu 2.3.3</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Menu 3</li>
</ul>

Les éléments UL et OL ne peuvent avoir qu'un seul élément enfant : l'élément LI. Autrement dit, une liste UL ou OL imbriquée doit se trouver à l'intérieur d'un élement LI.

Il faut donc corriger ton code comme suit :

<ul id="nav2" class="clearfloat">
  <li>
    <a href="<?php echo get_option ('home'); ?>/" class="on">Accueil</a>
<?php
    wp_list_categories ('sort_column=post_date&sort_order=desc&title_li=');
    $this_category = get_category ($cat);
    if (get_category_children ($this_category->cat_ID) != "")
    {
        echo '<ul>';
        wp_list_categories ('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID);
        echo '</ul>';
    }
?>
  </li>
</ul>

Autrement dit, tu déplaces la balise fermante </li> après le bout de code PHP, juste avant la balise fermante </ul> codée en dur (celle qui ferme l'élément UL ayant l'attribut id="nav2").

Donc, pour résumer (je préfère vérifier si c'est bien ça)

Avec la modification, ça doit donner ça : ?

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="distribution" content="global" />


<meta name="language" content="en, sv" />


<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<link rel="shortcut icon" type="image/x-icon" href="/mafavicon.ico" />

	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<style type="text/css" media="screen">
	@import url( <?php bloginfo('stylesheet_url'); ?> );	
</style>

<?php wp_head(); ?>

</head>

<body style="background-color: #B6C1C9">
<br/>
<div id="wrapper">
<div id="masthead">







<style type="text/css" media="screen">#nav2 {
    background:#777;
    font-size:1.1em;
}

#nav2, #nav2 ul {
	list-style: none;
	line-height: 1;
}

#nav2 a ,#nav2 a:hover{
	display: block;
	text-decoration: none;
	border:none;
}

#nav2 li {
	float: left;
	list-style:none;
	border-right:1px solid #a9a9a9;
}

#nav2 a,#nav2 a:visited {
	display:block;
	font-weight:bold;
	color: #f5f5f4;
	padding:6px 12px;

}

.children {
padding:0px;
border-top:2px
}


.children .children, .children .children a {
padding-left:40px;
float:none;

}




#nav2 a:hover, #nav2 a:active
{
	background:#000;
	text-decoration:none
}	

/* Dropdown Menu */
#nav2 li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 174px;
	border-bottom: 1px solid #a9a9a9;
}

#nav2 li li {
	width: 172px;
	border-top: 1px solid #a9a9a9;
	border-right: 1px solid #a9a9a9;
	border-left: 1px solid #a9a9a9;
	background: #777;
}

#nav2 li li a,#nav2 li li a:visited{
	font-weight:normal;
	font-size:0.9em;
	color:#FFF;
}

#nav2 li li a:hover,#nav2 li li a:active{
	background:#000;
}	

#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul{
	left: auto;
}

a.main:hover{
    background:none;
} </style>	
		 


<div id="menu">
<ul id="nav2" class="clearfloat">
  <li>
    <a href="<?php echo get_option ('home'); ?>/" class="on">Accueil</a>
<?php
    wp_list_categories ('sort_column=post_date&sort_order=desc&title_li=');
    $this_category = get_category ($cat);
    if (get_category_children ($this_category->cat_ID) != "")
    {
        echo '<ul>';
        wp_list_categories ('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID);
        echo '</ul>';
    }
?>
  </li>
</ul>





<a href=""></div>
</div>





<!-- Begin #content -->
<div id="content">

Ah et aussi (désolée pour le flood) mais merci beaucoup d'avoir répondu si rapidement !!

Oui, ça doit donner ça.

Soit dit en passant, il y a d'autres erreurs dans le code (mais qui ne concernent pas le menu en question) : la balise <br /> juste après <body> ne peut pas s'y trouver, l'élément STYLE ne peut pas être dans le corps du (X)HTML (uniquement dans HEAD) et il y a un élément A qui n'est pas fermé (<a href=""></div> au lieu de <a href=""></a>).

OK, donc j'ai rectifié pour l'élément A mal fermé
mais pour l'élément style dans la balise body,

Code : Tout sélectionner

</head>

<body style="background-color: #B6C1C9">
<br/>
<div id="wrapper">
<div id="masthead">

je transforme ça comment ?

Sinon après les modif précédentes, le problème d'affichage d'onglet dans le menu est toujours présent.

En tous cas, merci pour vos réponses.

pour l'élément style dans la balise body, je transforme ça comment ?

Comme suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="distribution" content="global" />


<meta name="language" content="en, sv" />


<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<link rel="shortcut icon" type="image/x-icon" href="/mafavicon.ico" />

	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<style type="text/css" media="screen">
	@import url( <?php bloginfo('stylesheet_url'); ?> );
#nav2 {
    background:#777;
    font-size:1.1em;
}

#nav2, #nav2 ul {
	list-style: none;
	line-height: 1;
}

#nav2 a ,#nav2 a:hover{
	display: block;
	text-decoration: none;
	border:none;
}

#nav2 li {
	float: left;
	list-style:none;
	border-right:1px solid #a9a9a9;
}

#nav2 a,#nav2 a:visited {
	display:block;
	font-weight:bold;
	color: #f5f5f4;
	padding:6px 12px;

}

.children {
padding:0px;
border-top:2px
}


.children .children, .children .children a {
padding-left:40px;
float:none;

}




#nav2 a:hover, #nav2 a:active
{
	background:#000;
	text-decoration:none
}	

/* Dropdown Menu */
#nav2 li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 174px;
	border-bottom: 1px solid #a9a9a9;
}

#nav2 li li {
	width: 172px;
	border-top: 1px solid #a9a9a9;
	border-right: 1px solid #a9a9a9;
	border-left: 1px solid #a9a9a9;
	background: #777;
}

#nav2 li li a,#nav2 li li a:visited{
	font-weight:normal;
	font-size:0.9em;
	color:#FFF;
}

#nav2 li li a:hover,#nav2 li li a:active{
	background:#000;
}	

#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul{
	left: auto;
}

a.main:hover{
    background:none;
}	
</style>

<?php wp_head(); ?>

</head>

<body style="background-color: #B6C1C9">
<div id="wrapper">
<div id="masthead">	
		 


<div id="menu">
<ul id="nav2" class="clearfloat">
  <li>
    <a href="<?php echo get_option ('home'); ?>/" class="on">Accueil</a>
<?php
    wp_list_categories ('sort_column=post_date&sort_order=desc&title_li=');
    $this_category = get_category ($cat);
    if (get_category_children ($this_category->cat_ID) != "")
    {
        echo '<ul>';
        wp_list_categories ('orderby=id&show_count=0&title_li=&use_desc_for_title=1&child_of='.$this_category->cat_ID);
        echo '</ul>';
    }
?>
  </li>
</ul>





<a href=""></a>
</div>





<!-- Begin #content -->
<div id="content">

merci !

A partir des commentaires sur le site qui donnait le code du menu déroulant, j'ai trouvé des sites sous wordpress qui utilisent ce menu déroulant. Leurs sous catégories s'affichent normalement.

http://lnstsc.toile-libre.org/
http://www.bijoux-book.fr/

Sauriez-vous détecter ce qui leur permet d'afficher normalement les onglets de leurs sous catégories et qui manque à mon code ?

Forum d'entraide PHPFrance

Menu déroulant, catégories mères, filles et filles-filles

Menu déroulant, catégories mères, filles et filles-filles

Re: Menu déroulant, catégories mères, filles et filles-filles

Re: Menu déroulant, catégories mères, filles et filles-filles

Re: Menu déroulant, catégories mères, filles et filles-filles

Re: Menu déroulant, catégories mères, filles et filles-filles

Re: Menu déroulant, catégories mères, filles et filles-filles

Re: Menu déroulant, catégories mères, filles et filles-filles

Re: Menu déroulant, catégories mères, filles et filles-filles