Pages :
Première partie

D'abord il te faut quelque connaissance de base, je te propose ce tutoriel pour débutant. Après tu pourras passer à la suite.

L'important dans une page html c'est le contenu celui-ci doit être accessible javascript désactivé et css désactivé. Voici donc une page simple (sans scripts) avec à gauche les rubriques que nous allons transformer en menu déroulants. Regarde la source pour voir comment c'est construit : le code html est très simple, le code css aussi. Smiley cligne

La deuxième partie dans 1 heure ou 2.
Modifié par Patidou (23 Apr 2009 - 13:27)
Deuxième partie

On prépare l'activation des menus en les empêchant de se déployer au chargement de la page. Pour cela on ajoute cette ligne dans le head :

	<script type="text/javascript" >
		document.documentElement.className+=" hasJS";
	</script>


Elle va ajouter une classe appelée "hasJS" sur l'élement html avant le chargement complet de la page. On complètera le fichier css par ces quelques lignes :

/*avec javascript*/

.hasJS #menu {
	float: none;
	width: auto;

}
.hasJS #menu ul, .hasJS #menu li {
	border: none;
	margin: 0;

}

.hasJS #menu ul ul {
	display: none;
	visibility: hidden;
}

.hasJS #menu h2 {
	position: absolute;
	left: -5000px;
	top: -5000px;
}

.hasJS #content {
	margin-left: .5em;
	padding-top: 3em;
	width: auto;
	clear: both;
}


Les sous-menus sont fermés, le h2 envoyé en dehors de la page.

Voir le résultat ici
Modifié par Patidou (23 Apr 2009 - 16:06)
Troisième étape

On ajoute les script et fichiers nécessaire qui sont disponibles au téléchargement ici dans des dossiers au niveau de la page (js et css).

On ajoute deux classes (sf-menu et sf-navbar) sur l'élément <ul> dans le code html. On pourra mettre aussi une classe "current" sur le <li> de la page en cours. On ajoute les liens vers les css additionelles dans le <head> et vers les fichiers javascript avant la fin de <body>.

Et voilà le résultat final.
ca rend bien Smiley biggrin
merci
est-il possible dans ce genre de menus, que la sous catégorie apparaisse sous forme de texte dans une navbar, et que la sous sous catégorie apparaisse dans un cadre comme actuellement ?
no-fonte a écrit :
a partir de la partie 3 je comprends plus rien Smiley langue


Je vais la reprendre plus en détail… Smiley cligne

P.S. : l'ajout des classes sur le menu se fait maintenant en javascript, donc si JS est désactivé on retrouve vraiment le design original. Smiley cligne
merci beaucoup!!!
c'est un bug, ou c'est normal le fait que quand on quitte un sous menu, il ne sse ferme pa et reste "déplié" ?
C'est une fonctionnalité de superfish : le <li> qui a la classe «current» reste ouvert. Si tu ne veux pas de ce comportement, il suffit de ne pas mettre la classe.
Modifié par Patidou (24 Apr 2009 - 10:42)
d'accord, je ne la metterais pas alors Smiley cligne

pourais tu m'expliquer exactement que qu'il faut faire a l'étape 3 ????
voila ou j'en suis :'(
ca donne le meme résultat qu'au 2, meme si j'ai essayé de comprendre et placer le code. voici le code html :

<?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">
		<style type="text/css" media="screen">
		@import url(css/screen.css);
		@import url(css/superfish.css);
		@import url(css/superfish-navbar.css);
		</style>
		<style type="text/css" media="print">
		@import url(css/print.css);
		</style>
		<script type="text/javascript" >
		document.documentElement.className+=" hasJS";
	    </script>


</head>
<body>

    <div id="header"><!-- DIV du Header --></div>
	
	<div id="conteneur"><!-- DIV du Conteneur -->
		<div id="menu">
			<h2>Rubriques</h2>
			<ul>
				<li><a href="">Débutants</a></li>
				<li><a href="">Materiel</a>
					<ul>

						<li><a href="">Materiel.1</a></li>
						<li><a href="">Materiel.2</a></li>
						<li><a href="">Materiel.3</a></li>
					</ul>
				</li>
				<li><a href="">Blessures</a>
					<ul>

						<li><a href="">Blessures musculaires </a>
							<ul>
								<li><a href="">Manque de souplesse</a></li>
								<li><a href="">Manque d'échauffement</a></li>
							</ul>
						</li>
						<li><a href="">Blessures osseuses</a></li>

					</ul>
				</li>
				<li><a href="">Programmes</a></li>
			</ul>
		</div>
      
	</div>	
		
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="js/superfish.js"></script>
	<script type="text/javascript" src="js/hoverIntent.js"></script>
	<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
	<script type="text/javascript" >
		$(document).ready(function(){ 
			$("#menu>ul").addClass("sf-menu");
			$("#menu>ul").addClass("sf-navbar");
			$("ul.sf-menu").superfish({ 
				pathClass:  'current' 
			}); 
		}); 
	</script>


</body>
</html>



voici le code du css:

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;

}


/*avec javascript*/



.hasJS #menu {

	float: none;

	width: auto;



}

.hasJS #menu ul, .hasJS #menu li {

	border: none;

	margin: 0;



}



.hasJS #menu ul ul {

	display: none;

	visibility: hidden;

}



