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

Line 127: Line 127:
 
/*| Navigation |*/
 
/*| Navigation |*/
  
−
nav{
+
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;}
−
  position: absolute;
+
 
−
  top: 0;
+
 
−
  left: 0;
+
/*---------- BODY --------------------------------*/
−
  width: 100%;
+
 
−
  z-index: 2;
+
body {
−
  background: #fff;
+
text-align: center;
−
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
+
background: #e0e0e0;
−
  border: 1px solid rgba(0,0,0,.1);
+
padding-bottom: 200px;
 
}
 
}
  
−
nav ul
+
a {
−
{
+
text-decoration: none;
−
    list-style: none;
+
−
    position: relative;
+
−
    float: right;
+
−
    margin-right: 100px;
+
−
    display: inline-table;
+
 
}
 
}
  
−
nav ul li
+
/*---------- Wrapper --------------------*/
−
{
+
 
−
  float: left;
+
nav {
−
  -webkit-transition: all .2s ease-in-out;
+
width: 100%;
−
  -moz-transition: all .2s ease-in-out;
+
height: 80px;
−
  transition: all .2s ease-in-out;
+
background: #222;
 
}
 
}
  
−
nav ul li:hover{background: rgba(0,0,0,.15);}
+
ul {
−
nav ul li:hover > ul{display: block;}
+
text-align: center;
−
nav ul li
+
−
{
+
−
  float: left;
+
−
  -webkit-transition: all .2s ease-in-out;
+
−
  -moz-transition: all .2s ease-in-out;
+
−
  transition: all .2s ease-in-out;
+
 
}
 
}
  
−
nav ul li a
+
ul li {
−
{
+
font: 13px Verdana, 'Lucida Grande';
−
display: block;  
+
cursor: pointer;
−
padding: 30px 20px;
+
-webkit-transition: padding .05s linear;
−
color: #222;  
+
-moz-transition: padding .05s linear;
−
font-size: .9em;
+
-ms-transition: padding .05s linear;
−
letter-spacing: 1px;
+
-o-transition: padding .05s linear;
−
text-decoration: none;
+
transition: padding .05s linear;
−
text-transform: uppercase;
+
}
 +
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;
 
}
 
}
  
−
nav ul ul
+
.dropOut .triangle {
−
{
+
width: 0;
−
display: none;
+
height: 0;
−
background: #fff;
+
position: absolute;
−
position: absolute;  
+
border-left: 8px solid transparent;
−
top: 100%;
+
border-right: 8px solid transparent;
−
box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
+
border-bottom: 8px solid white;
−
border: 1px solid rgba(0,0,0,.1);
+
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;
 
}
 
}
  
−
nav ul ul li{float: none; position: relative;}
+
.dropOut ul {
−
 
+
float: left;
−
nav ul ul li a
+
padding: 10px 0;
−
{
+
}
−
  padding: 15px 30px;  
+
.dropOut ul li {
−
  border-bottom: 1px solid rgba(0,0,0,.05);
+
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;
 
}
 
}
  
−
nav ul ul ul
+
.dropOut ul li:hover {
−
{
+
background: #f6f6f6;
−
  position: absolute;
+
}
−
  left: 100%;
+
−
  top:0;
+
−
}
+
  
 +
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 |*/
 
/*| Infographie de fond |*/
  

Revision as of 14:20, 20 September 2018