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.
+
This version is now trying to implement the mobile wiki's menu functionality. The desktop version is commented out.
-->
-->
<head>
<head>
Line 21: Line 21:
}
}
p{
p{
-
font-family: Arial, sans-serif;
+
font-family: Georgia, sans-serif;
-
font-size: 1.5em;
+
font-size: 1em;
font-weight: normal;
font-weight: normal;
color: black;
color: black;
-
}
 
-
p.family{
 
-
font-family: Georgia;
 
}
}
Line 59: Line 56:
/***End Global Adjustments***/
/***End Global Adjustments***/
-
 
-
 
-
 
}
}
-
/***Nav styling***/
+
/*Mobile styling*/
#nav{
#nav{
 +
clear: both;
list-style: none;
list-style: none;
-
width: 180px;
+
position: relative;
-
margin: 0px 10px 0px 10px;
+
left: -19px;
-
padding: 20px 0px 20px 10px;
+
top: -3px;
-
text-indent: 0;
+
width: 200px;
-
+
background: #6d6d6d;
-
/*Background colours*/
+
display: block; /*add to JQ block*/
-
background: #202020; /*backup colour in case gradients fail*/
+
z-index: 1000;
-
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 top, from(#202020), to(#333333)); /* for webkit browsers */
+
-
background: -moz-linear-gradient(left,  #202020,  #333); /* for firefox 3.6+ */
+
-
background: linear-gradient(left, #202020 0%, #333333 100%); /*standard*/
+
}
}
-
/*To be moved to JQ block*/
+
-
#menu-icon{
+
#nav div{
-
display: none;
+
display: none;
-
}
+
-
#nav li{
+
-
height: auto;
+
-
padding: 0;
+
-
}
+
-
/*submenu styling*/
+
-
#nav li a{
+
-
display: block;
+
-
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
+
-
color: white;
+
-
font-size: 1.5em;
+
-
line-height: 1.2em; /*line spacing between submenu rows*/
+
-
text-indent: 0.8em;
+
}
}
-
#nav li a.dropheader{
+
-
text-indent: 0;
+
#nav a{
-
margin-top: 1.3em;
+
-
}
+
-
/*primary menu styling*/
+
-
#nav li > a{
+
display: block;
display: block;
-
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
+
text-decoration: none;
-
font-size: 1.8em;
+
color: white;
color: white;
-
line-height: 40px; /*centers the text vertically*/
+
font-family: Arial, Sans-Serif;
 +
font-size: 2em;
 +
line-height: 1.5em;
 +
padding-left: 20px;
}
}
-
/*arrows to signify dropout menus; to be moved to JQ block*/
+
-
#nav li a.drop:after{
+
#menu-icon{
-
content: '>';
+
text-indent: -999em;
-
padding-right: 20px;
+
display: block;
-
color: #BBB;
+
width: 116px;
-
display: inline;
+
height: 71px;
-
float: right;
+
background: url(https://static.igem.org/mediawiki/2012/b/b3/UCalgary2012_MobileMenuIconSprite.png);
-
}
+
background-position: top;
-
#nav li a:hover, #nav li a:hover::after{
+
-
display: block;
+
-
text-decoration: none;
+
-
color: #43bbff;
+
-
}
+
-
/*mega dropdown styling*/
+
-
 
+
-
#nav li div{
+
-
position: absolute;
+
-
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/
+
-
-ms-filter:
+
-
"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242')"; /* for IE 8*/
+
-
background: -webkit-gradient(linear, left top, right top, from(#333333), to(#424242)); /* for webkit browsers */
+
-
background: -moz-linear-gradient(left,  #333333,  #424242); /* for firefox 3.6+ */
+
-
background: linear-gradient(left, #333333 0%, #424242 100%); /*standard*/
+
}
}
-
/*1-column styles*/
+
-
#nav li div.col_1{
+
#menu-icon.active{
-
left: -999px;
+
background-position: bottom;
-
width: auto;
+
-
padding-bottom: 1.5em;
+
}
}
-
#nav li div.col_1 a{
 
-
display: block;
 
-
padding: 0 1.5em;
 
-
}
 
-
#nav li:hover div.col_1{
 
-
left: 205px;
 
-
margin-top: -55px;
 
-
}
 
-
/*2-column styles*/
 
-
#nav li div.col_2{
 
-
width: auto;
 
-
left: -999em;
 
-
padding-bottom: 1.5em;
 
-
height: auto;
 
-
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/
 
-
-ms-filter:
 
-
"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242')"; /* for IE 8*/
 
-
background: -webkit-gradient(linear, left top, right top, from(#333333), to(#424242)); /* for webkit browsers */
 
-
background: -moz-linear-gradient(left,  #202020,  #333); /* for firefox 3.6+ */
 
-
}
 
-
#nav li div.col_l, #nav li div.col_r{
 
-
position: relative;
 
-
width: 180px;
 
-
float: left;
 
-
background: transparent;
 
-
padding-left: 20px;
 
-
}
 
-
#nav li div.col_l a, #nav li div.col_r a{
 
-
display: block;
 
-
}
 
-
#nav li div.col_r{
 
-
padding-right: 20px;
 
-
}
 
-
#nav li:hover div.col_2{
 
-
left: 205px;
 
-
margin-top: -55px;
 
-
}
 
-
 
-
/***End nav styling***/
 
/*Desktop styles*/
/*Desktop styles*/
@media only screen and (min-device-width:481px){
@media only screen and (min-device-width:481px){
-
p{
+
-
font-family: Arial;
+
 
-
font-size: 1.5em;
+
-
}
+
-
p.family{
+
-
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
+
-
font-size: 1.5em;
+
-
}
+
}
}
Line 198: Line 110:
<script type="text/javascript">
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery(document).ready(function($){
 +
 +
/*all hidden things*/
 +
$('#nav').hide();
/* prepend menu icon */
/* prepend menu icon */
Line 203: Line 118:
/* toggle nav */
/* toggle nav */
-
$("#menu-icon").on("click", function(){
+
$("#menu-icon").click(function(){
-
$("#nav").slideToggle();
+
$("#nav").slideToggle('fast');
$(this).toggleClass("active");
$(this).toggleClass("active");
 +
});
});

Revision as of 22:07, 25 June 2012

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