Difference between revisions of "Template:GO Paris-Saclay/navbarcss"

 
(331 intermediate revisions by the same user not shown)
Line 125: Line 125:
 
}
 
}
  
−
/*| Navigation |*/
 
  
−
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}
 
  
  
−
/*---------- BODY --------------------------------*/
 
  
−
body {
+
/************************************************************************
−
text-align: center;
+
Infographie de fond
−
background: #e0e0e0;
+
************************************************************************/
−
padding-bottom: 200px;
+
body
 +
{
 +
  max-width: 100%;
 
}
 
}
−
 
+
/************************************************************************
−
a {
+
bloc1
−
text-decoration: none;
+
************************************************************************/
−
}
+
.bloc1
−
 
+
{
−
/*---------- Wrapper --------------------*/
+
  width: 100%;
−
 
+
  height: 30em;
−
nav {
+
  position: relative;
−
width: 100%;
+
  z-index: 2;  
−
height: 80px;
+
−
background: #222;
+
−
}
+
−
 
+
−
ul {
+
−
text-align: center;
+
−
}
+
−
 
+
−
ul li {
+
−
font: 13px Verdana, 'Lucida Grande';
+
−
cursor: pointer;
+
−
-webkit-transition: padding .05s linear;
+
−
-moz-transition: padding .05s linear;
+
−
-ms-transition: padding .05s linear;
+
−
-o-transition: padding .05s linear;
+
−
transition: padding .05s linear;
+
−
}
+
−
ul li.drop {
+
−
position: relative;
+
−
}
+
−
ul > li {
+
−
display: inline-block;
+
−
}
+
−
ul li a {
+
−
line-height: 80px;
+
−
padding: 0 20px;
+
−
height: 80px;
+
−
color: #777;
+
−
-webkit-transition: all .1s ease-out;
+
−
-moz-transition: all .1s ease-out;
+
−
-ms-transition: all .1s ease-out;
+
−
-o-transition: all .1s ease-out;
+
−
transition: all .1s ease-out;
+
−
}
+
−
ul li a:hover {
+
−
color: #eee;
+
−
}
+
−
 
+
−
.dropOut .triangle {
+
−
width: 0;
+
−
height: 0;
+
−
position: absolute;
+
−
border-left: 8px solid transparent;
+
−
border-right: 8px solid transparent;
+
−
border-bottom: 8px solid white;
+
−
top: -8px;
+
−
left: 50%;
+
−
margin-left: -8px;
+
−
}
+
−
.dropdownContain {
+
−
width: 160px;
+
−
position: absolute;
+
−
z-index: 2;
+
−
left: 50%;
+
−
margin-left: -80px; /* half of width */
+
−
top: -400px;
+
−
}
+
−
.dropOut {
+
−
width: 160px;
+
−
background: white;
+
−
float: left;
+
−
position: relative;
+
−
margin-top: 0px;
+
−
opacity: 0;
+
−
-webkit-border-radius: 4px;
+
−
-moz-border-radius: 4px;
+
−
border-radius: 4px;
+
−
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
+
−
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
+
−
box-shadow: 0 1px 6px rgba(0,0,0,.15);
+
−
-webkit-transition: all .1s ease-out;
+
−
-moz-transition: all .1s ease-out;
+
−
-ms-transition: all .1s ease-out;
+
−
-o-transition: all .1s ease-out;
+
−
transition: all .1s ease-out;
+
−
}
+
−
 
+
−
.dropOut ul {
+
−
float: left;
+
−
padding: 10px 0;
+
−
}
+
−
.dropOut ul li {
+
−
text-align: left;
+
−
float: left;
+
−
width: 125px;
+
−
padding: 12px 0 10px 15px;
+
−
margin: 0px 10px;
+
−
color: #777;
+
−
-webkit-border-radius: 4px;
+
−
-moz-border-radius: 4px;
+
−
border-radius: 4px;
+
−
-webkit-transition: background .1s ease-out;
+
−
-moz-transition: background .1s ease-out;
+
−
-ms-transition: background .1s ease-out;
+
−
-o-transition: background .1s ease-out;
+
−
transition: background .1s ease-out;
+
 
}
 
}
  
−
.dropOut ul li:hover {
+
.parent_carreblanc
−
background: #f6f6f6;
+
−
}
+
−
 
