English

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 :

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 :

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*/
}
	

Valid XHTML 1.0 Strict