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 :
hop_menu.css
(display, download)
This is the clean CSS.
It uses descendant and sibling combinators >
et +
.
It's the best choice if you can do without IE6 compatibility.
Main horizontal menus are specified with the menu_horiz
class.hop_menu_IE6.css
(display, download)
Tweaked version. It declares the csshover.htc
behavior and replace >
and +
combinators with brute cascade rules.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 :
a_x.css
(display, download)
Base stylesheet of this site.a_x-h.css
(display, download)
Horizontal menu supplement. To allow dynamic style change, it does not use the menu_horiz
class and rather
use the #menu
id selector./* @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; }
/* @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*/ }