+
−
ul li:hover a { color: white; }
+
−
ul li:hover .dropdownContain { top: 65px; }
+
−
ul li:hover .underline { border-bottom-color: #777; }
+
−
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
+
−
/*| Infographie de fond |*/
+
−
 
+
−
#carre
+
 
{
 
{
−
   width: 500px;
+
   width:6em;
 +
  height:20em;
 +
  position: absolute;
 +
  bottom: 8em;
 
}
 
}
−
 
  
 
#carre_blanc
 
#carre_blanc
 
{
 
{
−
   width: 100px;
+
   width: 5em;
 +
  position:absolute;
 +
  top:1.4em;
 
}
 
}
  
−
.bloc1
+
.parent_titres
 
{
 
{
−
   width: 100%;
+
   width:40em;
−
   height: auto;
+
   height:20em;
−
   display: flex;
+
   position: absolute;
−
   flex-direction: row-reverse;
+
   bottom: 7em;
−
   justify-content: space-between;
+
   left: 8em;
−
  align-items: center;
+
−
  margin: auto;
+
−
 
+
 
}
 
}
−
 
+
#titre_principal {
−
#titre_principal
+
  width:auto;
−
{
+
  height:auto;
 +
  position:absolute;
 +
  bottom:2em;
 +
  right:0.3em;
 
   color: rgb(42,183,202);
 
   color: rgb(42,183,202);
−
   font-size: 5em;
+
   font-size: 4.7em;
−
  width: auto;
+
−
  margin-top: 250px;
+
−
  letter-spacing: 3px
+
 
}
 
}
  
 
#sous_titre
 
#sous_titre
 
{
 
{
 +
  width: auto;
 
   color:white;
 
   color:white;
 
   letter-spacing: 2px;
 
   letter-spacing: 2px;
−
   text-align:left;
+
   position: absolute;
−
   justify-content: center;
+
   bottom: 1.7em;
 +
  right: 0em;
 
   font-size: 2em;
 
   font-size: 2em;
 +
}
 +
 +
.parent_carremulti
 +
{
 +
  width:40em;
 +
  height:30em;
 +
  position: absolute;
 +
  top: 0em;
 +
  right: 0em;
 +
}
 +
 +
#carre
 +
{
 +
  width: 30em;
 +
  position: absolute;
 +
  top: -1em;
 +
  right: 0em;
 
}
 
}
  
Line 298: Line 211:
 
{
 
{
 
   width: 35px;
 
   width: 35px;
 +
}
 +
 +
.parent_dis
 +
{
 +
height: 5em;
 +
width: 17em;
 +
position: absolute;
 +
bottom: 2em;
 +
left: 17em;
 
}
 
}
  
 
.discover
 
.discover
 
{
 
{
 +
  width: auto;
 +
font-size: 1.3em;
 
   background-color: rgb(254,215,102);
 
   background-color: rgb(254,215,102);
 
   border-radius: 10px;
 
   border-radius: 10px;
Line 307: Line 231:
 
   text-align: center;
 
   text-align: center;
 
   padding: 10px 10px 10px 10px ;
 
   padding: 10px 10px 10px 10px ;
−
  font-size: 1.3em;
 
 
   color: white;
 
   color: white;
 
   text-decoration: none;
 
   text-decoration: none;
 +
  position:absolute;
 +
  font-family: 'Josefin Sans'
 +
 
}
 
}
  
−
.dis
+
a:hover /* Apparence au survol des liens */
 
{
 
{
−
  display: flex;
+
  text-decoration: none;
−
  align-items: center;
+
  color: white;
−
  justify-content: center;
+
}
−
   margin-top: 10px;
+
.idea
 +
{
 +
   width:10em
 
}
 
}
  
−
#bloc2
+
/************************************************************************
 +
    bloc2
 +
************************************************************************/
 +
.bloc2
 
{
 
{
 
   width: 100%;
 
   width: 100%;
−
   position: absolute;
+
   height: 30em;
−
   top:530px;
+
   position: relative;
−
  font-family: 'quicksandregular'
+
 
}
 
}
−
 
+
.parent_ancre
−
#go
+
 
{
 
{
−
   font-family: 'quicksandregular';
+
   width:5em
 +
  height: auto;
 
   position: absolute;
 
   position: absolute;
−
   top: 1160px;
+
   top:16em;
−
  right: 315px;
+
−
  color: white;
+
−
  font-size: 2em;
+
−
  width: 500px;
+
−
  text-align: center;
+
−
 
+
 
}
 
}
−
 
 
#ancre
 
