Team:UCL/QWERTYtest

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
{{:Team:UCL/Template:headerx}}
{{:Team:UCL/Template:headerx}}
<html>
<html>
-
<head>
+
<!--- Fontawesome menu icons --->
-
<link rel="stylesheet" href="https://2014.igem.org/Team:UCL/Template:QWERTYtest.css?action=raw&ctype=text/css" type="text/css" />
+
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
-
  <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
+
-
 
+
-
  <!-- Montserrat Sans -->
+
-
  <link href='http://fonts.googleapis.com/css?family=Montserrat:400, 700' rel='stylesheet' type='text/css'>       
+
-
 
+
-
</head>
+
-
<body>
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
-
  <div id="demo-bar"></div>
+
<script src="js/object/VerticalNavigation.min.js"></script>
-
  <div class="container">
+
-
    <a href="http://webdesigncrowd.com" class="btn"><span class="title">WebDesignCrowd</span></a>
+
-
    <a href="http://www.webdesigncrowd.com/sliding-icon-button/" class="btn"><span class="title">Back to Article</span></a>
+
-
    <h1>Scrolling Progress Bar</h1>
+
-
    <div class="content">
+
<script type="text/javascript">
-
      <div id="intro">
+
$(function() {
-
        <h2>Introduction</h2>
+
-
        <p>Nullam condimentum leo in nunc feugiat gravida. Nunc sed tellus et eros mattis auctor. Nam luctus commodo metus, pretium commodo nisl congue et. Sed vel ipsum eget ligula aliquam fringilla quis vel quam. Sed pulvinar libero id egestas rutrum. Ut quis metus ut lacus cursus commodo. Nam in pharetra leo. Donec augue enim, aliquam eget est quis, imperdiet aliquet mauris. Ut id augue vel tortor aliquam feugiat. </p>
+
    var verticalNavigation = new SSDSystem.VerticalNavigation();
-
        <p>Nullam facilisis, urna nec hendrerit tempus, tellus tortor molestie libero, ac malesuada dui odio condimentum tellus. Curabitur posuere id ipsum eget convallis. Suspendisse accumsan magna id pharetra sodales. Cras sit amet mi non turpis auctor dapibus eu in justo. Aliquam erat ipsum, dictum et elementum quis, dictum et diam. Mauris elementum eleifend nulla, in consectetur quam tristique a. Donec consequat elit in dolor semper, et aliquam mauris euismod.</p>
+
    verticalNavigation.init();
-
        <p>Aliquam id tellus purus. Fusce fermentum interdum mauris a lobortis. Donec vehicula at nulla vel sagittis. Maecenas commodo dapibus ipsum, tincidunt bibendum magna. Maecenas libero odio, dapibus a tortor blandit, vestibulum porta felis. Donec quis massa eu elit semper rutrum. Sed mattis nisl sed elit placerat, id aliquet magna sodales. Donec a malesuada sem. Praesent accumsan cursus viverra. Morbi dapibus lacinia bibendum. Duis ut egestas dui.</p>
+
-
        <p>Integer id tellus dictum, ullamcorper lacus iaculis, interdum quam. Pellentesque fringilla cursus adipiscing. Morbi fermentum volutpat gravida. Cras quis commodo neque, ac tempus nisi. Curabitur facilisis leo at ligula sagittis, in pharetra sem molestie. Nulla sagittis libero ut tortor sollicitudin, nec mollis augue gravida. Nulla diam felis, sodales et ipsum et, commodo suscipit nunc. Aenean accumsan leo eros, tristique elementum arcu pellentesque sed. In sed tempor neque. Phasellus vulputate, est at adipiscing rhoncus, turpis magna ultricies nisi, nec lacinia nisi nulla quis ipsum. Nullam auctor turpis vel risus ultrices, quis luctus nisi bibendum. In accumsan, nibh sit amet ultrices mattis, justo neque luctus sapien, porttitor ornare turpis tortor vel sem. Nulla et sapien ut est hendrerit volutpat at non tortor. Praesent faucibus sit amet sapien et pharetra.</p>
+
});
-
      </div>
+
</script>
-
      <div id="part-1">
+
-
        <h2>Part 1: Do this thing!</h2>
