28172 sujets

CSS et mise en forme, CSS3

Menu vertical avec sous menu

Bonjour,

Tout d'abord merci pour se forum fort agréable Smiley smile .



J'aimerai créer un menu en CSS qui serai vertical qui contiendrai des sous menu mais les sous menu devront apparaitre au dessus du menu et non pas en dessous comme on le voit habituellement;

Je cherches un peu partout sur google mais je trouves que des sous menu en dessous du menu ou alors des sous menu en haut du menu mais de manière Horizontal et quand je met "display:none" il n'y a pu rien Smiley decu

En gros je souhaiterai un exemple vraiment très très très basique avec
Accueil / Test1 et en dessous test2 et test3

Pour que je puisse bien comprendre le mécanisme après le reste ya pas de problème.


Merci de votre lecture et si je me suis mal exprimé je recommencerai Smiley smile

Cordialement
Bonjour,

C'est tout à fait réalisable, mais:

1. Tu poses une question le vendredi à 16h et quelques. Soit moins de deux heures avant le week-end. Donc bon...
2. Tu veux réaliser un menu déroulant (drop-down-menu), mais tu n'emploies jamais ces termes, donc ce que tu souhaites réaliser n'est pas clair pour un certain nombre de lecteurs. Il m'a fallu lire trois fois ton message pour être sûr de ta demande.
3. Tu n'as rien commencé, tu ne soumets aucun code ou aucune page pour critique ou demande d'aide ou de correction. En général, on aide plus facilement ceux qui ont déjà fait des efforts. Smiley cligne
3. Dans une certaine mesure, les menus déroulants c'est chiant. Smiley biggol

Bref, pour réaliser ce type de menu il faut:
1. Être capable de le réaliser en HTML+CSS. Il te faut une structure HTML décente et un code CSS qui exploite la pseudo-classe :hover, à vue de nez.
2. Chaque sous-menu sera positionné en absolu. Pour un menu déroulant classique (liens de premier niveau horizontaux, liens de deuxième niveau en un bloc vertical), on laissera le menu se placer verticalement tout seul, ou bien on utilisera la propriété CSS top (en partant du principe que le conteneur de chaque sous-menu est positionné en relatif). Pour un menu qui correspond à ta demande, on utiliser bottom plutôt que top.
2. Il faudra de toute façon utiliser JavaScript pour reproduire le comportement du menu sous IE6 (ne comprend pas :hover comme on l'utilisera pour ce type de menu), pour permettre la navigation au clavier et pour quelques améliorations ergonomiques. Le plugin Superfish pour jQuery est pas mal, mais il y a sans doute d'autres scripts corrects.

Voilà pour l'essentiel.
merci pour ta réponse rapide jvais attaquer un petit quelque chose avec les infos que tu m'as donné, je penses que ca va bien m'aider
J'ai trouvé sur le site alsacreation un tuto avec un menu qui pourrait me convenir (il y a du javascript également). Mai quand je mets le curseur de la souris sur l'un des menu le sous menu sont hors cadre sous Firefox & IE7 de mon PC alors que sur le firefox de mon MacBooK aucun soucis jcomprends pas j'ai beau chercher jtrouve pas.


Voilà le code


Javascript
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


Mon fichier .html

<div id="menu">
    <div class="menu2">
    <dl>
            <dt onmouseover="montre('smenu1');"><a href="#">Accueil</a></dt>
                <dd id="smenu1">
                    <ul>
                        <li><a href="#">Menu 1.2</a></li>
                        <li><a href="#">Menu 1.1</a></li>
                    </ul>
                </dd>
        </dl>
        
        <dl>			
            <dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
                <dd id="smenu2">
                    <ul>
                        <li><a href="#">Menu 2.1</a></li>
                      <li><a href="#">Menu 2.2</a></li>
                    </ul>
                </dd>
        </dl>
        
        <dl>	
            <dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
                <dd id="smenu3">
                    <ul>
    
                      <li><a href="#">Menu 3.1</a></li>
                      <li><a href="#">Menu 3.2</a></li>
                    </ul>
                </dd>
        </dl>
        
        <dl>	
            <dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
                <dd id="smenu4">
                    <ul>
                        <li><a href="#">Menu 4.1</a></li>
                        <li><a href="#">Menu 4.2</a></li>
                    </ul>
                </dd>
        </dl>
        
        <dl>	
            <dt onmouseover="montre('smenu5');"><a href="#">Menu 5</a></dt>
                <dd id="smenu5">
                    <ul>
                       <li><a href="#">Menu 5.1</a></li>
                      <li><a href="#">Menu 5.2</a></li>
                    </ul>
                </dd>
        </dl>
    </div>
</div>


Mon CSS


div#menu{
	width:849px;
	height:60px;
	float:left;
}

.menu2{
	margin-left:0px;
}
dt{
font-weight:bold;
}

dt, dl, dd, ul, li{
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#8f6c47;
}

#menu dl {
float: left;
}

#menu li {
display: inline;
}

#menu a {
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#8f6c47;
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 0.7em;
position:absolute;
left:0;
width: 400px;
margin-left:500px;
}

</style>



Merci de votre aide future.
Bonjour,

angelusflm a écrit :
J'ai trouvé sur le site alsacreation un tuto avec un menu qui pourrait me convenir (il y a du javascript également)

Ça tombe bien, on y est, sur le site Alsacreations (avec un S à la fin, merci).
Mais de quel menu parles-tu? Il n'y a actuellement pas de menu déroulant proposé sur Alsacreations. Il y avait il y a encore quelques semaines un tutoriel qui présentait un menu jugé obsolète, qui posait quelques problèmes de compatibilité, etc. Ce tutoriel a été supprimé il y a peu.

Je te renvoie à mon message précédent: pour faire un bon menu déroulant, il faut être capable d'en réaliser un en HTML et CSS, et donc maitriser le code HTML nécessaire (comment je structure mon menu?) et le positionnement CSS. Sinon, c'est simple: on ne fait pas de menu déroulant, et on s'attaque à des choses plus simples. Smiley smile
angelusflm a écrit :
http://tutorials.alsacreations.com/modelesmenus/hd2.htm

Merci de le signaler. On a effectivement oublié de supprimer la version anglais du tutoriel et ses pages de démonstration. Smiley smile

Et donc, comme je le disais, l'usage de ce menu est déconseillé, etc.
Sujet clos
Aller à