#ancre
 
{
 
{
−
   position:absolute;
+
   color: rgb(32,56,100);
−
  top: 880px;
+
   font-size: 0.1em
−
   font-size: 0.1em;
+
 
}
 
}
−
 
+
.parent_hospitalgo
−
 
+
{  
−
.double_fleche
+
  width:100%;
−
{
+
  height: 70em;
 
   position: absolute;
 
   position: absolute;
−
   top:1440px;
+
   top: -7em;
−
   left: 65px;
+
   z-index: 1;
 
}
 
}
  
−
#bloc3
+
#hospital
 
{
 
{
−
   width: 880px;
+
   width: 100%;
 
   position: absolute;
 
   position: absolute;
−
  top: 102.5em;
 
−
  left: 18em
 
 
}
 
}
  
−
#leading
+
 
 +
#go
 
{
 
{
−
  color: white;
+
  position: absolute;
−
  font-size: 2.3em;
+
  bottom: 6em;
−
  position:absolute;
+
  left: 17em;
−
  top: 50em;
+
  font-size: 2em;
−
  left:1.5em;
+
  color: white;
 +
  text-align: center;
 +
  width: 14em;
 +
  height: auto;
 +
  line-height: 1.2em;
 +
  font-family: 'Josefin Sans'
 
}
 
}
−
 
+
#bloc3
−
.antibio
+
 
{
 
{
−
  color:rgb(254,75,74);
+
width: 48em;
−
  font-family:'quicksandregular';
+
position: absolute;
−
  position:absolute;
+
top: 104.5em;
−
  top: 49.5em;
+
left: 22em;
−
  left:1.5em;
+
}
−
  font-size: 2.5em;
+
#bloc4
−
  text-align: center;
+
{
 +
position: absolute;
 +
top: 200em;
 +
width: 20em;
 
}
 
}
  
−
.vitro
+
 
 +
#bloc3_text1
 
{
 
{
−
  color:rgb(254,215,102);
+
position: absolute;
−
  font-family:'quicksandregular';
+
top: 57em;
−
  position:absolute;
+
left: 3em;
−
  top: 56em;
+
font-size: 2em;
−
  left:3.5em;
+
color: white;
−
  font-size: 2.5em;
+
font-family: 'Josefin Sans'
−
  text-align: center;
+
 
}
 
}
  
−
.alter
+
#bloc3_text2
 
{
 
{
−
  color:rgb(42,183,202);
+
position: absolute;
−
  font-family:'quicksandregular';
+
top: 40.5em;
−
  position:absolute;
+
left: 2em;
−
  top: 52.7em;
+
font-size: 3em;
−
  right:0.5em;
+
line-height: 1.3em;
−
  font-size: 2.5em;
+
width: 5em;
−
  text-align: center;
+
text-align: center;
 +
color: rgb(254,75,74);
 +
font-family: 'Josefin Sans'
 +
 
}
 
}
  
−
.text1
+
#bloc3_text3
 
{
 
{
−
  font-weight: bolder
+
position: absolute;
 +
top: 45.4em;
 +
left: 1em;
 +
font-size: 3em;
 +
line-height: 1.3em;
 +
width: 10em;
 +
text-align: center;
 +
color:rgb(254,215,102);
 +
font-family: 'Josefin Sans'
 +
 
}
 
}
  
−
.year
+
#bloc3_text4
 
{
 
{
−
  color:rgb(42,183,202);
+
position: absolute;
−
  font-weight: bold;
+
top: 43em;
 +
left: 21em;
 +
font-size: 3em;
 +
line-height: 1.3em;
 +
width: 7em;
 +
text-align: center;
 +
color:rgb(42,183,202);
 +
font-family: 'Josefin Sans'
 +
 
}
 
}
  
−
/* Design human practise*/
 
  
 +
/************************************************************************
 +
Navigation
 +
************************************************************************/
  
−
.bodyhp
+
#cssmenu {
−
 
+
   background: #00000;
−
{
+
  margin: 0;
−
   background-color: rgb(217,217,217);
+
  width: 100%;
−
   font-family: 'metropolisregular'
+
  padding: 0;
 +
  line-height: 1;
 +
  display: block;
 +
  position: absolute;
 +
  top: 0em;
 +
   font-family: 'PT Sans', sans-serif;
 +
}
 +
#cssmenu ul {
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  display: block;
 
}
 
}
−
 
