Bonjour !

Voila j'ai un problème pour réaliser un menu déroulant avec du xHTML pour l'affichage, PHP et MySQL pour récupérer les infos et les organiser, et CSS et JS pour animer le "déroulant".
Dans mon menu, contenant plusieurs images sur des liens, une celle image/lien ne doit dérouler. Voici la seul chose que j'ai réussi a faire :

<a href="mesnotifications.php" alt="mes notifications"><img src="images/notif<?php echo $count_notifs; ?>.png" alt="mes notifications" /></a>
			<ul id="menu" >
				<?php
				//recuperation des notifs de l'user
				$sql = 'SELECT * FROM notifications WHERE id_user='.$_SESSION['id'].' ORDER BY timestamp DESC LIMIT 0, 10';
				$reqf = $connexion->query($sql);
				$reqf->setFetchMode(PDO::FETCH_OBJ);
					while ($dataf = $reqf->fetch())
						{
						echo '<li><a href="'.$dataf->lien.'" >'.$dataf->texte.'</a></li><br />';
						}
				?>
			</ul>

J'ai essayer beaucoup de script que j'ai trouver sur internet, mais je n'arrive a en adapter aucun car mes élements de menu sont récupérés en BDD et non pas en dur !
Il faut que quand on passe la souris sur l'image "notifications" il se déroule affichant les élements, et quand on clique autre part il se renroule, je n'ai pas besoin d'animation accordéon tout ça ...
Voila si quelqu'un veut bien m'aider a réaliser ce code, merci !

tiens, voile un série de plugin menu et pour certain ya les tuto...

EDIT, oups, le lien: http://www.webresourcesdepot.com/catego ... avigation/

Merci Juliette, j'ai regardé tout ce qui est proposé sur ce site mais malheuresement la plus grande partie est sous copyright avec une interdiction d'utilisation commerciale, et donc pour l'instant ça va mais dans un futur proche il y aura des "fins commerciales" sur mon site, et là ça coince ...
Tu ne connaitrais pas un tuto ou qqch comme ça libre de droits ? (Je sais je demande la lune là --' )

J'ai réussi, en partie grâce à un turoriel que j'ai trouver sur SdZ, a faire le menu est c'est niquel sauf que :
- la partie principale se décale en dessous des autres élements du menu
- et il y a un espace creux entre 2 élements de la liste

Voila les codes que j'utilise :

CSS : JS :
PHP/HTML :

<ul id="menu" >
			<li>
			<a href="mesnotifications.php" alt="mes notifications"><img src="images/notif<?php echo $count_notifs; ?>.png" alt="mes notifications" /></a>
			<ul>	
				<?php
				//recuperation des notifs de l'user
				$sql = 'SELECT * FROM notifications WHERE id_user='.$_SESSION['id'].' ORDER BY timestamp DESC LIMIT 0, 10';
				$reqf = $connexion->query($sql);
				$reqf->setFetchMode(PDO::FETCH_OBJ);
					while ($dataf = $reqf->fetch())
						{
						echo '<li><a href="'.$dataf->lien.'" >'.$dataf->texte.'</a></li><br />';
						}
				?>
			</ul>
			</li>
			</ul>

Une idée ? Merci

est ce que u compte le vendre: pour moi a des fins commercial signifie ne pas vendre les plugin ??? ais-je raison ???

un menu que j'utilise, pur html et css:
html:

<ul id="nav">
<li><a href="#">News</a> 
		<ul> 
            <table width="100%">
                <tr>
                    <td><a href="liste_news.php">Liste news</a></td>
                    <td><a href="rediger_news.php">Rediger news</a></td>
	        </tr>
				
            </table> 
		</ul> 
</li>
</ul>

css:

a {
	color: #333;
}
#nav {
	margin: 0;
	padding: 7px 6px 0;
	line-height: 100%;	
	background: #8b8b8b; /* for non-css3 browsers */
	border: 1px solid #d1d1d1;
}
#nav li {
	margin: 0 5px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
}

#nav a {
	font-weight: bold;
	color: #e7e5e5;
	text-decoration: none;
	display: block;
	padding:  8px 20px;
	margin: 0;
}

#nav .current a, #nav li:hover > a {
	background: #d1d1d1; /* for non-css3 browsers */
	color: #444;
}


