Team:Concordia/CSS/Meny

From 2013.igem.org

(Difference between revisions)
(Created page with ".meny { display: none; padding: 20px; overflow: auto; background: #333; color: #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; ...")
Line 2: Line 2:
     display: none;
     display: none;
     padding: 20px;
     padding: 20px;
-
     overflow: auto;
+
     overflow: hidden;
     background: #333;
     background: #333;
     color: #eee;
     color: #eee;

Revision as of 21:13, 26 September 2013

.meny {

   display: none;
   padding: 20px;
   overflow: hidden;
   background: #333;
   color: #eee;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

} .meny ul {

   margin-top: 10px;

} .meny ul li {

   display: inline-block;
   width: 200px;
   list-style: none;
   font-size: 20px;
   padding: 3px 10px;

} .meny ul li:before {

   content: '-';
   margin-right: 5px;
   color: rgba( 255, 255, 255, 0.2 );

}

/**

* Hint graphic that appears while menu is inactive
*/

.meny-arrow {

   position: absolute;
   z-index: 10;
   border: 10px solid transparent;
   -webkit-transition: opacity 0.4s ease 0.4s;
   -moz-transition: opacity 0.4s ease 0.4s;
   -ms-transition: opacity 0.4s ease 0.4s;
   -o-transition: opacity 0.4s ease 0.4s;
   transition: opacity 0.4s ease 0.4s;

} .meny-left .meny-arrow {

   left: 14px;
   top: 50%;
   margin-top: -16px;
   border-left: 16px solid #333;

} .meny-right .meny-arrow {

   right: 14px;
   top: 50%;
   margin-top: -16px;
   border-right: 16px solid #333;

} .meny-top .meny-arrow {

   left: 50%;
   top: 14px;
   margin-left: -16px;
   border-top: 16px solid #333;

} .meny-bottom .meny-arrow {

   left: 50%;
   bottom: 14px;
   margin-left: -16px;
   border-bottom: 16px solid #333;

} .meny-active .meny-arrow {

   opacity: 0;
   -webkit-transition: opacity 0.2s ease;
   -moz-transition: opacity 0.2s ease;
   -ms-transition: opacity 0.2s ease;
   -o-transition: opacity 0.2s ease;
   transition: opacity 0.2s ease;

}