+
#cssmenu ul:after,
−
.intro-image
+
#cssmenu:after {
−
{
+
  content: " ";
−
   width: 73em;
+
  display: block;
 +
  font-size: 0;
 +
  height: 0;
 +
  clear: both;
 +
  visibility: hidden;
 +
}
 +
#cssmenu ul li {
 +
   margin: 0;
 +
  margin-right: 5px;
 +
  padding: 0;
 +
  display: block;
 +
  position: relative;
 +
}
 +
#cssmenu ul li a {
 +
  text-decoration: none;
 +
  display: block;
 +
  margin: 0;
 +
  -webkit-transition: color .2s ease;
 +
  -moz-transition: color .2s ease;
 +
  -ms-transition: color .2s ease;
 +
  -o-transition: color .2s ease;
 +
  transition: color .2s ease;
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
}
 +
#cssmenu ul li ul {
 
   position: absolute;
 
   position: absolute;
−
   top: 6em;
+
   left: -9999px;
−
   left: 12em;
+
   top: auto;
 
}
 
}
−
 
+
#cssmenu ul li ul li {
−
.titre_partie
+
   max-height: 0;
−
{
+
−
   font-size: 5em;
+
−
  color:rgb(42,183,202);
+
 
   position: absolute;
 
   position: absolute;
−
   top: 3.5em;
+
   -webkit-transition: max-height 0.4s ease-out;
−
   right: 3.2em;
+
   -moz-transition: max-height 0.4s ease-out;
−
   font-weight: bold;
+
   -ms-transition: max-height 0.4s ease-out;
−
   z-index: 1;
+
   -o-transition: max-height 0.4s ease-out;
−
   text-align: center;
+
   transition: max-height 0.4s ease-out;
 +
  background: #ffffff;
 
}
 
}
−
 
+
#cssmenu ul li ul li.has-sub:after {
−
 
+
   display: block;
−
.bloc4
+
   position: absolute;
−
{
+
  content: "";
−
   width: 45em;
+
  height: 10px;
−
   position:absolute;
+
  width: 10px;
−
   top: 157em;
+
  border-radius: 5px;
−
   left: 7em;
+
  background: #000000;
 +
   top: 13px;
 +
   right: 15px;
 
}
 
}
−
 
+
#cssmenu.align-right ul li ul li.has-sub:after {
−
.bloc4_text
+
   right: auto;
−
{
+
   left: 15px;
−
   font-size: 2em;
+
}
−
   color: white;
+
#cssmenu ul li ul li.has-sub:before {
 +
  display: block;
 
   position: absolute;
 
   position: absolute;
−
   top: 76.8em;
+
   content: "";
−
   left: 5.5em;
+
   height: 0;
 +
  width: 0;
 +
  border: 3px solid transparent;
 +
  border-left-color: #ffffff;
 +
  top: 15px;
 +
  right: 15px;
 
}
 
}
−
 
+
#cssmenu.align-right ul li ul li.has-sub:before {
−
.pince_rouge
+
  right: auto;
−
{
+
  left: 15px;
−
   width: 2em;
+
  border-left-color: transparent;
 +
  border-right-color: #ffffff;
 +
}
 +
#cssmenu ul li ul li a {
 +
  font-size: 14px;
 +
  font-weight: 400;
 +
  text-transform: none;
 +
  color: black;
 +
  letter-spacing: 0;
 +
  display: block;
 +
   width: 170px;
 +
  padding: 11px 10px 11px 20px;
 +
}
 +
#cssmenu ul li ul li:hover > a,
 +
#cssmenu ul li ul li.active > a {
 +
  background-color: rgba(254,215,102,0.3);
 +
  color: black;
 +
}
 +
#cssmenu ul li ul li:hover:after,
 +
#cssmenu ul li ul li.active:after {
 +
  background-color: rgba(254,215,102,0.3);
 +
  color: black;
 +
}
 +
#cssmenu ul li ul li:hover > ul {
 +
  left: 100%;
 +
  top: 0;
 +
}
 +
#cssmenu ul li ul li:hover > ul > li {
 +
  max-height: 72px;
 +
  position: relative;
 +
}
 +
#cssmenu > ul > li {
 +
  float: right;
 +
  margin-left: 10px;
 +
}
 +
#cssmenu.align-center > ul > li {
 +
  float: none;
 +
  display: inline-block;
 +
}
 +
#cssmenu.align-center > ul {
 +
  text-align: center;
 +
}
 +
