Team:UCLondon/Templates/Navigationv2
From 2012e.igem.org
(Difference between revisions)
(90 intermediate revisions not shown) | |||
Line 13: | Line 13: | ||
<ul class="menu icons"> | <ul class="menu icons"> | ||
<li><a href="#"><img src="http://db.tt/KQemyPjm" height="15"/></a><ul class="hidden-menu" id="action"><li><a href="#">item</a></li></ul> </li> | <li><a href="#"><img src="http://db.tt/KQemyPjm" height="15"/></a><ul class="hidden-menu" id="action"><li><a href="#">item</a></li></ul> </li> | ||
- | |||
</ul> | </ul> | ||
- | + | ||
- | + | <ul class="menu links"> | |
- | + | <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 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> | ||
+ | |||
+ | |||
+ | |||
</div><!-- end navigation div--> | </div><!-- end navigation div--> | ||
Line 23: | 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 89: | Line 93: | ||
.icons{ | .icons{ | ||
position: absolute; | position: absolute; | ||
- | right: | + | right:300px; |
margin-left: 100px; | margin-left: 100px; | ||
} | } | ||
Line 158: | Line 162: | ||
+ | .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 177: | Line 222: | ||
$("#top-section").css('display', 'none'); | $("#top-section").css('display', 'none'); | ||
+ | |||
+ | |||
+ | |||
+ | $('.hov').mouseenter( function() { | ||
+ | $(this).children().children('img').animate({ | ||
+ | height:40 | ||
+ | }, 100 ); | ||
+ | |||
+ | }).mouseleave(function(){ | ||
+ | $(this).children().children('img').animate({ | ||
+ | height:30 | ||
+ | }, 100 ); | ||
+ | }); | ||
+ | |||
+ | |||
+ | var loading = ""; | ||
+ | |||
+ | |||
+ | jQuery.fn.center = function () { | ||
+ | var w = $(window); | ||
+ | var b = $('body'); | ||
+ | var mt = w.scrollTop() + (w.height() > b.height()) ? 0: ( -1 *Math.abs( w.outerHeight() - b.outerHeight() )/2 ); | ||
+ | this.css({ | ||
+ | 'position':'fixed', | ||
+ | 'left': '50%', | ||
+ | 'margin-left': 0 - (this.width() / 2), | ||
+ | 'top': '50%', | ||
+ | 'margin-top': (0 - (this.height() / 2)) | ||
+ | }); | ||
+ | return this; | ||
+ | } | ||
+ | |||
+ | |||
+ | var openContactBox = function () { | ||
+ | $('#shadow').center(); | ||
+ | |||
+ | var input = '<form method="post" id="cntctfrm_contact_form" action="http://codonusageoptimizer.org/contact/" enctype="multipart/form-data"><div style="text-align: left; padding-top: 5px;"><label for="cntctfrm_contact_name">Name:<span class="required"> *</span></label></div><div style="text-align: left;"><input class="text" type="text" size="40" value="" name="cntctfrm_contact_name" id="cntctfrm_contact_name" style="text-align: left; margin: 0;"></div><div style="text-align: left;"><label for="cntctfrm_contact_email">E-Mail Address:<span class="required">*</span></label></div><div style="text-align: left;"><input class="text" type="text" size="40" value="" name="cntctfrm_contact_email" id="cntctfrm_contact_email" style="text-align: left; margin: 0;"></div><div style="text-align: left;"><label for="cntctfrm_contact_subject">Subject:<span class="required"> *</span></label></div><div style="text-align: left;"><input class="text" type="text" size="40" value="" name="cntctfrm_contact_subject" id="cntctfrm_contact_subject" style="text-align: left; margin: 0;"></div><div style="text-align: left;"><label for="cntctfrm_contact_message">Message:<span class="required"> *</span></label></div><div style="text-align: left;"><textarea rows="5" cols="30" name="cntctfrm_contact_message" id="cntctfrm_contact_message"></textarea></div><div style="text-align: left;"><label for="cntctfrm_contact_attachment">Attachment:</label><div style="text-align: left;"><input type="file" name="cntctfrm_contact_attachment" id="cntctfrm_contact_attachment"><label style="font-size:10px;"><br>You can attach files of the following types: html, txt, css, gif, png, jpeg, jpg, tiff, bmp, ai, eps, ps, rtf, pdf, doc, docx, zip, rar, wav, mp3, ppt</label></div></div><div style="text-align: left; padding-top: 8px;"><input type="hidden" value="send" name="cntctfrm_contact_action"><input type="hidden" value="Version: 3.13"><input type="submit" value="Submit" style="cursor: pointer; margin: 0pt; text-align: center;margin-bottom:10px;"> </div></form>'; | ||
+ | |||
+ | |||
+ | $('#shadow').toggle('slow', function() { | ||
+ | $(this).children('#box-content').html(input); | ||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | return false; | ||
+ | } | ||
+ | |||
+ | var closeContactBox = function() { | ||
+ | $('#shadow').toggle('slow', function() { | ||
+ | $(this).children('#box-content').html(loading); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | $(document).ready(function(event) { | ||
+ | loading = $('#load').parent().html(); | ||
+ | |||
+ | $('body').off('click', '.nothing', openContactBox); | ||
+ | $('body').on('click', '.nothing', openContactBox); | ||
+ | |||
+ | $('body').off('click', '#close-box', closeContactBox); | ||
+ | $('body').on('click', '#close-box', closeContactBox); | ||
+ | |||
+ | }); | ||
+ | |||
Latest revision as of 21:30, 21 September 2012