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

Line 131: Line 131:
 
/*| Navigation |*/
 
/*| Navigation |*/
  
−
nav{
+
−
  position: absolute;
+
<div class="navcont">
−
  top: 0;
+
<div class="nav">
−
  left: 0;
+
<ul>
−
  width: 100%;
+
<li><a href="#">HOME</a></li>
−
  z-index: 2;
+
<li class="drop">
−
  background: #fff;
+
<a href="#">ABOUT</a>
−
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
+
<div class="dropdownContain">
−
  border: 1px solid rgba(0,0,0,.1);
+
<div class="dropOut">
 +
<ul>
 +
<li>ABOUT ME</li>
 +
<li>ABOUT ME</li>
 +
<li>ABOUT ME</li>
 +
<li>ABOUT ME</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</li>
 +
<li><a href="#">HELP</a></li>
 +
<li class="drop">
 +
<a href="#">HOME ALONE</a>
 +
<div class="dropdownContain">
 +
<div class="dropOut">
 +
<ul>
 +
<li>ABOUT ME</li>
 +
<li>ABOUT ME</li>
 +
<li>ABOUT ME</li>
 +
<li>ABOUT ME</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="drop">
 +
<a href="#">ABOUT</a>
 +
<div class="
 +
<div class="dropOut">
 +
<ul>
 +
<li>J'ai</li>
 +
<li>Fait</li>
 +
<li>CACA</li>
 +
<li>ABOUT ME</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</li>
 +
<li><a href="#">HELP</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 
 +
/*Basic style*/
 +
body {
 +
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
 +
background-color: #CCC;
 +
margin: 0;
 +
padding: 0;
 +
color: #000;
 
}
 
}
  
−
nav ul
+
 
−
{
+
ul, ol, dl {
−
    list-style: none;
+
padding: 0;
−
    position: relative;
+
margin: 0;
−
    float: right;
+
}
−
    margin-right: 100px;
+
h1, h2, h3, h4, h5, h6, p {
−
    display: inline-table;
+
margin-top: 0;
 +
padding-right: 15px;
 +
padding-left: 15px;
 +
}
 +
a img {
 +
border: none;
 +
}
 +
a:link {
 +
color: #000;
 +
text-decoration: none;  
 +
}
 +
a:visited {
 +
color: #000;
 +
text-decoration: none;
 +
}
 +
a:hover, a:active, a:focus {
 +
text-decoration: none;
 +
color:#09F;
 
}
 
}
  
−
nav ul li
+
.container {
−
{
+
width: 960px;
−
  float: left;
+
background-color: #FFF;
−
  -webkit-transition: all .2s ease-in-out;
+
margin: 0 auto;  
−
  -moz-transition: all .2s ease-in-out;
+
−
  transition: all .2s ease-in-out;
+
 
}
 
}
 +
.content {
 +
padding: 10px 0;
 +
}
 +
.fltrt { 
 +
float: right;
 +
margin-left: 8px;
 +
}
 +
.fltlft {
 +
float: left;
 +
margin-right: 8px;
 +
}
 +
.clearfloat {
 +
clear:both;
 +
height:0;
 +
font-size: 1px;
 +
line-height: 0px;
 +
}
 +
/*Basic style*/
  
−
nav ul li:hover{background: rgba(0,0,0,.15);}
+
/*menu style*/
−
nav ul li:hover > ul{display: block;}
+
.navcont{
−
nav ul li
+
width:960px;
−
{
+
margin:0 auto;
−
  float: left;
+
background:#fff;
−
  -webkit-transition: all .2s ease-in-out;
+
height:45px;
−
  -moz-transition: all .2s ease-in-out;
+
−
  transition: all .2s ease-in-out;
+
 
}
 
}
  
