Team:Calgary/Sandbox

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
 +
<!--
 +
This version is now trying to add a compound mega/mobile dropdown nav menu. Viewports for mobile should, for the most part, be working properly at this point.
 +
-->
<head>
<head>
<!--
<!--
Line 11: Line 14:
<style>
<style>
-
<!--
 
-
/*Typical smartphone device styles*/
 
-
@media only screen and (max-device-width:480px){
 
-
p{
 
-
font-family: Arial, sans-serif;
 
-
font-size: 5em;
 
-
font-weight: normal;
 
-
color: blue;
 
-
}
 
-
p.family{
 
-
font-family: Georgia;
 
-
}
 
-
}
 
-
-->
 
/*Base styles*/
/*Base styles*/
Line 48: Line 37:
only screen and (max-device-width: 480px){
only screen and (max-device-width: 480px){
 +
/***Global Adjustments***/
div#top-section, div#footer-box, div#footer, div#content, div#f-list, ul#f-list{
div#top-section, div#footer-box, div#footer, div#content, div#f-list, ul#f-list{
width: 95%;
width: 95%;
Line 67: Line 57:
overflow-x: hidden;
overflow-x: hidden;
}
}
-
#box{
+
-
width: 100%;
+
/***End Global Adjustments***/
-
height: 50px;
+
-
background-color: red;
+
 
-
}
+
}
}
 +
 +
/***Nav styling***/
 +
#nav{
 +
list-style: none;
 +
width: 16%;
 +
margin: 0px 10px 0px 10px;
 +
padding: 20px;
 +
text-indent: 0;
 +
 +
/*Background colours*/
 +
background: #202020;
 +
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333'); /* for IE 6+7*/
 +
-ms-filter:
 +
"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333')"; /* for IE 8*/
 +
background: -webkit-gradient(linear, left top, right bottom, from(#202020), to(#333333)); /* for webkit browsers */
 +
background: -moz-linear-gradient(left,  #202020,  #333); /* for firefox 3.6+ */
 +
}
 +
#menu-icon{
 +
display: none;
 +
}
 +
#nav li{
 +
height: auto;
 +
padding: 0;
 +
}
 +
#nav li a{
 +
display: block;
 +
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
 +
font-size: 1.8em;
 +
color: white;
 +
line-height: 40px; /*centers the text vertically*/
 +
}
 +
/*arrows to signify dropout menus*/
 +
#nav li a.drop:after{
 +
content: '>';
 +
color: #BBB;
 +
display: inline;
 +
float: right;
 +
}
 +
#nav li a:hover, #nav li a:hover::after{
 +
display: block;
 +
text-decoration: none;
 +
color: #43bbff;
 +
}
 +
/***End nav styling***/
/*Desktop styles*/
/*Desktop styles*/
Line 84: Line 118:
font-size: 1.5em;
font-size: 1.5em;
}
}
-
#box{
+
 
-
width: 100%;
+
-
height: 30px;
+
-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
+
-
background: -webkit-gradient(linear, left top, right bottom, from(#333), to(#efefef)); /* for webkit browsers */
+
-
background: -moz-linear-gradient(left,  #ccc,  #000); /* for firefox 3.6+ */
+
-
}
+
-
.arrow{
+
-
width: 0;
+
-
height: 0;
+
-
border-top: 15px solid transparent;
+
-
border-bottom: 15px solid transparent;
+
-
border-left: 15px solid blue;
+
-
}
+
}
}
 +
</style>
</style>
 +
 +
<!--Mobile nav from http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial-->
 +
<script type="text/javascript">
 +
jQuery(document).ready(function($){
 +
 +
/* prepend menu icon */
 +
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
 +
 +
/* toggle nav */
 +
$("#menu-icon").on("click", function(){
 +
$("#nav").slideToggle();
 +
$(this).toggleClass("active");
 +
});
 +
 +
});
 +
</script>
 +
</head>
</head>
<body>
<body>
-
<div data-role="collapsible">
 
-
<h3>Header</h3>
 
-
<p>This is not a paragraph.</p>
 
-
<p class="family">This is a test for font-family. Watch "Jeopardy!", Alex Trebek's fun TV quiz game.</p>
 
-
</div>
 
-
<div class="arrow"></div>
 
-
<div id="box"></div>
+
<div id="nav-wrap">
-
</html>
+
<ul id="nav">
-
[[File:Ucalgary_2012_Codependence_Mechanism_V2.png|thumb|200px|center|Proposed method of codependence. Two plasmids in two separate strains will produce ligands that repress the riboswitch controlling each other's death genes.]]
+
<li><a href="#">Home</a></li>
-
<html>
+
<li><a class="drop" href="#">Team</a>
 +
<div>
 +
</div>
 +
</li>
 +
<li><a class="drop" href="#">Project</a></li>
 +
<div>
 +
</div>
 +
<li><a href="#">Parts</a></li>
 +
<li><a class="drop" href="#">Notebook</a></li>
 +
<div>
 +
</div>
 +
<li><a class="drop" href="#">Outreach</a></li>
 +
<div>
 +
</div>
 +
<li><a href="#">Sponsors</a></li>
 +
<li><a href="#">iGEM Home</a></li>
 +
</ul>
 +
</div>
</body>
</body>
</html>
</html>

Revision as of 17:13, 22 June 2012

Retrieved from "http://2012.igem.org/Team:Calgary/Sandbox"