|
|
Line 1: |
Line 1: |
− | {{NAIT_Edmonton/CSS2}} | + | {{NAIT_Edmonton/CSS3}} |
| <html> | | <html> |
| | | |
Line 8: |
Line 8: |
| | | |
| <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> | | <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> |
| + | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> |
| + | <script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/jquery.flexslider-min?action=raw&ctype=text/javascript"></script> |
| | | |
| <script type="text/javascript"> | | <script type="text/javascript"> |
Line 38: |
Line 40: |
| </script> | | </script> |
| | | |
− | </head>
| |
| | | |
− | <body> | + | <!-----------https://static.igem.org/mediawiki/2015/d/d8/El_Capitan_.ttf-------------------> |
| | | |
| | | |
| + | <script type="text/javascript"> |
| + | $(document).ready(function() { |
| + | // grab the initial top offset of the navigation |
| + | var stickyNavTop = $('.nav').offset().top; |
| + | |
| + | // our function that decides weather the navigation bar should have "fixed" css position or not. |
| + | var stickyNav = function(){ |
| + | var scrollTop = $(window).scrollTop(); // our current vertical position from the top |
| + | |
| + | // if we've scrolled more than the navigation, change its position to fixed to stick to top, |
| + | // otherwise change it back to relative |
| + | if (scrollTop > stickyNavTop) { |
| + | $('.nav').addClass('sticky'); |
| + | } else { |
| + | $('.nav').removeClass('sticky'); |
| + | } |
| + | }; |
| | | |
− | <div id="header">
| + | stickyNav(); |
− | <div class="header"> | + | // and run it again every time you scroll |
| + | $(window).scroll(function() { |
| + | stickyNav(); |
| + | }); |
| + | }); |
| + | </script> |
| | | |
− | <style type="text/css"> | + | <script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/StickyMenu?action=raw&ctype=text/javascript"></script> |
| | | |
− | .header_mobile {
| + | <script type="text/javascript" charset="utf-8"> |
− | display:none;
| + | |
− | position: absolute;
| + | |
− | background-color:transparent;
| + | |
− | width:65px;
| + | |
− | top: 90px;
| + | |
− | left:50px;
| + | |
− | height:65px;
| + | |
− | z-index:999;
| + | |
− | position:fixed;}
| + | |
| | | |
− | .header_mobile ul {list-style:none; position:absolute;float:right;margin:0;padding-right:125px} | + | var $ = jQuery.noConflict(); |
− | .header_mobile ul * {margin:0; padding:0;} | + | $(window).load(function() { |
− | .header_mobile a {display:block;color:#159CD8;text-decoration:none;padding:15px 50px} | + | $('.flexslider').flexslider({ |
− | .header_mobile li {position:relative;float:left; padding:5px 5px 5px 5px}
| + | animation: "fade" |
− | .header_mobile li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
| + | }); |
− | .header_mobile li.current-menu-item {background:#5AB3E3}
| + | }); |
− | .header_mobile ul ul{display:none; position:absolute; top:77%; left:30%; background:#0D4D8C; padding:0 0px 0 0}
| + | </script> |
− | .header_mobile ul ul li:hover{background:#159CD8}
| + | |
− | .header_mobile ul ul li{float:none; width:120px}
| + | |
− | .header_mobile ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
| + | |
− | .header_mobile ul ul ul {top:0; left:200%}
| + | |
− | .header_mobile ul li.selected a{color:#8BC5EB}
| + | |
− | .header_mobile ul li:hover > ul{display:block;}
| + | |
| | | |
| + | </head> |
| | | |
− | @media screen and (max-width:1000px){
| + | <body> |
| | | |
− | .header_left{display:none;}
| + | <div class="header"> |
− | .header_right{display:none;} | + | <center><img style="margin-top:10px;" src="https://static.igem.org/mediawiki/2015/c/c2/NAIT_Sample_Logo.png" height="75px"></center> |
− | .header_mobile{display:block;}
| + | </div> |
| | | |
− | }
| |
| | | |
− | </style> | + | <div class="nav"> |
| | | |
− | <div class="logo"><a href="https://2015.igem.org/Team:NAIT_Edmonton">
| + | <div class="navigation"> |
− | <img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px"></a>
| + | <ul> |
− | </div>
| + | |
− | <div class="header_left">
| + | |
− | <ul>
| + | |
− |
| + | |
| <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a> | | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a> |
| <ul> | | <ul> |
Line 98: |
Line 102: |
| </ul> | | </ul> |
| </li> | | </li> |
| + | |
| <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a> | | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a> |
| <ul> | | <ul> |
Line 106: |
Line 111: |
| </ul> | | </ul> |
| </li> | | </li> |
− | </ul>
| + | |
− | </div>
| + | |
− | <div class="header_right">
| + | |
− | <ul>
| + | |
| <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a> | | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a> |
| <ul> | | <ul> |
Line 118: |
Line 120: |
| </ul> | | </ul> |
| </li> | | </li> |
| + | |
| <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a> | | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a> |
| <ul> | | <ul> |
Line 125: |
Line 128: |
| </ul> | | </ul> |
| </li> | | </li> |
− | </ul>
| + | |
− | </div>
| + | </ul> |
| + | |
| </div> | | </div> |
| + | |
| + | </div> |
| + | |
| + | |
| + | |
| + | </style> |
| | | |
| + | <div id="wrap"> |
| + | |
| | | |
− | <div id="wrap">
| |
| | | |
| <style type="text/css"> | | <style type="text/css"> |
Line 339: |
Line 350: |
| </div><!--end .accordion--> | | </div><!--end .accordion--> |
| | | |
− |
| |
− | </div>
| |
| | | |
− | <div class="clear"></div>
| + | |
| + | </div> |
| | | |
| | | |
− | <div class="header_mobile"> | + | <div class="clear"></div> |
− | <ul>
| + | |
− | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/MobileMenu">menu</a>
| + | |
− | <ul>
| + | |
− | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a>
| + | |
− | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a>
| + | |
− | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a>
| + | |
− | <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− |
| + | |
− | </ul>
| + | |
− | </div> | + | |
| | | |
| | | |
Line 364: |
Line 362: |
| | | |
| | | |
− | <div class="footer">
| + | </div> |
| + | |
| + | <div class="clear"></div> |
| + | |
| + | |
| + | |
| + | <div class="footer"> |
| <div class="footer_content"> | | <div class="footer_content"> |
| <div class="footer_left"> | | <div class="footer_left"> |
Line 386: |
Line 390: |
| </div> | | </div> |
| </div> | | </div> |
− | </div>
| |
| | | |
| <style type="text/css"> | | <style type="text/css"> |
| | | |
| #footer {z-index:15;} | | #footer {z-index:15;} |
− | .footer {position: relative; padding:20px 0 40px 0; margin: -25px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;} | + | .footer {padding:20px 0 40px 0; margin: 0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;} |
| .footer_content {margin:auto;width:100%;} | | .footer_content {margin:auto;width:100%;} |
| .footer_left { float:left; padding:0 0 0 10%;} | | .footer_left { float:left; padding:0 0 0 10%;} |
Line 409: |
Line 412: |
| </style> | | </style> |
| | | |
− | </body>
| |
| | | |
− | <!----------
| |
− |
| |
− | _ __ _
| |
− | ;' '',)
| |
− | /;6 , ;/
| |
− | (Y)_:., |
| |
− | `-', :; \
| |
− | |; ,.:\
| |
− | /:.; ;;)
| |
− | |:;,.'| :/
| |
− | / |: / ; /
| |
− | /:;\ `| "//
| |
− | /_,: | |./,|
| |
− | _/: \.'|,|/| |
| |
− | /:.,:.|,|"| |:|
| |
− | /:;:|:,/;|:| |'|
| |
− | eduardo |',:| \_ \ |_|;\_
| |
− | /;\_ /\_)) \_))\_))
| |
− | (;(________
| |
− | '''''`'''~`
| |
− |
| |
− | ------------------>
| |
| | | |
| + | </body> |
| | | |
| </html> | | </html> |