−
nav ul li a
+
.nav {
−
{
+
height: 45px;
−
display: block;  
+
background: transparent url(http://i50.tinypic.com/bj0nm.png) center bottom no-repeat;
−
padding: 30px 20px;
+
padding-bottom: 7px;
−
color: #222;
+
margin-bottom: 23px;
−
font-size: .9em;
+
−
letter-spacing: 1px;
+
−
text-decoration: none;
+
−
text-transform: uppercase;
+
 
}
 
}
  
−
nav ul ul
+
.nav ul {
−
{
+
margin:0;
−
display: none;
+
box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.4);  
−
background: #fff;
+
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
−
position: absolute;
+
−
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;}
+
.nav ul li {
−
 
+
font: 13px Verdana, 'Lucida Grande';
−
nav ul ul li a
+
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;
 +
background: transparent url(http://i46.tinypic.com/21c5h93.png) left center no-repeat;
 +
}
 +
.nav li:first-child
 
{
 
{
−
  padding: 15px 30px;  
+
background:none;
−
  border-bottom: 1px solid rgba(0,0,0,.05);
+
}
 +
.nav ul li.drop {
 +
position: relative;
 +
}
 +
.nav ul > li {
 +
display: inline-block;
 +
}
 +
.nav ul li a {
 +
line-height: 45px;
 +
padding: 0 20px;
 +
height: 45px;
 +
color: #777;
 +
}
 +
.nav ul li a:hover {
 +
color:#09F;
 
}
 
}
  
−
nav ul ul ul
+
.dropOut .triangle {
−
{
+
width: 0;
−
  position: absolute;  
+
height: 0;
−
  left: 100%;  
+
position: absolute;
−
  top:0;
+
border-left: 8px solid transparent;
−
}
+
border-right: 8px solid transparent;
 +
border-bottom: 8px solid white;
 +
top: -8px;
 +
left: 50%;
 +
margin-left: -8px;
 +
}
 +
.dropdownContain {
 +
width: 200px;
 +
position: absolute;
 +
z-index: 2;
 +
left: 60%;
 +
margin-left: -100px; /* half of width */
 +
top: -400px;
 +
}
 +
.dropOut {
 +
width: 200px;
 +
background: white;
 +
float: left;
 +
position: relative;
 +
margin-top: 0px;
 +
opacity: 0;
 +
-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 .2s ease-out;
 +
-moz-transition: all .2s ease-out;
 +
-ms-transition: all .2s ease-out;
 +
-o-transition: all .2s ease-out;
 +
transition: all .2s ease-out;
 +
}
  
−
.logo_img
+
.dropOut ul {
 +
float: left;
 +
padding: 0 0;
 +
}
 +
.dropOut ul li {
 +
text-align: left;
 +
background: transparent url(http://i50.tinypic.com/303efm1.png) center top repeat-x;
 +
float: left;
 +
width: 155px;
 +
padding: 12px 0 10px 15px;
 +
margin: 0px 15px;
 +
color: #777;
 +
}
 +
.dropOut li:first-child
 
{
 
{
−
  height: 120px;
+
background:none;
−
  width:auto;
+
−
  z-index: 3;
+
−
  position: absolute;
+
−
  margin-left: 40px;
+
−
  margin-top: 15px;
+
 
}
 
}
 +
 +
.dropOut ul li:hover {
 +
color:#09F;
 +
-webkit-transition: all 200ms ease-in;
 +
-o-transition: all 200ms ease-in;
 +
-moz-transition: all 200ms ease-in;
 +
}
 +
 +
ul li:hover a { color:#09F;
 +
-webkit-transition: all 200ms ease-in;
 +
-o-transition: all 200ms ease-in;
 +
-moz-transition: all 200ms ease-in;
 +
}
 +
ul li:hover .dropdownContain { top: 45px; }
 +
ul li:hover .underline { border-bottom-color: #777; }
 +
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
 +
/*menu style*/
  
 
/*| Infographie de fond |*/
 
/*| Infographie de fond |*/

Revision as of 14:48, 20 September 2018