#nav ul li:hover a, #nav li:hover li a {
	background: none;
	color: #666;
}
#nav ul a:hover {
	background: #0399d4 !important; /* for non-css3 browsers */
	color: #fff !important;
}

#nav ul {
	background: #ddd; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
 
	display: none;
	margin: 0;
	padding: 0;
	width: 420px;
	position: absolute;
	top: 35px;
	left: 0;
}

#nav li:hover > ul {
	display: block;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}

#nav ul ul {
	left: 181px;
	top: -3px;
}

#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#nav {
	display: inline-block;
}
html[xmlns] #nav {
	display: block;
}
* html #nav {
	height: 1%;
}

Non pas le vendre, mais j'ai demandé à un ami qui bosse dans le droit et la licence interdit l'utilisation sur un site pouvant créer du profit, donc dés que je gagne de l'argent avec le site je sors de la licence ...
Et est-ce que ce que tu m'a mit là est déroulant verticalement ?

Avec mon code, pour le blanc entre les élements de liste j'ai réussi à corriger mais pas moyen de le mettre en ligne, il saute une ligne a chaque fois.
Peut-être le "display : block" ?

Avec mon code, pour le blanc entre les élements de liste j'ai réussi à corriger mais pas moyen de le mettre en ligne, il saute une ligne a chaque fois.
Peut-être le "display : block" ?

je ne comprend ???

je ne sais pas si c'est ce que tu cherche mais pour moi si j'ai bien compris, je fait comme ca:

<li><a href="#">LIEN POUR OUVRIR LE MENU (je laisse #)</a> 
		<ul> 
            <table width="100%"> // j'ouvre un tableau
		
<?php

                                //recuperation des notifs de l'user
                                $sql = 'SELECT * FROM commentaires';
                                $reqf = $connexion->query($sql);
                                $reqf->setFetchMode(PDO::FETCH_OBJ);
                                        while ($dataf = $reqf->fetch())
                                                {
                                                echo '<tr><td>'.$dataf->auteur.'</td></tr>'; // l'echo contient une cellule complète pour chaque liens
                                                }
                                ?>
			
             </table> // je ferma la table		
		</ul> 
</li>

en suite tu fait toutes tes modifs de mise en forme avec le css donné plus haut...
si je ne sais pas si c'est la meilleurs solution mais il me semble que c'est ce que tu cherche...

si non, ton saut de ligne, ce que je ne suis pas sur de comprendre viens peut etre du fait que tu as un

<br />

au bout de cette ligne:

echo '<li><a href="'.$dataf->lien.'" >'.$dataf->texte.'</a></li><br />';

Oui le PHP que tu as mit conviendrai, mais j'ai commencé avec une méthode de liste (ul et li) et non de tableau (td et tr) et le tuto avec ma méthode explique aussi plein d'autres possibilités d'adaptations et de design qui me seront utiles, donc dans un soucis de praticité je prend la méthode liste ...
Et donc le dernier problème qu'il reste avec ça c'est que le bouton "notifications" qui se déroule est tout seul à une ligne, tout à gauche, alors que le reste du menu est aligné sur une seule ligne et centrée. J'ai chercher dans tous le CSS et essayer d'ajouter des propriétés mais rien y fait

je viens de tester ton code avec ton css et j'ai sur la gauche un bouton, je le survole et les menu s'affiche bien en dessous...
il faut en dire plus car je ne vois pas et la pour moi ça marche...

Enfait le seul bouton animé de mon menu se place nimporte où, là je l'ai trouvé par hasard il était en dessous d'un autre bouton ! comment je pourrais simplement le mettre a coté du bouton indiqué juste au dessus dans le HTML :

<a href="mesmessages.php" alt="mes messages"><img src="images/message.png" alt="mes messages" class="imgespace" /></a>

?

si tu peux, fait moi une capture d'ecran et aussi, teste ce code seul et dis moi si c'est le resultat que tu cherche ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 144px; /* largeur */
}

#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}</style>


</head>
<body>
<ul id="menu" >
		<li>
				<a href="mesnotifications.php" alt="mes notifications"> notifications</a>
        <ul>    
        				<li><a href="#" >aaa</a></li><br />
							  <li><a href="#" >bbb</a></li><br />
							  <li><a href="#" >ccc</a></li><br />
							  <li><a href="#" >ddd</a></li><br />
        </ul>
    </li>
</ul>
</body>
</html>