.hasJS #menu h2 {

	position: absolute;

	left: -5000px;

	top: -5000px;

}



.hasJS #content {

	margin-left: .5em;

	padding-top: 3em;

	width: auto;

	clear: both;

}


et voila comment est organisé le dossier :

<modération par Heyoan>
Merci d'éviter les images trop grandes qui déforment le forum. Préférer "générer un aperçu" ou mieux encore dans ce cas :
/css
/js
/theme
index.html
style.css
</modération>

Modifié par Heyoan (24 Apr 2009 - 14:51)
Bon !!!
j'ai avancé, enfait c'était une erreur de frappe, mais c amarche, c'est moche petit et pas aligné mais ca marche, voila ce que ca donne :
http://playmusculation.olympe-network.com/play-m/index.htm

je souhaiterais maintenant modifier l'apparence, comment faire avec le css, sur quelles div agir ?

voici el code xhtml+ css (en dessous)

<?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">
		<style type="text/css" media="screen">
		@import url(css/screen.css);
		@import url(css/superfish.css);
		@import url(css/superfish-navbar.css);
		</style>
		<style type="text/css" media="print">
		@import url(css/print.css);
		</style>
		<script type="text/javascript" >
		document.documentElement.className+=" hasJS";
	    </script>


</head>
<body>

    <div id="header"><!-- DIV du Header --></div>
	
	<div id="conteneur"><!-- DIV du Conteneur -->
		<div id="menu">
			<h2>Rubriques</h2>
			<ul>
				<li><a href="">Débutants</a></li>
				<li><a href="">Materiel</a>
					<ul>

						<li><a href="">Materiel.1</a></li>
						<li><a href="">Materiel.2</a></li>
						<li><a href="">Materiel.3</a></li>
					</ul>
				</li>
				<li><a href="">Blessures</a>
					<ul>

						<li><a href="">Blessures musculaires </a>
							<ul>
								<li><a href="">Manque de souplesse</a></li>
								<li><a href="">Manque d'échauffement</a></li>
							</ul>
						</li>
						<li><a href="">Blessures osseuses</a></li>

					</ul>
				</li>
				<li><a href="">Programmes</a></li>
			</ul>
		</div>
      
	</div>	
		
    <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/jquery.hoverIntent.js"></script> 
    <script type="text/javascript" src="js/superfish.js"></script> 
    <script type="text/javascript" src="js/supersubs.js"></script>
	<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
	
	<script type="text/javascript" >
		$(document).ready(function(){ 
			$("#menu>ul").addClass("sf-menu");
			$("#menu>ul").addClass("sf-navbar");
			$("ul.sf-menu").superfish({ 
				pathClass:  'current' 
			}); 
		}); 
	</script>


</body>
</html>









______________________________________________________________________________
css
______________________________________________________________________________

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;

}


/*avec javascript*/



.hasJS #menu {

	float: none;

	width: auto;



}

.hasJS #menu ul, .hasJS #menu li {

	border: none;

	margin: 0;



}



.hasJS #menu ul ul {

	display: none;

	visibility: hidden;

}



.hasJS #menu h2 {

	position: absolute;

	left: -5000px;

	top: -5000px;

}



.hasJS #content {

	margin-left: .5em;

	padding-top: 3em;

	width: auto;

	clear: both;

}




Bonjour, je voudrais bien que Florent V. m'explique en quoi le menu CSS de... ce site http://www.scoradis.com, par exemple est "un ratage complet en termes d'ergonomie et d'accessibilité" (où le javascript ne sert que pour IE6 qui ne connait pas le sélecteur "parent > enfantImmediat", et ne serait pas utile s'il n'y avait pas de sous-sous-menu).

Histoire que je ne me couche pas idiot.

Merci.
Modérateur
laruiss a écrit :
Bonjour, je voudrais bien que Florent V. m'explique en quoi le menu CSS de... ce site http://www.scoradis.com, par exemple est "un ratage complet en termes d'ergonomie et d'accessibilité"
En attendant que Florent passe par ici (ou au cas où il ne passerait pas) son plus gros problème vient du fait qu'on ne peut pas naviguer au clavier (tabulations) or tout le monde ne dispose pas d'une souris, que ce soit pour des raisons de handicap ou de matériel.

Et d'ailleurs même avec une souris il n'est pas facile de naviguer dans les rubriques qui sont minuscules...
Oui, en réfléchissant et en me renseignant un peu (notamment sur les lecteur d'écran), il y a d'autres problèmes...

Pour le clavier, c'est pas faux.

Les items du menus sont effectivement petits, et il n'y a pas de délai avant que les menus se "rétractent".

En fait, je suis plutôt d'accord avec lui, c'est juste que je trouve qu'il le dit avec mmmh... un tantinet d'exagération ("ratage complet" et "c'est de la merde"), au lieu de dire "les menus CSS, c'est bien, mais une couche javascript par dessus permet de gagner beaucoup en accessibilité et en ergonomie".

</mon_avis>

@+
Je crois que Florent faisait de l'humour Smiley cligne

laruiss a écrit :
"les menus CSS, c'est bien, mais une couche javascript par dessus permet de gagner beaucoup en accessibilité et en ergonomie".

</mon_avis>

@+


Le problème c'est que justement ce n'est pas bien du tout. Smiley cligne
Pages :