+
-
        <p>Nullam condimentum leo in nunc feugiat gravida. Nunc sed tellus et eros mattis auctor. Nam luctus commodo metus, pretium commodo nisl congue et. Sed vel ipsum eget ligula aliquam fringilla quis vel quam. Sed pulvinar libero id egestas rutrum. Ut quis metus ut lacus cursus commodo. Nam in pharetra leo. Donec augue enim, aliquam eget est quis, imperdiet aliquet mauris. Ut id augue vel tortor aliquam feugiat. </p>
+
-
        <p>Nullam facilisis, urna nec hendrerit tempus, tellus tortor molestie libero, ac malesuada dui odio condimentum tellus. Curabitur posuere id ipsum eget convallis. Suspendisse accumsan magna id pharetra sodales. Cras sit amet mi non turpis auctor dapibus eu in justo. Aliquam erat ipsum, dictum et elementum quis, dictum et diam. Mauris elementum eleifend nulla, in consectetur quam tristique a. Donec consequat elit in dolor semper, et aliquam mauris euismod.</p>
+
-
        <p>Aliquam id tellus purus. Fusce fermentum interdum mauris a lobortis. Donec vehicula at nulla vel sagittis. Maecenas commodo dapibus ipsum, tincidunt bibendum magna. Maecenas libero odio, dapibus a tortor blandit, vestibulum porta felis. Donec quis massa eu elit semper rutrum. Sed mattis nisl sed elit placerat, id aliquet magna sodales. Donec a malesuada sem. Praesent accumsan cursus viverra. Morbi dapibus lacinia bibendum. Duis ut egestas dui.</p>
+
-
      </div>
+
-
      <div id="part-2">
+
<div id="contentWrapper">
-
        <h2>Part 2: Do that other thing!</h2>
+
  <div id="contentLeft">
-
         <p>Integer id tellus dictum, ullamcorper lacus iaculis, interdum quam. Pellentesque fringilla cursus adipiscing. Morbi fermentum volutpat gravida. Cras quis commodo neque, ac tempus nisi. Curabitur facilisis leo at ligula sagittis, in pharetra sem molestie. Nulla sagittis libero ut tortor sollicitudin, nec mollis augue gravida. Nulla diam felis, sodales et ipsum et, commodo suscipit nunc. Aenean accumsan leo eros, tristique elementum arcu pellentesque sed. In sed tempor neque. Phasellus vulputate, est at adipiscing rhoncus, turpis magna ultricies nisi, nec lacinia nisi nulla quis ipsum. Nullam auctor turpis vel risus ultrices, quis luctus nisi bibendum. In accumsan, nibh sit amet ultrices mattis, justo neque luctus sapien, porttitor ornare turpis tortor vel sem. Nulla et sapien ut est hendrerit volutpat at non tortor. Praesent faucibus sit amet sapien et pharetra.</p>
+
    <ul id="leftNavigation">
-
      </div>
+
      <li class="active"> <a href="#"><i class="fa fa-coffee leftNavIcon"></i> <a href="http://www.jqueryscript.net/menu/">Menu</a> 1 </a>
-
        
+
         <ul>
-
    </div>
+
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 1.1 </a> </li>
-
    <div class="progress">
+
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 1.2 </a> </li>
-
      <div class="wrapper">
+
        </ul>
-
         <div class="bar">
+
       </li>
-
           <a href="#intro">Introduction</a>
+
      <li> <a href="#"><i class="fa fa-flask leftNavIcon"></i> Menu 2 </a>
-
           <i class="icon-ok"></i>
+
         <ul>
-
          <span></span>
+
          <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 2.1 </a> </li>
-
         </div>
+
           <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 2.2 </a> </li>
-
        <div class="bar">
+
           <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 2.3 </a> </li>
-
           <a href="#part-1">Part 1: Do this thing!</a>
+
         </ul>
-
           <i class="icon-ok"></i>
+
      </li>
-
           <span></span>
+
      <li> <a href="#"><i class="fa fa-truck leftNavIcon"></i> Menu 3</a>
-
         </div>
+
        <ul>
-
        <div class="bar">
+
           <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 3.1 </a> </li>
-
           <a href="#part-2">Part 2: Do that other thing!</a>
