Pages :
bonjour a tous, je souhaite faire des menus déroulants, comme sur ce site :
http://www.stunicholls.myby.co.uk/
(c'est a dire que ca s'inscrive sous forme de lien les sous menus et que les Sous Sous emnus soient dans un cadre)

mais comment faire ?? j'ai suivi des tutos pour l'instant ca me donne ca :
http://playmusculation.olympe-network.com/design/Nouveau%20dossier/
comment eviter que le design des onglets se repete dans des sous menus, et que ca figure comme des liens comme dans materiel??? (voici le code html puis css)

<?xml version="1.0" encoding="UTF-8"?>
<!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="fr" lang="fr">

<head>
      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Play-musculation</title>
        <link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>

    <div id="header"><!-- DIV du Header --></div>
	<d
	</div>
	
	
	<div id="conteneur"><!-- DIV du Conteneur -->
		<div id="menu">
            <ul>
                <li><a href="#">Débutants</a></li>
                <li><a href="#">Materiel</a>
                    <ul>
                        <li><a href="#">Banc</a></li>
                        <li><a href="#">Barres</a></li>
                        <li><a href="#">Fonte</a></li>
                    </ul>
                </li>
				<li><a href="#">Blessures</a></li>
                <li><a href="#">Programmes</a></li>
				<li><a href="#">Exercices</a></li>
				<li><a href="#">Nutrition</a></li>
				<li><a href="#">Endurance</a></li>
            </ul>
        </div>

	    </div>	
		


</body>
</html>


body {
     background:url(theme/interface/bg.png) repeat-x;
	 margin:0;
	 padding:0;
	 font-family:Verdana, Geneva, sans-serif;
	 font-size:9px;
	 }
	 
#header {
    height:233px;
	background:url(theme/interface/header.png) no-repeat top center;

}

#conteneur{
    width:990px;	
	margin:0 auto;

}


#menu ul li{
    list-style:none;
	float:left;
	padding:0;
}

#menu ul li a{
    height:49px;
	width:130px;
	font-family:Segoe Script, Verdana, Arial;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	display:block;
	background:url(theme/interface/menu.png)no-repeat top left;
	line-height:49px;
	color:#FFFFFF
	
}

#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
    background:none;
}

#menu ul li a:hover{
	font-size:17px;
	color:#ad2034;
}
#menu li ul {
position:absolute;
}



merci d'avance a tous
Salut,

Cette partie de ton css s'applique aussi à tes sous menus


#menu ul li a{
    height:49px;
	width:130px;
	font-family:Segoe Script, Verdana, Arial;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	display:block;
	background:url(theme/interface/menu.png)no-repeat top left;
	line-height:49px;
	color:#FFFFFF
	
}


Pour faire en sorte qu'elle ne s'applique qu'à tes menus, soit tu utilise l'opérateur css > pour indiquer que le style ne s'applique qu'aux li et non pas au li ul li

#menu ul > li > a{
    height:49px;
	width:130px;
	font-family:Segoe Script, Verdana, Arial;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	display:block;
	background:url(theme/interface/menu.png)no-repeat top left;
	line-height:49px;
	color:#FFFFFF
	
}


Le problème est que cet opérateur n'est pas compris par ie6.

Sinon tu dois redéfinir le design pour tes liens dans un li ul li

#menu ul li ul li a{
    height:auto;
	width:auto;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	display:block;
	background:none;
	line-height:auto;
	color:#FFFFFF
}
ouha, super aide ici, je crois que je vais être un adepte de ce forum Smiley lol
bon ca marche, sauf qu'il fat encore enlever le style hover, qui fait l'écriture en rouge, espacer les mots ca rend ca pour le moment :
http://playmusculation.olympe-network.com/Design%20max/Nouveau%20dossier/index.htm


il faudrait aussi que je puisse insérer cette barre ds le code (c'est la que le texte s'inscrira) :
, qui s'appelle sous_menus.png , qui fait 913x30

ou alors, inserer cette barre avec un grand cadre blanc ou le texte sera écrit(sachant que je vais devoir le faire apres)
http://img9.imageshack.us/img9/8470/sousmenus.png
Modifié par no-fonte (22 Apr 2009 - 09:06)
Les menus déroulants en full-CSS, c'est de la merde. On s'en passera pour le plus grand bonheur des visiteurs. Smiley lol

Un menu déroulant qui n'est pas un ratage complet en termes d'ergonomie et d'accessibilité, ça demande une utilisation correcte de JavaScript. Le plugin Superfish pour jQuery fait cela plutôt bien, surtout si on utilise également le plugin hoverIntent. Si on est un crack en JavaScript, on peut aussi développer le sien, mais ça demande beaucoup de temps.

no-fonte a écrit :
ouha, super aide ici, je crois que je vais être un adepte de ce forum Smiley lol

Heureusement que je suis là pour plomber l'ambiance, ça manquerait autrement. Smiley smile
Modifié par Florent V. (22 Apr 2009 - 14:45)
sérieusement flo, j'aimerais intégrer du js, mais il faudrait que on me passe le code exact car je en sais absolument pas l'utiliser
Il y a des exemples sur le site de superfish, c'est assez simple à faire...


Exemple de code :