#cssmenu.align-center ul ul {
 +
  text-align: left;
 +
}
 +
#cssmenu.align-right > ul {
 +
  float: right;
 +
}
 +
#cssmenu.align-right > ul > li:hover > ul {
 +
  left: auto;
 +
  right: 0;
 +
}
 +
#cssmenu.align-right ul ul li:hover > ul {
 +
  right: 100%;
 +
  left: auto;
 +
}
 +
#cssmenu.align-right ul ul li a {
 +
  text-align: right;
 +
}
 +
#cssmenu > ul > li:after {
 +
  content: "";
 +
  display: block;
 
   position: absolute;
 
   position: absolute;
−
   top: 160em;
+
  width: 100%;
−
   right: 25em;
+
  height: 0;
 +
   top: 0;
 +
  background: rgb(254,215,102);
 +
  -webkit-transition: height .2s;
 +
  -moz-transition: height .2s;
 +
  -ms-transition: height .2s;
 +
  -o-transition: height .2s;
 +
   transition: height .2s;
 
}
 
}
−
 
+
#cssmenu > ul > li.has-sub > a {
−
.pince_jaune
+
  padding-right: 40px;
−
{
+
}
−
   width: 2em;
+
#cssmenu > ul > li.has-sub > a:after {
 +
  display: block;
 +
  content: "";
 +
  background: #ffffff;
 +
  height: 12px;
 +
   width: 12px;
 
   position: absolute;
 
   position: absolute;
−
   top: 165em;
+
   border-radius: 13px;
−
   right: 25em;
+
   right: 14px;
 +
  top: 16px;
 
}
 
}
−
 
+
#cssmenu > ul > li.has-sub > a:before {
−
.pince_bleu
+
  display: block;
−
{
+
  content: "";
−
   width: 2em;
+
  border: 4px solid transparent;
 +
  border-top-color: white;
 +
  height: 0;
 +
   width: 0;
 
   position: absolute;
 
   position: absolute;
−
   top: 170em;
+
   right: 16px;
−
   right: 25em;
+
   top: 21px;
 
}
 
}
 +
#cssmenu > ul > li > a {
 +
  color: #ffffff;
 +
  padding: 15px 20px;
 +
  font-weight: 700;
 +
  letter-spacing: 1px;
 +
  text-transform: uppercase;
 +
  font-size: 14px;
 +
  position: relative;
 +
}
 +
#cssmenu > ul > li:hover:after,
 +
#cssmenu > ul > li.active:after {
 +
  height: 100%;
 +
}
 +
#cssmenu > ul > li:hover > a,
 +
#cssmenu > ul > li.active > a {
 +
  color: #000000;
 +
}
 +
#cssmenu > ul > li:hover > a:after,
 +
#cssmenu > ul > li.active > a:after {
 +
  background: #000000;
 +
}
 +
#cssmenu > ul > li:hover > a:before,
 +
#cssmenu > ul > li.active > a:before {
 +
  border-top-color: #ffffff;
 +
}
 +
#cssmenu > ul > li:hover > ul {
 +
  left: 0;
 +
}
 +
#cssmenu > ul > li:hover > ul > li {
 +
  max-height: 72px;
 +
  position: relative;
 +
}
 +
#cssmenu #menu-button {
 +
  display: none;
 +
}
 +
#cssmenu > ul > li > a {
 +
  display: block;
 +
}
 +
#cssmenu > ul > li {
 +
  width: auto;
 +
}
 +
#cssmenu > ul > li > ul {
 +
  width: 170px;
 +
  display: block;
 +
}
 +