+
           <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 3.2 </a> </li>
-
           <i class="icon-ok"></i>
+
           <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 3.3 </a> </li>
-
          <span></span>
+
         </ul>
-
         </div>
+
      </li>
-
       </div>
+
      <li> <a href="#"><i class="fa fa-envelope-o leftNavIcon"></i> Menu 4 </a>
-
     </div>
+
        <ul>
-
    <div class="clearfix"></div>
+
           <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 4.1 </a> </li>
 +
           <li> <a href="#"><i class="fa fa-angle-right leftNavIcon"></i> Menu 4.2 </a> </li>
 +
         </ul>
 +
       </li>
 +
     </ul>
   </div>
   </div>
 +
  <div id="contentRight">
 +
    Your main content goes here
 +
  </div>
 +
</div>
 +
 +
<style>
 +
body {
 +
background-color: #fff;
 +
color: #666;
 +
font-family: "Open sans", Sans-serif;
 +
padding: 0;
 +
margin: 0
 +
}
 +
 +
a {
 +
text-decoration: none
 +
}
 +
 +
h1 {
 +
margin-top: 0
 +
}
 +
 +
#contentWrapper {
 +
width: 100%;
 +
height: 100%;
 +
position: relative
 +
}
 +
 +
#contentLeft {
 +
z-index: 10;
 +
width: 250px;
 +
height: 100%;
 +
position: fixed;
 +
top: 0;
 +
left: 0;
 +
background-color: #283c51
 +
}
 +
 +
#contentRight {
 +
padding: 1.3rem 2rem;
 +
margin-left: 250px
 +
}
 +
 +
#leftNavigation {
 +
margin: 2rem 0
 +
}
 +
 +
#leftNavigation,
 +
#leftNavigation li ul {
 +
list-style: none;
 +
padding: 0
 +
}
 +
 +
#leftNavigation li a {
 +
font-size: 0.875rem;
 +
display: block;
 +
padding: 0.8rem 1rem 0.8rem 3rem;
 +
color: #adadad;
 +
border-bottom: solid 1px #395673;
 +
text-overflow: ellipsis;
 +
overflow: hidden;
 +
position: relative;
 +
-webkit-transition: color 0.2s ease;
 +
transition: color 0.2s ease
 +
}
 +
 +
#leftNavigation li a,
 +
#leftNavigation li a .leftNavIcon {
 +
line-height: 120%
 +
}
 +
 +
#leftNavigation li a .leftNavIcon {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 3rem;
 +
padding: 0.8rem 0;
 +
text-align: center
 +
}
 +
 +
#leftNavigation li a:hover {
 +
color: #fff
 +
}
 +
 +
#leftNavigation li ul {
 +
display: none;
 +
margin: 0;
 +
background-color: #17232f
 +
}
 +
 +
#leftNavigation li ul li a {
 +
border-bottom: solid 1px #233547
 +
}
 +
 +
#leftNavigation li ul li:last-child a {
 +
border-bottom: none
 +
}
 +
 +
#leftNavigation li ul li.active a {
 +
color: #fff
 +
}
 +
 +
#leftNavigation li.active>a {
 +
color: #fff
 +
}
 +
 +
#leftNavigation li.active ul {
 +
display: block
 +
}
 +
 +
#leftNavigation>li.active {
 +
background-color: #427c97
 +
}
 +
</style>
-
  <!-- Javascript -->
 
-
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
-
<script type="text/javascript" src="https://2014.igem.org/Team:UCL/Template:QWERTYtest.js?action=raw&ctype=text/javascript"></script>
 
-
  <script>
 
-
    $(function(){
 
-
      $("#demo-bar").load("../demo-bar.html");
 
-
    });
 
-
  </script>
 
-
</body>
 
</html>
</html>
{{:Team:UCL/Template:footerx}}
{{:Team:UCL/Template:footerx}}

Revision as of 18:30, 15 October 2014

Goodbye Azodye UCL iGEM 2014

Contact Us

University College London
Gower Street - London
WC1E 6BT
Biochemical Engineering Department
Phone: +44 (0)20 7679 2000
Email: ucligem2014@gmail.com

Follow Us

Retrieved from "http://2014.igem.org/Team:UCL/QWERTYtest"