Team:CityU HK/Template

From 2014.igem.org

(Difference between revisions)
 
(144 intermediate revisions not shown)
Line 2: Line 2:
<html>
<html>
 +
<html lang="en">
-
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
+
<style>
-
<script type="text/javascript">
+
body {
-
$(document).ready(function() {
+
      /*background-color: #FFFFCC;*/
-
$("#menu > li > ul").hide();
+
background-size:contain;
-
$("#menu > li").mouseenter(function() {
+
background-repeat: no-repeat;
-
$(this).children("li > ul").slideDown(250);
+
background-position:left;
-
});
+
background-attachment: fixed;
-
         $("#menu > li").mouseleave(function() {
+
        background-size: cover
-
$(this).children("li > ul").slideUp(250);
+
}
-
});
+
 
-
});
+
/*
-
</script>
+
Back to top button
 +
*/
 +
#back-top {
 +
position: fixed;
 +
bottom: 30px;
 +
        right:30px;
 +
        z-index:50;
 +
}
 +
#back-top a {
 +
width: 50px;
 +
display: block;
 +
text-align: center;
 +
font: 11px/100% Arial, Helvetica, sans-serif;
 +
text-transform: uppercase;
 +
text-decoration: none;
 +
color: #bbb;
 +
/* background color transition */
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
         border-radius: 2px;
 +
}
 +
#back-top a:hover {
 +
color: #000;
 +
}
 +
/* arrow icon (span tag) */
 +
#back-top span {
 +
width: 50px;
 +
height: 50px;
 +
display: block;
 +
background: #ddd url(https://static.igem.org/mediawiki/2014/5/57/Backtotop_BU14.png) no-repeat center center;
 +
/* background color transition */
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
}
 +
#back-top a:hover span {
 +
background-color: #F68F52;
 +
}
 +
 
 +
</style>
<body>
<body>
-
<div style="width:886px; height:265px; margin:auto;">
+
<nav class="navbar navbar-default" role="navigation">
-
<a href="https://2014.igem.org/Main_Page" class="logoimg"> <img src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="55px"/ ></a>
+
  <div class="container-fluid">
-
<center> <img src="https://static.igem.org/mediawiki/2014/1/14/Team_CityU_HK_banner.jpg" width="1200" height="280">
+
    <!-- Brand and toggle get grouped for better mobile display -->
 +
    <div class="navbar-header" id="header">
 +
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 +
        <span class="sr-only">Toggle navigation</span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
      </button>
 +
     
 +
      <a class="navbar-brand">
 +
          <a class="navbar-brand" id="igem"  href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2014/d/d8/Team_Berlin_igem_logo.png" width="80px" height="70px"></a><a class="navbar-brand" href="https://2014.igem.org/Team:CityU_HK">City University of Hong Kong 2014</a>
 +
    </div>
 +
    <!-- Collect the nav links, forms, and other content for toggling -->
 +
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
        <ul class="nav navbar-nav navbar-right">
 +
        <li class="active"><a href="https://2014.igem.org/Team:CityU_HK">Home</a></li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team Members</a>
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/TeamMember">Students</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/Team/instructors">Instructors & Advisors</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/Team/attribution">Attribution</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/Acknowledgement">Acknowledgement</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project</a>
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/project/overview">Overview</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/project/module_fad">Modules description</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/project/result">Results</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/project/futureplan">Future Plan</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Notebook</a>
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/lablog">Lab Log</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/protocols">Protocol</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/safety">Safety</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievement</a>
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/achievement/medal_requirement">Medal Fulfillment</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/achievement/new_biobrick">New Biobricks</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practice</a>
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/HumanPractice">Outreach</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/collaboration">Collaborations</a></li>
 +
          </ul>
 +
        </li>
 +
      </ul>
 +
    </div><!-- /.navbar-collapse -->
 +
  </div><!-- /.container-fluid -->
 +
</nav>
-
</center>
+
<p id="back-top">
-
</div>
+
<a href="#top"><span></span></a>
 +
</p>
-
<br><br>
 
