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

 
(176 intermediate revisions by the same user not shown)
Line 126: Line 126:
  
  
−
/************************************************************************
 
−
Navigation
 
−
************************************************************************/
 
  
−
nav{
 
−
  position: absolute;
 
−
  top: 0;
 
−
  left: 0;
 
−
  width: 100%;
 
−
  z-index: 2;
 
−
  background: #fff;
 
−
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
 
−
  border: 1px solid rgba(0,0,0,.1);
 
−
}
 
  
−
nav ul
 
−
{
 
−
    list-style: none;
 
−
    position: relative;
 
−
    float: right;
 
−
    margin-right: 100px;
 
−
    display: inline-table;
 
−
}
 
  
−
nav ul li
+
/************************************************************************
 +
Infographie de fond
 +
************************************************************************/
 +
body
 
{
 
{
−
   float: left;
+
   max-width: 100%;
−
  -webkit-transition: all .2s ease-in-out;
+
−
  -moz-transition: all .2s ease-in-out;
+
−
  transition: all .2s ease-in-out;
+
 
}
 
}
−
 
+
/************************************************************************
−
nav ul li:hover{background: rgba(0,0,0,.15);}
+
bloc1
−
nav ul li:hover > ul{display: block;}
+
************************************************************************/
−
nav ul li
+
.bloc1
 
{
 
{
−
   float: left;
+
   width: 100%;
−
   -webkit-transition: all .2s ease-in-out;
+
   height: 30em;
−
   -moz-transition: all .2s ease-in-out;
+
   position: relative;
−
   transition: all .2s ease-in-out;
+
   z-index: 2;  
 
}
 
}
  
−
nav ul li a
+
.parent_carreblanc
 
{
 
{
−
display: block;  
+
  width:6em;
−
padding: 30px 20px;
+
  height:20em;
−
color: #222;  
+
  position: absolute;
−
font-size: .9em;
+
  bottom: 8em;
−
letter-spacing: 1px;
+
−
text-decoration: none;
+
−
text-transform: uppercase;
+
 
}
 
}
  
−
nav ul ul
+
#carre_blanc
 
{
 
{
−
display: none;
+
  width: 5em;
−
background: #fff;
+
  position:absolute;
−
position: absolute;  
+
  top:1.4em;
−
top: 100%;
+
−
box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
+
−
border: 1px solid rgba(0,0,0,.1);
+
 
}
 
}
  
−
nav ul ul li{float: none; position: relative;}
+
.parent_titres
−
 
+
−
nav ul ul li a
+
 
{
 
{
−
   padding: 15px 30px;  
+
   width:40em;
−
   border-bottom: 1px solid rgba(0,0,0,.05);
+
  height:20em;
 +
  position: absolute;
 +
   bottom: 7em;
 +
  left: 8em;
 
}
 
}
−
 
+
#titre_principal {
−
nav ul ul ul
+
−
{
+
−
  position: absolute;
+
−
  left: 100%;
+
−
  top:0;
+
−
}
+
−
 
+
−
.logo_img
+
−
{
+
−
  height: 12em;
+
 
   width:auto;
 
   width:auto;
−
   z-index: 3;
+
   height:auto;
−
  position: absolute;
+
−
  margin-left: 4em;
+
−
  top:1em;
+
−
}
+
−
 
+
−
/************************************************************************
+
−
Infographie de fond
+
−
************************************************************************/
+
−
+
−
 
+
−
 
+
−
#carre
+
−
{
+
−
  width: 33em;
+
 
   position:absolute;
 
   position:absolute;
−
   top:4em;
+
   bottom:2em;
−
   right:0em;
+
   right:0.3em;
−
 
+
  color: rgb(42,183,202);
 +
  font-size: 4.7em;
 
}
 
}
  
−
 
+
#sous_titre
−
#carre_blanc
+
 
{
 
{
−
   width: 5.5em;
+
   width: auto;
−
   position:absolute;
+
  color:white;
−
   top:23em;
+
  letter-spacing: 2px;
 +
   position: absolute;
 +
   bottom: 1.7em;
 +
  right: 0em;
 +
  font-size: 2em;
 
}
 
}
  
−
 
+
.parent_carremulti
−
#titre_principal
+
 
{
 
{
−
   color: rgb(42,183,202);
+
   width:40em;
−
   font-size: 4.7em;
+
   height:30em;
−
  width: auto;
+
 
   position: absolute;
 
   position: absolute;
−
   top: 3.8em;
+
   top: 0em;
−
   left: 2.5em;
+
   right: 0em;
−
  z-index: 5;
+
−
  letter-spacing: 3px;
+
 
}
 
}
  
−
#sous_titre
+
#carre
 
{
 
{
−
   color:white;
+
   width: 30em;
−
  letter-spacing: 2px;
+
 
   position: absolute;
 
   position: absolute;
−
   top: 12em;
+
   top: -1em;
−
   left: 5.8em;
+
   right: 0em;
−
  font-size: 2em;
+
 
}
 
}
  
Line 263: 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 272: 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;
 
   position:absolute;
−
   top:28em;
+
   font-family: 'Josefin Sans'
−
  left:30em;
+
  
 
}
 
}
  
−
a
+
a:hover /* Apparence au survol des liens */
 
{
 
{
−
text-decoration: none;
+
  text-decoration: none;
 +
  color: white;
 +
}
 +
.idea
 +
{
 +
  width:10em
 
}
 
}
  
 +
/************************************************************************
 +
    bloc2
 +
************************************************************************/
 +
.bloc2
 +
{
 +
  width: 100%;
 +
  height: 30em;
 +
  position: relative;
 +
}
 +
.parent_ancre
 +
{
 +
  width:5em
 +
  height: auto;
 +
  position: absolute;
 +
  top:16em; 
 +
}
 +
