Team:SYSU-China/css/flexnav

From 2014.igem.org

/* Flexnav Base Styles */ .flexnav {

 -webkit-transition: none;
 -moz-transition: none;
 -ms-transition: none;
 transition: none;
 -webkit-transform-style: preserve-3d;
 overflow: hidden;
 margin: 0 auto;
 width: 100%;
 max-height: 0; }
 .flexnav.opacity {
   opacity: 0; }
 .flexnav.flexnav-show {
   max-height: 2000px;
   opacity: 1;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -ms-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out; }
 .flexnav.one-page {
   position: fixed;
   top: 50px;
   right: 5%;
   max-width: 200px; }
 .flexnav li {
   font-size: 100%;
   position: relative;
   overflow: hidden; }
 .flexnav li a {
   position: relative;
   display: block;
   padding: .96em;
   z-index: 2;
   overflow: hidden;
   color: white;
   background: rgb(70, 70, 70);
   /*background: #a6a6a2;*/
   border-bottom: 1px solid rgba(0, 0, 0, 0.15); 
 }
 .flexnav li ul {
   width: 100%; }
   .flexnav li ul li {
     font-size: 100%;
     position: relative;
     overflow: hidden; }
 .flexnav li ul.flexnav-show li {
   overflow: visible; }
 .flexnav li ul li a {
   display: block;
   background: #b2b2af; }
 .flexnav ul li ul li a {
   background: #bfbfbc; }
 .flexnav ul li ul li ul li a {
   background: #cbcbc9; }
 .flexnav .touch-button {
   position: absolute;
   z-index: 999;
   top: 0;
   right: 0;
   width: 50px;
   height: 50px;
   display: inline-block;
   background: #acaca1;
   background: rgba(0, 0, 0, 0.075);
   text-align: center; }
   .flexnav .touch-button:hover {
     cursor: pointer; }
   .flexnav .touch-button .navicon {
     position: relative;
     top: 1.4em;
     font-size: 12px;
     color: #666; }

.menu-button {

 position: relative;
 display: block;
 padding: 1em;
 background: #a6a6a2;
 color: #222222;
 cursor: pointer;
 border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
 .menu-button.one-page {
   position: fixed;
   top: 0px;
   right: 5%;
   padding-right: 45px; }
 .menu-button .touch-button {
   background: transparent;
   position: absolute;
   z-index: 999;
   top: 0;
   right: 0;
   width: 50px;
   height: 50px;
   display: inline-block;
   text-align: center; }
   .menu-button .touch-button .navicon {
     font-size: 16px;
     position: relative;
     top: 1em;
     color: #666; }

@media all and (min-width: 800px) {

 body.one-page {
   padding-top: 70px; }

 .flexnav {
   overflow: visible; }
   .flexnav.opacity {
     opacity: 1; }
   .flexnav.one-page {
     top: 0;
     right: auto;
     max-width: 1080px; }
   .flexnav li {
     position: absolute;
     list-style: none;
     float: left;
     display: block;
     background-color: #a6a6a2;
     overflow: visible;
     width: 20%; }
   .flexnav li a {
     border-left: 1px solid #acaca1;
     border-bottom: none; }
   .flexnav li > ul {
     position: absolute;
     top: auto;
     left: 0; }
     .flexnav li > ul li {
       width: 100%; }
   .flexnav li ul li > ul {
     margin-left: 100%;
     top: 0; }
   .flexnav li ul li a {
     border-bottom: none; }
   .flexnav li ul.open {
     display: block;
     opacity: 1;
     visibility: visible;
     z-index: 1; }
     .flexnav li ul.open li {
       overflow: visible;
       max-height: 100px; }
     .flexnav li ul.open ul.open {
       margin-left: 100%;
       top: 0; }

 .menu-button {
   display: none; } }

.oldie body.one-page {

 padding-top: 70px; }

.oldie .flexnav {

 overflow: visible; }
 .oldie .flexnav.one-page {
   top: 0;
   right: auto;
   max-width: 1080px; }
 .oldie .flexnav li {
   position: relative;
   list-style: none;
   float: left;
   display: block;
   background-color: #a6a6a2;
   width: 20%;
   min-height: 50px;
   overflow: visible; }
 .oldie .flexnav li:hover > ul {
   display: block;
   width: 100%;
   overflow: visible; }
   .oldie .flexnav li:hover > ul li {
     width: 100%;
     float: none; }
 .oldie .flexnav li a {
   border-left: 1px solid #acaca1;
   border-bottom: none;
   overflow: visible; }
 .oldie .flexnav li > ul {
   background: #acaca1;
   position: absolute;
   top: auto;
   left: 0;
   display: none;
   z-index: 1;
   overflow: visible; }
 .oldie .flexnav li ul li ul {
   top: 0; }
 .oldie .flexnav li ul li a {
   border-bottom: none; }
 .oldie .flexnav li ul.open {
   display: block;
   width: 100%;
   overflow: visible; }
   .oldie .flexnav li ul.open li {
     width: 100%; }
   .oldie .flexnav li ul.open ul.open {
     margin-left: 100%;
     top: 0;
     display: block;
     width: 100%;
     overflow: visible; }
 .oldie .flexnav ul li:hover ul {
   margin-left: 100%;
   top: 0; }

.oldie .menu-button {

 display: none; }

.oldie.ie7 .flexnav li {

 width: 19.9%; }