-
<!--main content -->
+
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
    <!-- Include all compiled plugins (below), or include individual files as needed -->
 +
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-
<ul id = "menu">
+
<!--// Smooth scroll for in page links-->  
-
<li class="nav"><a href="https://2014.igem.org/Team:CityU_HK"><img src="https://static.igem.org/mediawiki/2014/e/ea/IGEM_wiki_logo_home.jpg" width="158" height="99"></a> </li>
+
    <script>
-
+
      $(document).ready(function() {
-
        <li class="nav"><img src="https://static.igem.org/mediawiki/2014/c/ce/IGEM_wiki_logo_team.jpg" width="158" height="99"></a>
+
      $('#btn-custom').click(function() {
-
        <ul>
+
         $('html,body').animate({
-
  <li><a href="https://2014.igem.org/Team:CityU_HK/Team/Member">Team Members</a></li>
+
          scrollTop:$($.attr(this,'href')).offset().top},500);
-
        <li><a href="https://2014.igem.org/Team:CityU_HK/Team/advisors">Advisors</a></li>
+
            return false;
-
         <li><a href="https://2014.igem.org/Team:CityU_HK/Team/instructors">Instructors</a></li>
+
         });
-
        <li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Attribution</a></li>
+
      });
-
        <li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Acknowledgement</a></li>
+
   
-
        </ul>
+
// bootstrap navbar hover dropdown
-
         </li>
+
    $(function(){
-
+
         $('.dropdown').hover(function() {
-
        <li class="nav"><img src="https://static.igem.org/mediawiki/2014/b/b3/IGEM_wiki_logo_Project.jpg" width="158" height="99"></a>
+
            $(this).toggleClass('open');
-
<ul>
+
            });
-
    <li><a href="https://2014.igem.org/Team:CityU_HK/Abstract">Abstract</a></li>
+
    });
-
        <li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Modules Description</a></li>
+
     </script>
-
         <li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Data Pages</a></li>
+
-
        <li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Characterization</a></li>
+
-
        <li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Results</a></li>
+
-
        <li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Future work</a></li>
+
-
</ul>
+
-
</li>
+
-
       
+
-
        <li class="nav"><img src="https://static.igem.org/mediawiki/2014/e/ea/CityU_wiki_logo_notebook.jpg" width="158" height="99"></a>
+
-
        <ul>      
+
-
        <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/lablog">Lab Log</a></li>
+
-
<li><a href="https://2014.igem.org/Team:CityU_HK/notebook/protocols">Protocols</a></li>
+
-
<li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Safety</a></li>
+
-
        </ul>
+
-
</li>
+
-
        <li class="nav"><img src="https://static.igem.org/mediawiki/2014/8/8a/CityU_wiki_logo_achievement.jpg" width="158" height="99">
+
<!--//back to top arrow-->
-
        <ul>
+
<script type="text/javascript">
-
<li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Medal Requirements</a></li>
+
$(document).ready(function(){
-
</ul>
+
-
        </li>
+
-
        <li class="nav"><img src="https://static.igem.org/mediawiki/2014/1/16/IGEM_wiki_logo_human_practice.jpg" width="158" height="99"></a>
+
// hide #back-top first
-
<ul>
+
$("#back-top").hide();
-
<li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Blog</a></li>
+
-
<li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Videos</a></li>
+
// fade in #back-top
-
<li><a href="https://igem.org/Team.cgi?year=2014&team_name=CityU_HK">Presentations</a></li>
+
$(function () {
-
</ul>
+
$(window).scroll(function () {
-
        </li>
+
if ($(this).scrollTop() > 100) {
 +
$('#back-top').fadeIn();
 +
} else {
 +
$('#back-top').fadeOut();
 +
}
 +
});
-
</ul>
+
// scroll body to 0px on click
 +
$('#back-top a').click(function () {
 +
$('body,html').animate({
 +
scrollTop: 0
 +
}, 800);
 +
return false;
 +
});
 +
});
-
<br><br><br><br><br><br><br>
+
});
-
<hr><br><br>
+
</script>
-
</body>
+
  </body>
</html>
</html>

Latest revision as of 08:15, 17 October 2014

Bootstrap 101 Template

Retrieved from "http://2014.igem.org/Team:CityU_HK/Template"