"
Team:UNITN-Trento/CSS/Subs/Header
From 2013.igem.org
| Line 100: | Line 100: | ||
line-height: 1em; | line-height: 1em; | ||
text-decoration: none; | text-decoration: none; | ||
| + | |||
| + | z-index: 5; | ||
} | } | ||
| - | #tn-header #tn-menu > li | + | #tn-header #tn-menu > li.active { |
transform: rotate(-15deg); | transform: rotate(-15deg); | ||
-ms-transform: rotate(-15deg); /* IE 9 */ | -ms-transform: rotate(-15deg); /* IE 9 */ | ||
| Line 131: | Line 133: | ||
} | } | ||
| - | #tn-header #tn-menu > li | + | #tn-header #tn-menu > li.active > img { |
width: 100px; | width: 100px; | ||
margin: 0; | margin: 0; | ||
| Line 139: | Line 141: | ||
} | } | ||
| - | #tn-header #tn-menu > li | + | #tn-header #tn-menu > li.active > a { |
display: block; | display: block; | ||
| Line 207: | Line 209: | ||
} | } | ||
| - | #tn-header #tn-menu li:hover ul { | + | /*#tn-header #tn-menu li:hover ul { |
display: block; | display: block; | ||
animation: submenu .5s; | animation: submenu .5s; | ||
| - | -webkit-animation: submenu .5s; | + | -webkit-animation: submenu .5s; |
| - | + | }*/ | |
#tn-header #tn-menu li ul li { | #tn-header #tn-menu li ul li { | ||
Revision as of 12:11, 9 September 2013
/********/ /*HEADER*/ /********/
- tn-header-wrap {
display: inline-block;
width: 100%; height: 250px;
margin: 0; padding: 0;
background-color: #2880C5; border-bottom: 7px solid white; box-shadow: 2px 0 6px #323232;
background-image: url(http://i44.tinypic.com/690qs8.jpg); background-position: center; background-size: 100%; }
- tn-header {
display: static; position: relative; top: 0;
max-width: 1300px; height: 180px;
margin: 0 auto; padding: 1em; }
/*-----------*/ /*HEADER MENU*/ /*-----------*/
- tn-header #tn-menu {
position: absolute; top: 170px; left: 0;
width: 100%;
margin: 0; padding: 0;
list-style: none; text-align: center; }
- tn-header #tn-menu > li {
position: relative; display: inline-block;
height: 100px; width: 100px;
margin: 0.5em; /* background-position: center center; background-repeat: no-repeat; background-size: 75%; */ line-height: 100px; /*font-weight: bold;*/ text-shadow: 0 0 2px black; text-align: center; vertical-align: middle;
transition: transform 0.4s; -webkit-transition: -webkit-transform 0.4s; /* Safari */ }
- tn-header #tn-menu > li > img {
width: 76px; margin: 12px; }
- tn-header #tn-menu > li > a {
display: block;
position: absolute; top: 2.2em; left: 0;
padding: 0.3em 0.5em; /*margin-top: 2.2em;*/
width: 3em;
border-radius: 0.5em; border: 3px solid white; background: rgba(31,68,87,.9); background-image: url(imgs/box-bottoni.png); color: #ffffff; font-family: 'Mouse Memoirs', sans-serif; font-size: 1.5em; line-height: 1em; text-decoration: none;
z-index: 5; }
- tn-header #tn-menu > li.active {
transform: rotate(-15deg); -ms-transform: rotate(-15deg); /* IE 9 */ -webkit-transform: rotate(-15deg); /* Safari and Chrome */
/*background-size: 100%;*/ }
@keyframes image { from { width: 76px; margin: 12px; } to { width: 100px; margin: 0; } } @-webkit-keyframes image /* Safari and Chrome */ { from { width: 76px; margin: 12px; } to { width: 100px; margin: 0; } }
- tn-header #tn-menu > li.active > img {
width: 100px; margin: 0;
animation: image 1s; -webkit-animation: image 1s; /* Safari and Chrome */ }
- tn-header #tn-menu > li.active > a {
display: block;
position: absolute; top: 2.2em; left: 0;
padding: 0.3em 0.5em; /*margin-top: 2.2em;*/ border-radius: 0.5em; border: 3px solid white; box-shadow: 2px 2px 4px #323232; background: #C4221C; font-family: 'Mouse Memoirs', sans-serif; font-size: 1.5em; line-height: 1em; text-decoration: underline; }
/*SUB MENU*/
- tn-header #tn-menu li ul {
display: none; position: absolute; top: 75%; left: -100%;
width: 450px; height: 3em;
padding: 0; padding-top: 3em; margin: 0; margin-top: 1em;
line-height: 1em; list-style: none;
transform: rotate(15deg); -ms-transform: rotate(15deg); /* IE 9 */ -webkit-transform: rotate(15deg); /* Safari and Chrome */
text-align: left; }
@keyframes submenu { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes submenu /* Safari and Chrome */ { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } }
/*#tn-header #tn-menu li:hover ul { display: block;
animation: submenu .5s; -webkit-animation: submenu .5s; }*/
- tn-header #tn-menu li ul li {
display: inline-block; height: 1.4em;
margin: 0; padding: 0;
font-family: 'Mouse Memoirs', sans-serif; font-size: 1.5em; font-variant: small-caps;
line-height: 1em; }
- tn-header #tn-menu li ul li a {
display: block; padding-top: 0em; margin: 0 0.5em; color: #1F4457; text-decoration: none; text-shadow: none; }
- tn-header #tn-menu li ul li:hover a {
color: #C4221C; text-decoration: underline; }
/*------------*/ /*HEADER LOGHI*/ /*------------*/
- tn-header #tn-loghi {
width: 100%; height: 180px; }
- tn-header #tn-loghi .title {
margin: 0; margin-top: 0.3em;
color: #eee;
font-family: 'Marck Script', cursive; font-size: 7em;
line-height: 1em; text-align: center; text-shadow: 1px 1px 2px #000; }