Le menu en listes imbriquées
<ul id="sample-menu-1" class="sf-menu">
					<li class="current">
						<a href="#a">menu item</a>
						<ul>
							<li>

								<a href="#aa">menu item</a>
							</li>
							<li class="current">
								<a href="#ab">menu item</a>
								<ul>
									<li class="current"><a href="#">menu item</a></li>
									<li><a href="#aba">menu item</a></li>

									<li><a href="#abb">menu item</a></li>
									<li><a href="#abc">menu item</a></li>
									<li><a href="#abd">menu item</a></li>
								</ul>
							</li>
							<li>

..........
					<li>
						<a href="#">menu item</a>
					</li>	
				</ul>
...........


L'insertion des scripts et css :

//link to the CSS files for this menu type 
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> 
 
// link to the JavaScript files (hoverIntent is optional) 
<script type="text/javascript" src="hoverIntent.js"></script> 
<script type="text/javascript" src="superfish.js"></script>


Le script qui crée le menu et son interactivité (en bref: faire un menu avec la liste qui possède la classe sf-menu) :

// initialise Superfish 
<script type="text/javascript"> 
 
    $(document).ready(function(){ 
        $("ul.sf-menu").superfish(); 
    }); 
 
</script>


C'est tout. Smiley smile
Modifié par Patidou (22 Apr 2009 - 15:46)
Smiley eek Smiley eek Smiley eek Smiley eek
facile!!! j'ai rien compris, que dois je faire de ce code ??? juste ca comme code fera un menu déroulant... ?
Il manque l'appel à jquery et le code HTML du menu est incomplet mais oui il ne faut rien de plus. Tout est expliqué sur le site. Pour le «look», il suffit de modifier le fichier css. Smiley smile

Je ne vois pas ce qu'il y a d'incompréhensible. Smiley biggol
ca serais possible de me dire quoi faire exactement ??
parce que le site est en anglais, déja que j'ai du mal en francais, alors la en anglais je comprends rien.

que faut il rajouter dans le code pour avoir LE bon résultat ???


j'esaye de regader dans les exemples... en fait moi ca serais nav-bar, sera t-il difficile de metre mon style de boutons... ?

l'histoire de plugin c'est quoi ???? qq chose a installer?
sinon j'adore, la facon dont ca s'ouvre, en fondu en quelques sortes... top Smiley langue ... magnifique
Florent V. a écrit :
Les menus déroulants en full-CSS, c'est de la merde. On s'en passera pour le plus grand bonheur des visiteurs. Smiley lol


Pourquoi c'est de la merde ?
Un menu en CSS me semblait plus accessible qu'un menu en javascript (vu que javascript peut etre desactive)
Modérateur
laurent35240 a écrit :

Pourquoi c'est de la merde ?

Sans doute en partie parce que Florent est venu pour plomber l'ambiance( Smiley lol )
Que ce n'est définitivement pas, selon moi, le rôle de css de gérer du contenu dynamique...
Que masquer du contenu à grand coup de display:none, c'est efficace certes, mais que cela a également l'inconvénient de le masquer à certains (tous ?) lecteurs d'écran (ce n'est clairement pas le but...)
Que l'interopérabilité reste épineuse à obtenir, etc...j'oublie certainement des choses (mais il fait beau dehors Smiley cligne )
laurent35240 a écrit :

Un menu en CSS me semblait plus accessible qu'un menu en javascript (vu que javascript peut etre desactive)

L'argument ne tient pas, css est tout aussi desactivable que javascript Smiley cligne
Modifié par 6l20 (22 Apr 2009 - 18:19)
laurent35240 a écrit :


Pourquoi c'est de la merde ?
Un menu en CSS me semblait plus accessible qu'un menu en javascript (vu que javascript peut etre desactive)

Au contraire c'est inaccessible pour plein de raisons déjà évoquées sur ce forum Smiley cligne
no-fonte a écrit :
bon alors ca roule pour ce que me parle Patidou
PS, si tu veux plus d'infos monpseudo@hotmail.fr Smiley langue

Pas d'infos par mail, autant en faire profiter tout le monde sur le forum. Smiley cligne

Sinon je vais pas faire ton site à ta place hein, je regarde ton histoire de menu et après il faudra se débrouiller, quitte à revenir poser des questions. Smiley smile
Modifié par Patidou (22 Apr 2009 - 21:46)
no-fonte a écrit :
ca serais possible de me dire quoi faire exactement ??

Ben oui. Dans l'ordre:

1. Apprendre l'anglais (ça sert toujours, notamment dans le domaine dont il est question ici).
2. Apprendre HTML.
3. Apprendre CSS.
4. Apprendre JavaScript.

no-fonte a écrit :
que faut il rajouter dans le code pour avoir LE bon résultat ???

Du sel et de la coriandre.

no-fonte a écrit :
sera t-il difficile de metre mon style de boutons... ?

En personnalisant le CSS, voire le HTML, ça devrait être jouable.

no-fonte a écrit :
l'histoire de plugin c'est quoi ???? qq chose a installer?

5. Lire la documentation de base de jQuery.

Bonne continuation. Smiley smile

Sinon il y a aussi des ressources en français sur HTML, CSS, JavaScript, et également sur jQuery. Donc le (1) peut éventuellement être zappé, même si à l'occasion ça aide bien. Pour la documentation du plugin Superfish, par contre, il faut voir si on trouve une documentation non officielle ou des billets de blog en français sur son utilisation.

Edit: j'ai fait une recherche pour des explications ou un tutoriel sur Superfish en français, mais sans succès.
Modifié par Florent V. (22 Apr 2009 - 21:18)
Pages :