/*******************************************************************************
* EXEMPLE DE MISE EN PAGE HTML POUR LE MENU
*
*
*
* Menu Item
*
*
*
* ------------------------------------------------------------------------------
*******************************************************************************/
ul.rMenu, ul.rMenu ul, ul.rMenu li, ul.rMenu a
{
display: block; /* make these objects blocks so they're easier to deal with */
margin: 0;
padding: 0; /* get rid of padding/margin values that these elements may have by default */
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
font-weight: bold;
PADDING-LEFT: 0px;
/*border-style:outset;
border-width:1px;
border-color:silver;*/
}
ul.rMenu, ul.rMenu li, ul.rMenu ul
{
list-style: none; /* proper browsers don't require this because
block elements (see previous rule set) cannot
take any list-style property. meaning
existing list-style properties are removed
when they are set to display: block. IE7
seems to ignore this fact under certain
situations so we explicitly set it here
even though it's, technically, incorrect
CSS (but it will validate). */
}
ul.rMenu ul
{
display: none; /* hide the sub-menus until needed */
position: absolute; /* remove the sub-menus from the flow of the
layout so when they pop they don't cause any
disfiguration of the layout */
}
ul.rMenu li
{
position: relative; /* so sub-menus position relative to their
parent LI element */
}
ul.rMenu li:hover
{
z-index: 999; /* make sure this and any sub-menus that pop
appear above everything else on the page */
}
ul.rMenu li:hover > ul
{
display: block; /* show the sub-menu */
}
/*******************************************************************************
* Extended Menu Mechanics
*
* These rules exist only for specific menu types, such as horizontal or
* vertical menus, right or left aligned menus.
*/
ul.rMenu-hor li
{
float: left;
width: auto;
}
ul.rMenu-ver li
{
float: none; /* clear this so vertical sub-menus that are
children of horizontal menus won't have
their LI widths set to auto. */
}
ul.rMenu-ver, ul.rMenu-ver ul
{
width: 180px; /* sub-menus need a defined width, especially
vertical sub-menus. salt to taste. */
}
/************************************************************
ICI ON CENTRE LE MENU EN AJOUTANT LA BALISE SUIVANTE AU MENU
*
*/
div.rMenu-center ul.rMenu
{
float: left;
position: relative;
left: 50%;
}
div.rMenu-center ul.rMenu li
{
position: relative;
left: -50%;
}
div.rMenu-center ul.rMenu li li
{
left: auto;
}
/*******************************************************************************
* POSITIONS DES SOUS MENUS
*/
ul.rMenu-hor ul
{
top: auto; /* a value of 100% creates a problem in IE 5.0 and Opera 7.23 */
right: auto;
left: auto; /* typically want a value of 0 here but set to auto for same reasons detailed above */
margin-top: -1px; /* so the top border of the dropdown menu
overlaps the bottom border of its parent
horizontal menu. */
}
ul.rMenu-ver ul
{
left: 60%;
right: auto;
top: auto;
margin-top: -0.5em; /* i prefer top: 80% but this creates a problem
in iCab so negative top margin must be used.
salt to taste. */
}
/*******************************************************************************
* PRESENTATION DES MENUS - General
*/
ul.rMenu li a
{
border: solid 1px #8DAC13/* Couleur de contour des boutons */
}
ul.rMenu-hor li
{
margin-bottom: -1px;
margin-left: -1px;
}
ul.rMenu-h
{
padding-left: 1px ;
}
ul.rMenu-ver li
{
margin-left: 0;
margin-top: -1px;
}
ul.rMenu-ver
{
border-top: solid 1px #FFF;
}
ul.rMenu li a
{
padding: 2px 5px 3px; /* 2px top, 3px bottom always seems to
provide the most visually balanced
padding */
}
ul.rMenu li a:link, ul.rMenu li a:hover, ul.rMenu li a:visited, ul.rMenu li a:active
{
text-decoration: none;
color:#fff;
}
ul.rMenu li.sfhover a:active,
ul.rMenu li:hover a:active
{
color: #fff;
background-color: #666;
}
ul.rMenu li
{
background-color: #F4B84A; /* Couleur de fond des boutons */
}
ul.rMenu li:hover,
ul.rMenu li.sfhover
{
background-color: #8DAC13; /* Couleur de fond des boutons parents */
color: #fff;
}
ul.rMenu li a:hover
{
background-color: #8DAC13; /* Couleur de fond des boutons au survol */
color: #fff;
}
/*******************************************************************************
* AJOUT Image de direction du menu
*/
ul.rMenu li.rMenu-expand a,
ul.rMenu li.rMenu-expand li.rMenu-expand a,
ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand a
{
padding-right: 25px;
background-image: url("images/droite.gif");
background-repeat: no-repeat;
background-position: 100% 50%;
}
ul.rMenu-vRight li.rMenu-expand a,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand a,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-hRight li.rMenu-expand a,
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand a,
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand li.rMenu-expand a
{
padding-right: 5px;
padding-left: 20px;
background-image: url("images/gauche.gif");
background-repeat: no-repeat;
background-position: -5px 50%;
}
ul.rMenu-hor li.rMenu-expand a
{
padding-left: 5px; /* reset padding */
padding-right: 15px;
background-image: url("images/bas.gif");
background-position: 100% 50%;
}
ul.rMenu li.rMenu-expand li a,
ul.rMenu li.rMenu-expand li.rMenu-expand li a,
ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li a
{
background-image: none;
padding-right: 5px; /* reset padding */
padding-left: 5px; /* reset padding */
}
/*******************************************************************************
* HACKS : General
*
Hacks pour certains navigateurs
*/
* html ul.rMenu
{
display: inline-block; /* this is for IE/Mac. it forces IE/Mac to
expand the element's dimensions to contain
its floating child elements without a
clearing element. */
/* \*/ display: block; /* override above rule for every other
browser using IE/Mac backslash hack */
position: relative; /* IE 5.0/Mac needs this or it may clip the
dropdown menus */
/* \*/ position: static;/* reset position attribute for IE/Win as it
causes z-index problems */
}
* html ul.rMenu ul
{
float: left; /* IE/Mac 5.0 needs this and IE/Win 6 and earlier
don't show any problems with applying this
rule. */
}
ul.rMenu ul
{
background-color: #fff; /* IE/Win (includeing 7) needs this on an object
that hasLayout so that it doesn't "look through"
the menu and let any object (text) below the
menu to gain focus, causing the menu to
disappear. application of this rule does not
cause any rendering problems with other browsers
as the background color his covered by the
menu itself. */
}
* html ul.rMenu-ver li,
* html ul.rMenu-hor li ul.rMenu-ver li
{
/* the second selector in this rule is there
because of problems IE/Mac has with
inheritance and what rules should take
precedence. and to serve as a reminder on
how to work around the issue if it's
encountered again down the road. */
width: 100%;
float: left;
clear: left; /* IE6 (and earlier?) stick space below any LI
in :hover state with a sub-menu. floating
the LIs seems to work around this issue. But
note that this also triggers hasLayout
because we need a width of 100% on floats.
But hasLayout on LIs breaks the menu in IE7.
So we really need to be careful not to let
floats get into anything other than IE6
and earlier. IE Mac seems to need this
too for some other reason. */
}
ul.rMenu-ver li a
{
min-width: 0; /* trigger hasLayout for IE7 on anchor
elements. without hasLayout on anchors
they would not expand the full width
of the menu. this rule may not trigger
hasLayour in later versions of IE and
if you find this system broken in new
versions of IE, this is probably the
source. */
}
* html ul.rMenu-ver li a
{
height: auto; /* triggers hasLayout for IE/Mac */
/* \*/ height: 100%; /* trigger hasLayout for IE6 and earlier. does
not work for IE7 */
}
* html ul.rMenu-h
{ /* hide from IE Mac \*/
padding-left: 2px; /* IE6 and earlier double the negative margins
on the LI elements of horizontal menus. this
is because the LIs float but the parent
isn't floating. this can be fixed by floating
rMenu-hor but I'd rather not float it so I just
double up the padding used to compensate. */
}
* html ul.rMenu-hor li
{
width: 6em; /* IE Mac doesn't do auto widths so specify a width
for the sake of IE/Mac. Salt to taste. */
/* \*/ width: auto; /* now undo previous rule for non Macs by using
the IE Mac backslash comment hack */
}
* html div.rMenu-center
{
width: 100%; /* IE/Mac needs this to force the div to 100%
width */
/* \*/ width: auto; /* undo previous rule for non Macs */
}
/*******************************************************************************
* HACKS : Suckerfish
*
* IE6 and earlier do not support the :hover pseudoclass and so javascript is
* used to add the "sfhover" class of any LI element that the mouse is currently
* over. This method is called suckerfish and you can read up on it at:
* http://www.htmldog.com/articles/suckerfish/dropdowns/
*
* NOTE: this allows for support of dropdown menus up to 3 levels deep. if you
* want to support greather menu depth you need to alter these selectors.
* read the above mentioned website for more info on how to do that.
*/
* html ul.rMenu li.sfhover
{
z-index: 999;
}
* html ul.rMenu li.sfhover ul ul,
* html ul.rMenu li.sfhover ul ul ul
{
display: none; /* IE/Suckerfish alternative for browsers that
don't support :hover state on LI elements */
}
* html ul.rMenu li.sfhover ul,
* html ul.rMenu li li.sfhover ul,
* html ul.rMenu li li li.sfhover ul
{
display: block; /* ^ ditto ^ */
}
/*******************************************************************************
* HACKS : Clearfix
*
* Clearfix provides a means to for an element to contain all it's floated
* children even if it's not normally tall enough to do so. For more information
* on clearfix please see:
* http://www.positioniseverything.net/easyclearing.html
*/
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix
{
min-width: 0; /* trigger hasLayout for IE7 */
display: inline-block;
/* \*/ display: block; /* Hide from IE Mac */
}
* html .clearfix
{
/* \*/ height: 1%; /* Hide from IE Mac */
}
/******************************************************************************/