Team:UCLondon/Templates/Navigationv2
From 2012e.igem.org
(Difference between revisions)
(54 intermediate revisions not shown) | |||
Line 16: | Line 16: | ||
<ul class="menu links"> | <ul class="menu links"> | ||
- | <li class="hov"><a class="nothing" href="#" | + | <li class="hov"><a class="nothing tooltip" href="#" udit="Contact Us"><img src="http://db.tt/Zw3GxxwW" height="30" /></a></li> |
- | <li class="hov"><a href="https://igem.org/Main_Page" | + | <li class="hov"><a class="tooltip" href="https://igem.org/Main_Page" udit="iGEM"><img src="https://static.igem.org/mediawiki/2011/d/de/IGEM_basic_Logo_stylized.png" height="30" /></a></li> |
</ul> | </ul> | ||
Line 27: | Line 27: | ||
//body { background-color: white; } | //body { background-color: white; } | ||
#globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;} | #globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;} | ||
- | #content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100% | + | #content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; height:100%;} |
#search-controls { display:none; } | #search-controls { display:none; } | ||
#top-section { height: 10px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding:0; border: none; font-size: 10px;} | #top-section { height: 10px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding:0; border: none; font-size: 10px;} | ||
Line 93: | Line 93: | ||
.icons{ | .icons{ | ||
position: absolute; | position: absolute; | ||
- | right: | + | right:300px; |
margin-left: 100px; | margin-left: 100px; | ||
} | } | ||
Line 162: | Line 162: | ||
- | .links, .links | + | .links { position: absolute ; top: 5px; right:20px; background-color: rgba(249, 249, 249, 0.2); border-radius: 3px; height:33px; width:145px; } |
+ | .links li { padding-left: 1px; padding-right:1px; } | ||
+ | |||
+ | |||
+ | .links:before { | ||
+ | content:""; | ||
+ | border:2px black; | ||
+ | //display:block; | ||
+ | width:143px; | ||
+ | height:32px; | ||
+ | position:absolute; | ||
+ | } | ||
+ | |||
+ | |||
+ | .tooltip{display:inline;position:relative} | ||
+ | .tooltip:hover{text-decoration:none} | ||
+ | .tooltip:hover:after{ | ||
+ | background:#111; | ||
+ | background:rgba(0,0,0,.8); | ||
+ | border-radius:5px; | ||
+ | bottom:-26px; | ||
+ | color:#fff; | ||
+ | content:attr(udit); | ||
+ | display:block; | ||
+ | left:20%; | ||
+ | padding:5px 15px; | ||
+ | position:absolute; | ||
+ | white-space:nowrap; | ||
+ | z-index:98 | ||
+ | } | ||
+ | .tooltip:hover:before{ | ||
+ | border:solid; | ||
+ | border-color:#111 transparent; | ||
+ | border-width:0 6px 6px 6px; | ||
+ | bottom:-2px; | ||
+ | content:""; | ||
+ | display:block; | ||
+ | left:50%; | ||
+ | position:absolute; | ||
+ | z-index:99 | ||
+ | } | ||
Line 187: | Line 227: | ||
$('.hov').mouseenter( function() { | $('.hov').mouseenter( function() { | ||
$(this).children().children('img').animate({ | $(this).children().children('img').animate({ | ||
- | height:40 | + | height:40 |
- | + | ||
- | + | ||
}, 100 ); | }, 100 ); | ||
}).mouseleave(function(){ | }).mouseleave(function(){ | ||
$(this).children().children('img').animate({ | $(this).children().children('img').animate({ | ||
- | height: | + | height:30 |
- | + | ||
}, 100 ); | }, 100 ); | ||
}); | }); |
Latest revision as of 21:30, 21 September 2012