#ancre
 +
{
 +
  color: rgb(32,56,100);
 +
  font-size: 0.1em
 +
}
 +
.parent_hospitalgo
 +
{
 +
  width:100%;
 +
  height: 70em;
 +
  position: absolute;
 +
  top: -7em;
 +
  z-index: 1;
 +
}
  
−
#bloc2
+
#hospital
 
{
 
{
 
   width: 100%;
 
   width: 100%;
 
   position: absolute;
 
   position: absolute;
−
  top:530px;
 
 
}
 
}
 +
  
 
#go
 
#go
 
{
 
{
 
   position: absolute;
 
   position: absolute;
−
   top: 36.5em;
+
   bottom: 6em;
−
   left: 17.3em;
+
   left: 17em;
 
   font-size: 2em;
 
   font-size: 2em;
 
   color: white;
 
   color: white;
Line 318: Line 309:
 
  position: absolute;
 
  position: absolute;
 
  top: 200em;
 
  top: 200em;
−
}
+
width: 20em;
−
#ancre
+
−
{
+
−
  position:absolute;
+
−
  top: 880px;
+
−
  font-size: 0.1em;
+
 
}
 
}
  
Line 378: Line 364:
 
   
 
   
 
}
 
}
 +
 +
 +
/************************************************************************
 +
Navigation
 +
************************************************************************/
  
 
#cssmenu {
 
#cssmenu {
−
   background: #4cb6ea;
+
   background: #00000;
 
   margin: 0;
 
   margin: 0;
−
   width: auto;
+
   width: 100%;
 
   padding: 0;
 
   padding: 0;
 
   line-height: 1;
 
   line-height: 1;
 
   display: block;
 
   display: block;
−
   position: relative;
+
   position: absolute;
 +
  top: 0em;
 
   font-family: 'PT Sans', sans-serif;
 
   font-family: 'PT Sans', sans-serif;
 
}
 
}
Line 406: Line 398:
 
#cssmenu ul li {
 
#cssmenu ul li {
 
   margin: 0;
 
   margin: 0;
 +
  margin-right: 5px;
 
   padding: 0;
 
   padding: 0;
 
   display: block;
 
   display: block;
Line 446: Line 439:
 
   border-radius: 5px;
 
   border-radius: 5px;
 
   background: #000000;
 
   background: #000000;
−
  z-index: 1;
 
 
   top: 13px;
 
   top: 13px;
 
   right: 15px;
 
   right: 15px;
Line 462: Line 454:
 
   border: 3px solid transparent;
 
   border: 3px solid transparent;
 
   border-left-color: #ffffff;
 
   border-left-color: #ffffff;
−
  z-index: 2;
 
 
   top: 15px;
 
   top: 15px;
 
   right: 15px;
 
   right: 15px;
Line 476: Line 467:
 
   font-weight: 400;
 
   font-weight: 400;
 
   text-transform: none;
 
   text-transform: none;
−
   color: #000000;
+
   color: black;
 
   letter-spacing: 0;
 
   letter-spacing: 0;
 
   display: block;
 
   display: block;
Line 484: Line 475:
 
#cssmenu ul li ul li:hover > a,
 
#cssmenu ul li ul li:hover > a,
 
#cssmenu ul li ul li.active > a {
 
#cssmenu ul li ul li.active > a {
−
   color: #4cb6ea;
+
   background-color: rgba(254,215,102,0.3);
 +
  color: black;
 
}
 
}
 
#cssmenu ul li ul li:hover:after,
 
#cssmenu ul li ul li:hover:after,
 
#cssmenu ul li ul li.active:after {
 
#cssmenu ul li ul li.active:after {
−
   background: #4cb6ea;
+
   background-color: rgba(254,215,102,0.3);
 +
  color: black;
 
}
 
}
 
#cssmenu ul li ul li:hover > ul {
 
#cssmenu ul li ul li:hover > ul {
Line 499: Line 492:
 
}
 
}
 
#cssmenu > ul > li {
 
#cssmenu > ul > li {
−
   float: left;
+
   float: right;
 +
  margin-left: 10px;
 
}
 
}
 
#cssmenu.align-center > ul > li {
 
#cssmenu.align-center > ul > li {
Line 532: Line 526:
 
   height: 0;
 
   height: 0;
 
   top: 0;
 
   top: 0;
−
  z-index: 0;
+
   background: rgb(254,215,102);
−
   background: #ffffff;
+
 
   -webkit-transition: height .2s;
 
   -webkit-transition: height .2s;
 
   -moz-transition: height .2s;
 
   -moz-transition: height .2s;
Line 558: Line 551:
 
   content: "";
 
   content: "";
 
   border: 4px solid transparent;
 
   border: 4px solid transparent;
−
   border-top-color: #4cb6ea;
+
   border-top-color: white;
−
  z-index: 2;
+
 
   height: 0;
 
   height: 0;
 
   width: 0;
 
   width: 0;
Line 573: Line 565:
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
   font-size: 14px;
 
   font-size: 14px;
−
  z-index: 2;
 
 
   position: relative;
 
   position: relative;
 
}
 
}
Line 740: Line 731:
 
     right: 20px;
 
     right: 20px;
 
     top: 26px;
 
     top: 26px;
 +
 +
 
   }
 
   }
 
}
 
}
−
 
−
    </style>
 
−
  </head>
 
  
 
<script>
 
<script>
Line 761: Line 751:
 
});
 
});
 
} )( jQuery );
 
} )( jQuery );
 +
 +
 +
 +
 
</script>
 
</script>
 +
 +
 +
</style>
 
</html>
 
</html>

Latest revision as of 10:55, 23 September 2018