français

a/X développeur en vacances

There are many sources of information about menus, JavaScript or CSS, everywhere on the web. Proposed solutions are more or less elegant or clumsy.

I choose to use "true" CSS, list based, menus. Headache comes, as usual, from IE which is CSS dummy and ignores the :hover pseudo-class. Even if IE7 is better, there are still too many IE6 users we can't neglect.

So, I adopted csshover.htc, which adds this capacity to IE6. This is not a fully satisfying solution, there is still to correctly manage sub-menus, without the selector combinator >.

This site and the HoP library are using a base stylesheet for menus, which configures pop-up menus, with a main menu which can be vertical or horizontal. Sub-menus at lower levels are always vertical/lateral.

For the visitor passing by looking for such a menus configuration, here are the stylesheets :

Those two stylesheets, included in HoP distribution, give a base style to menus. If you wish to see how they are complemented on this site, here are the sheets :

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