a/X : développement web 2

Il y a énormément de « littérature » concernant les menus, en JavaScript ou en CSS, un peu partout sur le web. Les solutions proposées sont plus ou moins élégantes ou balourdes.

J'ai fait le choix d'utiliser les menus « pur » CSS, basés sur les listes. Le casse-tête, comme toujours vient de IE qui est nul en CSS et qui ne gère pas la pseudo classe :hover. Même si la version 7 améliore les choses, il reste encore trop d'utilisateurs sous IE6 pour pouvoir les négliger.

J'ai donc adopté csshover.htc, qui ajoute cette capacité à IE. La solution n'est pas totale car il reste à gérer correctement les sous menus, sans le combinateur de sélecteur >.

Ce site et la bibliothèque HoP utilisent une feuille de style de base commune pour les menus, qui paramètre des menus surgissant, avec un menu principal initial qui peut être vertical ou horizontal. Les sous-menus de niveau inférieurs sont toujours verticaux/latéraux.

Pour le lecteur qui passera ici à la recherche d'une telle configuration pour les menus, voici les sources des feuilles de styles :

hop_menu.css (afficher, télécharger) C'est le CSS « propre », sans bidouille. Il utilise les combinateurs de descendance et de voisinage, > et +. Il est à préférer si vous pouvez vous passer de la compatibilité IE6. Les menus principaux horizontaux sont spécifiés avec la classe menu_horiz.
hop_menu_IE6.css (afficher, télécharger) Version adaptée. Déclare le behavior csshover.htc et remplace les combinateurs > et + par de bêtes règles en cascade.

Ces deux feuilles de styles, incluses dans HoP, donnent aux menus un style de base. Si vous souhaitez voir comment elles sont complétées sur ce site, voici les feuilles :

a_x.css (afficher, télécharger) La feuille de style de base de ce site.
a_x-h.css (afficher, télécharger) Le supplément pour menu horizontal. Pour pouvoir faire le changement dynamiquement, on n'utilise pas la classe menu_horiz, on utilise le sélecteur d'id #menu.

hop_menu.css

hop_menu_IE6.css

views/a_x.css

/* @override 
	http://10.37.129.2:8888/~max/a_X/a_X/views/a_x.css
*/

html {
	background: url(logo.png) no-repeat left top;
}

body {
	margin: 0;
	font: 12px Verdana, sans-serif;
	color: #360042;
}

#lang {
	position: absolute;
	top: 1em;
	left: 120px;
	margin: 0;
}

#lang a {
	color: gray;
}

#lang a:hover {
	color: #360042;
}

object#fond_logo {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	/*border: 1px solid orange;*/
}

h1, h2, h3, h4 {
	font-family: Futura, "Trebuchet MS", Verdana, sans-serif;
}

h1#titre_page {
	white-space: nowrap;
	margin: 30px 1em 50px 400px;
	height: 60px;
	font-size: 2.5em;
	font-weight: normal;
}

span.a_X {
	color: #FF7C00;
	font-size: 1.5em;
}

code, samp, pre.code, .masque pre {
	color: #014a63;
	font-family: courier;	
	font-size: 1.1em;
}

code {
	font-weight: bold;
}

.masque, pre.code {
	clear: both;
	overflow: auto;
	border: 1px solid #740e00;
	padding: 1em;
}

abbr {
	cursor: help;
	color: #014a63;
	font-weight: bold;
	font-style: italic;
}

#menu {
	width: 400px;
	height: 28em;
	min-height: 250px;
	float: left;
	position: relative;
	margin-bottom: 1.5em;
	margin-right: 11em;
	z-index: 1;
	/*position: absolute;
	left: 450px;
	top: 180px;*/
}

#menu_g {
	/*right: 0;*/
	left: 400px;
	font: 1.1em Futura, "Arial Narrow", "Helvetica Neue", sans-serif;
}

#menu a {
	text-decoration: none;
	white-space: nowrap;
	color: #a6a6a6;
	/*display: inline-block;*/
	width: 100%;
}

ul.hop_menu {
	background: #740e00;
	color: #bfbfbf;
}

ul.hop_menu li:hover {
	background-color: #360042;
}

ul.hop_menu li.actif {
	background-color: #ff7c00;
}

#menu li.actif a {
	color: #420050;
}

div#travail {
	/*position: absolute;
	top: 400px;*/
	margin: 2em;
	margin-left: 190px;
	/*margin-left: 65px;*/
}

