5568 sujets

Sémantique web et HTML

Menu déroulant horizontal

Bonjour ,

J'ai créé un menu horizontal 
<html>
<head>
<title>Les Chambres du Vignoble</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

</head>
<body>
<div id="menu">
  <ul id="onglets">
    <li class="active"><a href="Accueil.html"> Accueil </a></li>
    <li><a href="Forums.html"> Nos Chambres d'Hôtes </a></li>
    <li><a href="Livre_or.html"> Notre Chalet </a></li>
    <li><a href="Equipe.html"> Notre caveau  </a></li>
    <li><a href="Inscription.html"> S'inscrire </a></li>
    <li><a href="Connexion.html"> Se connecter </a></li>
  </ul>
</div>


Et j'aimerais pourvoir , dans certaine catégorie , qu'il soit déroulant. Pouvez vous m'indiquer le bon code html ainsi que CSS ?

Merci d'avance .

#onglets
{
    font : bold 11px Batang, arial, serif;
    list-style-type : none;
    padding-bottom : 24px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */
    border-bottom : 70px solid #66CC00;
    margin-left : 0;
}
#onglets li
{
    float : left;
    height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color: #F4F9FD;
    margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 1px 2px 0 2px;  /* Pour IE  */
    border : 1px solid #9EA0A1;
}
#onglets li.active
{
    border-bottom: 1px solid #fff;
    background-color: #FFFF00;
}
#onglets a
{
    display : block;
    color : #666;
    text-decoration : none;
    padding : 4px;
}
#onglets a:hover
{
    background : #FFFF99;
}
Bonjour,

Je suppose que ta question était : "Pouvez-vous m'aiguiller sur la marche à suivre pour parvenir à mes fins ?"

Un menu déroulant passera forcément par l'utilisation de JavaScript, si ce langage ne t'est pas "famillier" cela risque de te rendre la tâche plus ardue.

Pour la démarche globale (code html, appel et utilisation de JavaScript et code css) tu peux t'inspirer de ce tutoriel : Menu déroulant accordeon avec Jquery (bibliothèque JavaScript).Il ne correspond pas réellement à ce que tu veux faire, mais il te donnera la méthodologie et les axes de recherche pour y parvenir.

Il existe bon nombre de script "tout fait" (à adapter suivant tes propres besoins, mais cela implique une connaissance minimale des langages utilisés...)

Superfish en propose quelques uns qui devraient pouvoir répondre à ta demande, c'est en Anglais mais ce n'est pas insurmontable, il est de plus d'assez bonne facture (my opinion)
Regarde les codes, fais des essais, fais éventuellement des recheches sur la toile sur d'autres exemples, et si tu as encore des soucis d'implémentations ou de fonctionnement, tu pourras revenir nous les exposer .

Html5 et Js permettent également de faire des choses interessantes...

Si tu ne parviens à rien, il faudra faire appel à une bonne âme, ou une personne dont c'est le métier (oui, oui, c'est un vrai métier Smiley cligne )

A bientôt,
Cordialement,
Sylvain
Shaw7 a écrit :
Un menu déroulant est bien sur possible en CSS Smiley smile


Oui mais non… CSS n'est pas fait pour gérer des événements, ça sert juste à décorer. Un menu déroulant c'est obligatoirement en js, ce qui permet en outre de gérer l'accessibilité de la chose. Smiley smile
Modifié par Patidou (06 Jun 2010 - 15:05)
Je suis d'accord, ce n'est pas du tout fait pour, ça reste néanmoins possible (cf. le tutoriel Smiley cligne ). Après l'idéal est sans aucun doute le JavaScript, on est d'accord là dessus Smiley biggrin
C'est sûr que c'est possible mais c'est une mauvaise solution. Smiley cligne
Modifié par Patidou (06 Jun 2010 - 15:17)
Sujet clos
Aller à