Vous êtes ici : Accueil > Forums > Développement de vos sites

Sous-menu de Tennis de table.com

Pitufo

Mercredi 16 Février 2011 00:42

Bonjour, je travaille actuellement sur un site web et j'aimerais faire un sous menu exactement identique à celui de tennis de table.com.
Par sous-menu j'entends les liens qui s'affichent en dessous du menu principal (Acceuil, forum, annonces, tournois etc). Par exemple, lorsque l'on place sa souris sur l'onglet "Annuaires", on voit s'afficher en dessous "France, Ligues, Comités, Clubs, Belgique, Suisse". Et bien j'aimerais faire exactement la même chose. J'ai un lien de mon menu qui s'appelle "Produits" et j'aimerais qu'au passage de la souris s'affiche en dessous A L'HORIZONTAL ET NON LES UN EN DESSOUS DES AUTRES les deux liens "Nos produits" et "Création sur mesure".
Voila, je sais qu'il faut utiliser du javascript mais je n'ai aucune connaissances dans ce langage. J'ai d'assez bonnes connaissances en xhtml et css, je ne vous demande pas le code tout fait, mais si quelqu'un qui s'y connait ou même Armel (tant qu'à faire Émoticône ) pouvait me donner quelques pistes et bout de codes ça m'arrangerait grandement car la je rame ! Émoticône
Merci de votre aide.
Bonne journée à tous ! Émoticône
Armel

Mercredi 16 Février 2011 01:08

Bonjour,

N'hésitez pas à regarder le code source du site et à le recopier pour votre site. Sachez cependant qu'il est un peu adapté aux besoins du site et qu'il peut être largement simplifié. Vous trouverez aussi de nombreux codes sources sur Internet.

Si vous voulez reprendre celui de Tennis de Table.com, la partie html à reprendre se situe dans la balise:

<div id="menu">
...
</div>

Ensuite la partie Javascript qui vous intéresse est la suivante (vous devez utiliser le framework jQuery et le chargé avant l'appel aux fonctions suivantes):

$(document).ready(function() {

$('#menuParent .menu a').each(function(){
$(this).mouseover(function(){
activateMenu($(this));
});
});
}

function activateMenu(e) {

e.parent().siblings('.menu').each(function() {
$(this).children().removeClass('menuOver');
$(this).children().addClass('menuOut');
});

var index = e.parent().prevAll().length;
$('#menuChild ul').each(function(i) {
if (i == index) {
$(this).show();
} else {
$(this).hide();
}
});
e.addClass('menuOver');
}

Et pour le style, je vous laisse le soin de faire comme bon vous semble, vous pouvez récupérer les styles du site dans le fichier CSS Content

Armel
Message modifié 2 fois, dernière modification Mercredi 16 Février 2011 01:09 par Armel
Pitufo

Mercredi 16 Février 2011 16:50

Merci beaucoup Armel pour votre réponse si rapide et pour votre aide précieuse ! Je vais me pencher la dessus sérieusement !

Bonne soirée
Pitufo

Samedi 19 Février 2011 18:02

Bonjour, je me perdais un peu dans le code du menu de t2t.com donc j'ai finalement choisi de suivre un tutoriel pour créer un menu déroulant classique, et ensuite de changer l'orientation du sous-menu grace à un float:left, cependant ça ne marche pas...Je vous mets le code à la suite, si quelqu'un a une idée je suis preneur....

Merci beacoup et bonne journée à tous !

Structure xhtml + javascript :

<!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" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="essai.css" />
<script type="text/javascript">
<!--
sfHover = function() {
var sfEls = document.getElementById("menu"Clin d'oeil.getElementsByTagName("LI"Clin d'oeil;
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"Clin d'oeil, ""Clin d'oeil;
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
-->
</script>
<title>Essai menu déroulant</title>
</head>

<body>

<ul id="menu">

<li>
<a href="#"><img src="images/acceuil.png" /></a>
</li>

<li>
<a href="#"><img src="images/savoir_faire.png" /></a>

</li>

<li>
<a href="#"><img src="images/produits.png" /></a>
<ul>
<li>
<a href="#">Nos produits</a>
</li>
<li>
<a href="#">Création sur mesure</a>
</li>
</ul>
</li>

<li>
<a href="#"><img src="images/contact.png" /></a>

</li>

</ul>

</body>
</html>

Code CSS


/*---------------------------------MISE EN FORME GENERALE CSS--------------------*/

#menu, #menu ul
{
padding : 0;
margin : 0;
list-style : none;
line-height : 21px;
text-align : center;
}

#menu
{
font-weight : bold;
font-family : Arial;
font-size : 12px;
}
#menu a
{
display : block;
padding : 0;
color : #011647;
text-decoration : none;
width : 144px;
}

#menu li
{
float : left;
border-right : 1px solid #fff;
}

html>body #menu li
{
border-right: 1px solid transparent ;
}

#menu li ul
{
position: absolute;
width: 144px;
left: -999em;
}


#menu li ul li
{
border-right : 1px solid #fff;
float : left;
}

html>body #menu li ul li
{
border-top : 1px solid transparent;
}

/*---------------------------------------------CSS + JAVASCRIPT------------------------------------------------*/
#menu li ul li a:hover
{
color: #bd4d02;
background: #7f97ce;
}

#menu li:hover ul, #menu li.sfhover ul
{
left: auto;
min-height: 0;
}
Armel

Dimanche 20 Février 2011 03:19

Votre code fonctionne très bien chez moi. Il ne reste qu'à modifier le style Content
Pitufo

Dimanche 20 Février 2011 03:30

Oui c'est justement le style que je voudrais modifier afin qu'il se déroule horizontalement et non verticalement, ce qui n'est pas le cas actuellement... Émoticône
Message modifié 1 fois, dernière modification Dimanche 20 Février 2011 03:35 par Pitufo
rigs

Lundi 21 Février 2011 14:58

#menu li ul
{
position: absolute;
width: 144px;
left: -999em;
}

ce qui pose problème c'est la largeur définie ci-dessus.
Retire la et normalement ton sous menu passe à l'horizontale.
Pitufo

Lundi 21 Février 2011 18:11

Merci beaucoup pour ta réponse mais j'avais trouvé depuis ce matin Content
Merci à toi Armel pour votre aide précieuse. Je mettrai l'adresse du site lorsqu'il sera terminé, ce qui ne devrait plus prendre trop de temps maintenant.

Bonne journée Émoticône
1
0
8 messages

Vous êtes ici : Accueil > Forums > Développement de vos sites