#travail .contrib {
	color: #420050;
	text-shadow: #ff7c00 0 0 1em;
	font-weight: bold;
	white-space: nowrap;
}

#travail>h3 {
	margin-left: -60px;
}

#travail h5 {
	/*margin-left: -2.5em;*/
}

.encart {
	padding: 0 1em;
	border-right: 1em solid #740e00;
}

div.centre {
	margin-left: 400px;
	width: 16em;
	/*display: table;
	margin: 0.5em auto;*/
}

dl.ligne {
	white-space: nowrap;
}

dl.ligne dt {
	padding-right: 1em;
	font-weight: bold;
	margin-top: .5em;
	color: #bfbfbf;
}

dl.ligne dd {
	margin-top: .2em;
	/*padding-left: 3em;*/
	/*display: inline;*/
}

#travail em {
	font-weight: bold;
	font-style: italic;
}

#travail h2 {
	color: #3f3f3f;
	font-size: 1.5em;
}

#travail dt {
	font-weight: bold;
	margin-top: 1em;
	color: #3f3f3f;
}

#travail dd {
	margin-bottom: .5em;
	margin-top: .5em;
}

#travail a {
	color: #360042; /*IE!!*/
	/*color: inherit;*/
}

#travail ul li {
	margin-top: .5em;
	line-height: 1.4em;
}

.masque h3 {
	border-bottom: 1px solid #740e00;
	border-right: 1px solid #740e00;
	display: inline-block;
	padding: .5em 1em;
	margin: -1em 0 1em -1em;
}

p img, dd img {
	vertical-align: bottom;
	border: none;
}

.glissable p {
	cursor: move;
}

.glissable p a {
	cursor: pointer;
}

.clear {
	clear: both;
}

div.toc {
	margin-left: 210px; /*400 -190*/
	padding-left: 11em;
	font-weight: bold;
}

.toc ul {
	margin:  0;
	padding-left: 2em;
	list-style-type: none;
}

.toc>ul {
	padding: 0;
}

.toc a {
	text-decoration: none;
}

#travail .toc ul li {
	margin: 0;
}

.fold, .no_fold {
	padding-left: 2em;	
}

.fold {
	margin-top: -2.5em;
	margin-bottom: 0;
	padding-top: 2em;
	overflow: hidden;
	height: 0;
}

.fold:hover {
	height: auto;
	overflow: auto;
	padding-bottom: 1em;
}

#travail a.download {
	display: block;
	position: relative;
	float: right;
	padding:  1em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	background-color: #420050;
	text-decoration: none;
	color: #ff7c00;
	font-weight: bold;
	margin-bottom: 1em;
}

.download .contrib {
	color: inherit !important;
}

.pied {
	text-align: center;
	margin-top: 2em;
}

.dmsq {
	cursor: pointer;
}

views/a_x-h.css

/* @override 
	http://127.0.0.1:16080/~max/a_X/a_X/views/a_x-h.css
	http://10.37.129.2:8888/~max/a_X/a_X/views/a_x-h.css
*/

@import url("a_x.css");

#menu {
	float: none;
	width: 100em;
	height: 4em;
	margin-bottom: 1em;
	margin-right: 0 !important;
	min-height: 85px;
	/*
	left: 450px;
	top: 180px;*/
}

#menu_g {
	white-space: nowrap;
	left: 270px;
	top: 10px;
}

#menu_g > li {
	display: inline;
}

#menu_g > li > ul.hop_menu {
	position: absolute;
	left: 0;
	top: 100%;
}

#travail {
	margin-left: 220px !important;
}

#menu_g > li + li {
	border-top: none;
	border-left: .15em solid gray; /* (1) */
}

#menu_g > li.has_sub_menu {
	background-image: url(../../hop/widgets/grey_down.gif);
	z-index: 1; /*opera*/
}

#menu_g {
	height: 1.85em; /* (2) */
}

#menu_g > li {
	top: .35em; /* (2) */
}

#menu_g > li > ul.hop_menu {
	margin-left: -.15em; /* (1) */
	/*margin-top: -.15em;  (1) */ /* (2) */
	/*min-width: 100%;*/
	z-index: 2; /*opera*/
}

a/X développeur en vacances

hop_menu.css

hop_menu_IE6.css

views/a_x.css

views/a_x-h.css