Team:CityU HK/HumanPractice/Presentation

From 2014.igem.org

(Difference between revisions)
Line 19: Line 19:
     position: relative;
     position: relative;
     top:200px;
     top:200px;
 +
}
 +
 +
/* Initial body */
 +
body {
 +
  left: 0;
 +
  margin: 0;
 +
  overflow: hidden;
 +
  position: relative;
 +
}
 +
 +
/* Initial menu */
 +
.menu {
 +
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
 +
  left: -285px;  /* start off behind the scenes */
 +
  height: 100%;
 +
  position: fixed;
 +
  width: 285px;
 +
}
 +
 +
/* Basic styling */
 +
 +
.jumbotron {
 +
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/bg.png');
 +
  height: 100%;
 +
  -webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
      -o-background-size: cover;
 +
          background-size: cover;
 +
}
 +
 +
.menu ul {
 +
  border-top: 1px solid #636366;
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 +
.menu li {
 +
  border-bottom: 1px solid #636366;
 +
  font-family: 'Open Sans', sans-serif;
 +
  line-height: 45px;
 +
  padding-bottom: 3px;
 +
  padding-left: 20px;
 +
  padding-top: 3px;
 +
}
 +
 +
.menu a {
 +
  color: #fff;
 +
  font-size: 15px;
 +
  text-decoration: none;
 +
  text-transform: uppercase;
 +
}
 +
 +
.icon-close {
 +
  cursor: pointer;
 +
  padding-left: 10px;
 +
  padding-top: 10px;
 +
}
 +
 +
.icon-menu {
 +
  color: #fff;
 +
  cursor: pointer;
 +
  font-family: 'Open Sans', sans-serif;
 +
  font-size: 16px;
 +
  padding-bottom: 25px;
 +
  padding-left: 25px;
 +
  padding-top: 25px;
 +
  text-decoration: none;
 +
  text-transform: uppercase;
 +
}
 +
 +
.icon-menu i {
 +
  margin-right: 5px;
}
}
</style>
</style>
Line 34: Line 107:
   <div class="igemlogo"> <a href="https://2014.igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/9e/IGEMLogo_bu14.gif" width="147" height="120"></a></div>
   <div class="igemlogo"> <a href="https://2014.igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/9e/IGEMLogo_bu14.gif" width="147" height="120"></a></div>
</div>
</div>
 +
 +
<======testing=====>
 +
<!--slidebar menu-->
 +
    <div class="menu">
 +
     
 +
      <!-- Menu icon -->
 +
      <div class="icon-close">
 +
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
 +
      </div>
 +
 +
      <!-- Menu -->
 +
      <ul>
 +
        <li><a href="#">About</a></li>
 +
        <li><a href="#">Blog</a></li>
 +
        <li><a href="#">Help</a></li>
 +
        <li><a href="#">Contact</a></li>
 +
      </ul>
 +
    </div>
 +
 +
    <!-- Main body -->
 +
    <div class="jumbotron">
 +
 +
      <div class="icon-menu">
 +
        <i class="fa fa-bars"></i>
 +
        Menu
 +
      </div>
 +
   
 +
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
<======test end=====>
 +
<!--Navibar-->
<!--Navibar-->
Line 120: Line 223:
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
     <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
     <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
 +
 +
<!--testing slidebar menu js-->
 +
<script>
 +
    var main = function() {
 +
    $('.icon-menu').click(function() {
 +
      $('.menu').animate({
 +
          left:'0px'
 +
      }, 200);
 +
     
 +
      $('body').animate({
 +
          left: '285px'
 +
      }, 200);
 +
    });
 +
 +
    $('.icon-close').click(function() {
 +
      $('.menu').animate({
 +
          left: '-285px'
 +
      }, 200);
 +
      $('body').animate({
 +
          left: '0px'
 +
      }, 200);
 +
    });
 +
};
 +
$(document).ready(main);
 +
</script>
</body>
</body>
</html>
</html>

Revision as of 05:53, 21 August 2014

<======testing=====>
Menu
<======test end=====>
span 4
span 8

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