#cssmenu > ul > li > ul > li {
 +
  width: 170px;
 +
  display: block;
 +
}
 +
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
 +
  #cssmenu > ul {
 +
    max-height: 0;
 +
    overflow: hidden;
 +
    -webkit-transition: max-height 0.35s ease-out;
 +
    -moz-transition: max-height 0.35s ease-out;
 +
    -ms-transition: max-height 0.35s ease-out;
 +
    -o-transition: max-height 0.35s ease-out;
 +
    transition: max-height 0.35s ease-out;
 +
  }
 +
  #cssmenu > ul > li > ul {
 +
    width: 100%;
 +
    display: block;
 +
  }
 +
  #cssmenu.align-right ul li a {
 +
    text-align: left;
 +
  }
 +
  #cssmenu > ul > li > ul > li {
 +
    width: 100%;
 +
    display: block;
 +
  }
 +
  #cssmenu.align-right ul ul li a {
 +
    text-align: left;
 +
  }
 +
  #cssmenu > ul > li > ul > li > a {
 +
    width: 100%;
 +
    display: block;
 +
  }
 +
  #cssmenu ul li ul li a {
 +
    width: 100%;
 +
  }
 +
  #cssmenu.align-center > ul {
 +
    text-align: left;
 +
  }
 +
  #cssmenu.align-center > ul > li {
 +
    display: block;
 +
  }
 +
  #cssmenu > ul.open {
 +
    max-height: 1000px;
 +
    border-top: 1px solid rgba(110, 110, 110, 0.25);
 +
  }
 +
  #cssmenu ul {
 +
    width: 100%;
 +
  }
 +
  #cssmenu ul > li {
 +
    float: none;
 +
    width: 100%;
 +
  }
 +
  #cssmenu ul li a {
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    padding: 12px 20px;
 +
  }
 +
  #cssmenu ul > li:after {
 +
    display: none;
 +
  }
 +
  #cssmenu ul li.has-sub > a:after,
 +
  #cssmenu ul li.has-sub > a:before,
 +
  #cssmenu ul li ul li.has-sub:after,
 +
  #cssmenu ul li ul li.has-sub:before {
 +
    display: none;
 +
  }
 +
  #cssmenu ul li ul,
 +
  #cssmenu ul li ul li ul,
 +
  #cssmenu ul li ul li:hover > ul,
 +
  #cssmenu.align-right ul li ul,
 +
  #cssmenu.align-right ul li ul li ul,
 +
  #cssmenu.align-right ul li ul li:hover > ul {
 +
    left: 0;
 +
    position: relative;
 +
    right: auto;
 +
  }
 +
  #cssmenu ul li ul li,
 +
  #cssmenu ul li:hover > ul > li {
 +
    max-height: 999px;
 +
    position: relative;
 +
    background: none;
 +
  }
 +
  #cssmenu ul li ul li a {
 +
    padding: 8px 20px 8px 35px;
 +
    color: #ffffff;
 +
  }
 +
  #cssmenu ul li ul ul li a {
 +
    padding: 8px 20px 8px 50px;
 +
  }
 +
  #cssmenu ul li ul li:hover > a {
 +
    color: #000000;
 +
  }
 +
  #cssmenu #menu-button {
 +
    display: block;
 +
    -webkit-box-sizing: border-box;
 +
    -moz-box-sizing: border-box;
 +
    box-sizing: border-box;
 +
    width: 100%;
 +
    padding: 15px 20px;
 +
    text-transform: uppercase;
 +
    font-weight: 700;
 +
    font-size: 14px;
 +
    letter-spacing: 1px;
 +
    color: #ffffff;
 +
    cursor: pointer;
 +
  }
 +
  #cssmenu #menu-button:after {
 +
    display: block;
 +
    content: '';
 +
    position: absolute;
 +
    height: 3px;
 +
    width: 22px;
 +
    border-top: 2px solid #ffffff;
 +
    border-bottom: 2px solid #ffffff;
 +
    right: 20px;
 +
    top: 16px;
 +
  }
 +
  #cssmenu #menu-button:before {
 +
    display: block;
 +
    content: '';
 +
    position: absolute;
 +
    height: 3px;
 +
    width: 22px;
 +
    border-top: 2px solid #ffffff;
 +
    right: 20px;
 +
    top: 26px;
  
−
.pince_blanche
+
 
−
{
+
   }
−
  width: 2em;
+
−
  position: absolute;
+
−
  top: 175em;
+
−
   right: 25em;
+
 
}
 
}
  
−
[[File:T--GO Paris-Saclay--carre multicolore.png]]
+
<script>
−
    </style>
+
( function( $ ) {
−
  </head>
+
$( document ).ready(function() {
 +
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
 +
$('#cssmenu #menu-button').on('click', function(){
 +
var menu = $(this).next('ul');
 +
if (menu.hasClass('open')) {
 +
menu.removeClass('open');
 +
}
 +
else {
 +
menu.addClass('open');
 +
}
 +
});
 +
});
 +
} )( jQuery );
 +
 
 +
 
 +
 
 +
 
 +
</script>
 +
 
 +
 
 +
</style>
 
</html>
 
</html>

Latest revision as of 10:55, 23 September 2018