382 lines
7.3 KiB
CSS
382 lines
7.3 KiB
CSS
|
/* KHNAV */
|
||
|
|
|
||
|
|
/*******************************/
|
||
|
|
/* trucs pour mobiles et accessibilité, à pas voir en dehors de ces cas */
|
||
|
|
|
||
|
|
/*Menu spécial smartphone, invisible sinon */
|
||
|
|
#khnav_mobile div.khnav_menu-icon {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* lien d'évitement ; pour accessibilité */
|
||
|
|
.khnav_skip,
|
||
|
|
.khnav_skip a
|
||
|
|
{
|
||
|
|
position: absolute;
|
||
|
|
left:-1000px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*******************************/
|
||
|
|
/* Général */
|
||
|
|
.khnav_menu a,
|
||
|
|
.khnav_menu a:link,
|
||
|
|
.khnav_menu a:hover,
|
||
|
|
.khnav_menu a:visited
|
||
|
|
{
|
||
|
|
text-decoration:none;
|
||
|
|
color:#0D58A6;
|
||
|
|
font-weight:normal;
|
||
|
|
display:inline-block;
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
.khnav_menu a:hover
|
||
|
|
{
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
#khnav
|
||
|
|
{
|
||
|
|
/* position:absolute; enlevé pour éviter que les éléments des cms passent dessous*/
|
||
|
|
margin-bottom:0;
|
||
|
|
left:0px;right:0px;
|
||
|
|
top:0px;height:35px;
|
||
|
|
z-index:10000;
|
||
|
|
padding-left:10%;
|
||
|
|
|
||
|
|
background-color: rgba(255, 255, 255, 0.6);
|
||
|
|
color:#0D58A6;
|
||
|
|
|
||
|
|
font-size: 14px;
|
||
|
|
-webkit-text-size-adjust: 100%;
|
||
|
|
font-weight: normal;
|
||
|
|
font-family: "Verdana","Arial","Helvetica",sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.khnav_menu
|
||
|
|
{
|
||
|
|
float:left;
|
||
|
|
list-style: none;
|
||
|
|
padding:0;
|
||
|
|
margin-top:0px;
|
||
|
|
text-decoration: none;
|
||
|
|
padding-left:24px;
|
||
|
|
z-index:10000;
|
||
|
|
}
|
||
|
|
ul.khnav_menu li
|
||
|
|
{
|
||
|
|
float:left;
|
||
|
|
line-height:0em;
|
||
|
|
margin:0px 0px;
|
||
|
|
padding-top:14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.khnav_menu li.khnav_logo
|
||
|
|
{
|
||
|
|
margin-top:-8px;
|
||
|
|
height:24px;
|
||
|
|
margin-right:14px;
|
||
|
|
}
|
||
|
|
ul.khnav_menu li.khnav_menu
|
||
|
|
{
|
||
|
|
margin-top:2px;
|
||
|
|
/* position:relative; */
|
||
|
|
|
||
|
|
margin-right:25px;
|
||
|
|
padding-left:5px;
|
||
|
|
padding-right:5px;
|
||
|
|
|
||
|
|
height:20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Le triangle pour dire "dépliez moi" */
|
||
|
|
|
||
|
|
.kh_caret:before {
|
||
|
|
content: '';
|
||
|
|
position: relative;
|
||
|
|
border-top: 6px solid #4188D3;
|
||
|
|
border-left: 6px solid transparent;
|
||
|
|
border-right: 6px solid transparent;
|
||
|
|
|
||
|
|
margin-left:105%;
|
||
|
|
}
|
||
|
|
/* parce que mozilla est tout crado pour ça */
|
||
|
|
@-moz-document url-prefix()
|
||
|
|
{
|
||
|
|
.kh_caret:before {
|
||
|
|
top:8px
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* La partie qui se déplie */
|
||
|
|
|
||
|
|
ul.khnav_dropdown
|
||
|
|
{
|
||
|
|
/* En supprimant cette ligne et en ajoutant la largeur dans ul.khnav_menu li.khnav_menu
|
||
|
|
le menu s'agrandira a la taille du menu déroulant,
|
||
|
|
mais je trouve que c'est une mauvaise idée car cela déplace les autre menus
|
||
|
|
ce qui est, à mon avis, plus frustrant qu'utile quand celui ci-va fuir la souris
|
||
|
|
lorsque que le menu precédent va retrouver sa taille.
|
||
|
|
De plus, des menus qui bougent sans arrêt cela donne un resultat brouillon, moin lisible et moin agréable au final.
|
||
|
|
je préfere la stabilité, qui au final ne rend pas les choses si moche que ça.
|
||
|
|
*/
|
||
|
|
position:absolute;
|
||
|
|
/* Pour les test/design, ne commenter/desactivé que cette ligne
|
||
|
|
si vous voulez que le menu déroulant reste affiché sans devoir passer la souris dessus
|
||
|
|
*/
|
||
|
|
display:none;
|
||
|
|
z-index:10000;
|
||
|
|
|
||
|
|
padding:0;
|
||
|
|
margin-top:20px; /* pose souci avec le triangle */
|
||
|
|
list-style: none;
|
||
|
|
left:inherit;margin-left:-5px;
|
||
|
|
top:5px; /*pose souci suivant les cms... */
|
||
|
|
background-color:#ffffff;
|
||
|
|
width:auto;
|
||
|
|
|
||
|
|
/* Adapter la largeur en fonction de l'entrée la plus longue
|
||
|
|
pour eviter que le menu ne se redimensionne en passant dessus.
|
||
|
|
Inutile de se prendre la tête avec un systeme dynamique pour un menu qui
|
||
|
|
n'est pas destiné a changer dynamiquement voir même quasiment jamais.
|
||
|
|
*/
|
||
|
|
min-width:272px;
|
||
|
|
padding-bottom:14px;
|
||
|
|
}
|
||
|
|
ul.khnav_menu li.khnav_menu:hover ul.khnav_dropdown
|
||
|
|
{
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
ul.khnav_dropdown li.khnav_menu:after
|
||
|
|
{
|
||
|
|
float:none;position:absolute;
|
||
|
|
margin:0;padding:0;
|
||
|
|
content:'';
|
||
|
|
|
||
|
|
}
|
||
|
|
ul.khnav_dropdown li.khnav_menu:after
|
||
|
|
{
|
||
|
|
content: '';
|
||
|
|
width: 0; height: 0;
|
||
|
|
border-top: 10px solid transparent;
|
||
|
|
border-right: 20px solid #4188D3;
|
||
|
|
border-bottom: 10px solid transparent;
|
||
|
|
|
||
|
|
line-height:0.8em;
|
||
|
|
margin-right:-4px;
|
||
|
|
right:0px;
|
||
|
|
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.5s;
|
||
|
|
}
|
||
|
|
ul.khnav_dropdown li.khnav_menu:hover:after
|
||
|
|
{
|
||
|
|
content: '';
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.khnav_dropdown li.khnav_menu
|
||
|
|
{
|
||
|
|
float:none;
|
||
|
|
clear:both;
|
||
|
|
white-space:nowrap;
|
||
|
|
|
||
|
|
font-weight:normal;
|
||
|
|
display:block;
|
||
|
|
|
||
|
|
height:auto;
|
||
|
|
padding-right:14px;
|
||
|
|
padding-left:14px;
|
||
|
|
|
||
|
|
padding:5px 14px;
|
||
|
|
padding:5px 0px;
|
||
|
|
width:97%;
|
||
|
|
padding-left:3%;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.khnav_menu li.khnav_menu:hover
|
||
|
|
{
|
||
|
|
color:#0D58A6;
|
||
|
|
|
||
|
|
background-color:#ffffff;
|
||
|
|
border-radius: 8px 8px 0px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
ul.khnav_dropdown:hover li.khnav_menu:hover
|
||
|
|
{
|
||
|
|
|
||
|
|
font-weight:bold;
|
||
|
|
border-radius: 0px 0px 0px 0px;
|
||
|
|
background-color:#ddddff;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Séparation des liens dans le menu déroulant.
|
||
|
|
On utilise simplement un <hr /> dans un "khnav_menu".
|
||
|
|
*/
|
||
|
|
|
||
|
|
ul.khnav_dropdown li.khnav_hr:after,
|
||
|
|
ul.khnav_dropdown li.khnav_hr:hover:after
|
||
|
|
{
|
||
|
|
content:'';
|
||
|
|
border:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.khnav_dropdown li.khnav_hr
|
||
|
|
{
|
||
|
|
border:none;
|
||
|
|
}
|
||
|
|
ul.khnav_dropdown:hover li.khnav_hr:hover
|
||
|
|
{
|
||
|
|
background-color:#ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.khnav_tooltip
|
||
|
|
{
|
||
|
|
position:absolute;
|
||
|
|
|
||
|
|
line-height:1.3em;
|
||
|
|
margin:0;padding:0px;
|
||
|
|
left:272px;
|
||
|
|
top:inherit;margin-top:-20px;
|
||
|
|
|
||
|
|
width:100%;height:auto;
|
||
|
|
white-space:normal;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
.khnav_tooltip header
|
||
|
|
{
|
||
|
|
background-color:#4188D3;
|
||
|
|
color:#ffffff;
|
||
|
|
padding:6px;
|
||
|
|
font-size:14px;
|
||
|
|
font-weight:bold;
|
||
|
|
text-align:center;
|
||
|
|
border-radius:5px 5px 0px 0px;
|
||
|
|
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 1.0s ease-in;
|
||
|
|
transition: opacity 0.5s ease-out;
|
||
|
|
}
|
||
|
|
.khnav_tooltip p
|
||
|
|
{
|
||
|
|
margin:0;
|
||
|
|
background-color:#ffffff;
|
||
|
|
color:#0D58A6;
|
||
|
|
padding:14px;
|
||
|
|
border-radius:0px 0px 5px 5px;
|
||
|
|
border:solid 1px #0D58A6;
|
||
|
|
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 1.8s ease-in;
|
||
|
|
transition: opacity 0.5s ease-out;
|
||
|
|
}
|
||
|
|
ul.khnav_menu li.khnav_menu ul.khnav_dropdown li.khnav_menu:hover .khnav_tooltip,
|
||
|
|
ul.khnav_menu li.khnav_menu ul.khnav_dropdown li.khnav_menu:hover .khnav_tooltip p,
|
||
|
|
ul.khnav_menu li.khnav_menu ul.khnav_dropdown li.khnav_menu:hover .khnav_tooltip header
|
||
|
|
{
|
||
|
|
display:block;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
ul.khnav_dropdown:hover .khnav_tooltip
|
||
|
|
{
|
||
|
|
font-weight:normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
li.khnav_menu hr
|
||
|
|
{
|
||
|
|
padding:0px;
|
||
|
|
padding-bottom:-1.2em;
|
||
|
|
margin:0px;
|
||
|
|
|
||
|
|
padding-left:2px;
|
||
|
|
padding-right:2px;
|
||
|
|
|
||
|
|
height:1px;
|
||
|
|
|
||
|
|
border:none;
|
||
|
|
border-top:solid 1px #000;
|
||
|
|
border-color: #e5e5e5;
|
||
|
|
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
li.khnav_menu img
|
||
|
|
{
|
||
|
|
height:14px;
|
||
|
|
margin-right:4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*******************************/
|
||
|
|
|
||
|
|
/* SEARCH */
|
||
|
|
.khnav_search,
|
||
|
|
.khnav_search iframe
|
||
|
|
{
|
||
|
|
margin:0;padding:0;
|
||
|
|
height:35px;
|
||
|
|
float:right;
|
||
|
|
margin-right:25px;
|
||
|
|
}
|
||
|
|
.khnav_search input[type="text"]
|
||
|
|
{
|
||
|
|
margin:0px;padding:0 4px;
|
||
|
|
margin-top:0.5em;
|
||
|
|
font-size:1em;
|
||
|
|
|
||
|
|
border-top-left-radius: 5px 5px;
|
||
|
|
border-bottom-left-radius: 5px 5px;
|
||
|
|
border:solid 1px #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.khnav_search input[type="submit"]
|
||
|
|
{
|
||
|
|
margin:0;padding:0 4px;
|
||
|
|
margin-left:-4px;
|
||
|
|
font-size:1em;
|
||
|
|
|
||
|
|
border-top-right-radius: 5px 5px;
|
||
|
|
border-bottom-right-radius: 5px 5px;
|
||
|
|
border:none;
|
||
|
|
|
||
|
|
background-color:#4188D3;
|
||
|
|
color:#ffffff;
|
||
|
|
|
||
|
|
font-family: "Verdana","Arial","Helvetica",sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*******************************/
|
||
|
|
|
||
|
|
/* KHFOOTER - style du module khfooter.php */
|
||
|
|
#khfooter {
|
||
|
|
clear:both;
|
||
|
|
margin : 1em auto 2em auto;
|
||
|
|
bottom:0;
|
||
|
|
|
||
|
|
text-align: center;
|
||
|
|
background-color: rgba(255, 255, 255, .6);
|
||
|
|
border-radius:10px;
|
||
|
|
width:70%;
|
||
|
|
font-weight:normal;
|
||
|
|
letter-spacing:.15em;
|
||
|
|
font-size:7pt;
|
||
|
|
padding:3px;
|
||
|
|
|
||
|
|
}
|
||
|
|
#khfooter a {
|
||
|
|
font-weight:normal;
|
||
|
|
letter-spacing:.15em;
|
||
|
|
font-size:7pt;
|
||
|
|
text-decoration:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#khfooter a:link, a:visited {
|
||
|
|
color: #2b73b7;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|