Team:Calgary/Sandbox
From 2012.igem.org
(Difference between revisions)
Line 67: | Line 67: | ||
#nav{ | #nav{ | ||
list-style: none; | list-style: none; | ||
- | width: | + | width: 160px; |
margin: 0px 10px 0px 10px; | margin: 0px 10px 0px 10px; | ||
- | padding: 20px; | + | padding: 20px 0px 20px 10px; |
text-indent: 0; | text-indent: 0; | ||
/*Background colours*/ | /*Background colours*/ | ||
- | background: #202020; | + | background: #202020; /*backup colour in case gradients fail*/ |
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333'); /* for IE 6+7*/ | filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333'); /* for IE 6+7*/ | ||
-ms-filter: | -ms-filter: | ||
Line 80: | Line 80: | ||
background: -moz-linear-gradient(left, #202020, #333); /* for firefox 3.6+ */ | background: -moz-linear-gradient(left, #202020, #333); /* for firefox 3.6+ */ | ||
} | } | ||
+ | /*To be moved to JQ block*/ | ||
#menu-icon{ | #menu-icon{ | ||
display: none; | display: none; | ||
Line 87: | Line 88: | ||
padding: 0; | padding: 0; | ||
} | } | ||
+ | /*submenu styling*/ | ||
#nav li a{ | #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: 125%; | ||
+ | text-indent: 10px; | ||
+ | } | ||
+ | #nav li a.dropheader{ | ||
+ | text-indent: 0; | ||
+ | margin-top: 1.5em; | ||
+ | width: auto; | ||
+ | } | ||
+ | /*primary menu styling*/ | ||
+ | #nav li > a{ | ||
display: block; | display: block; | ||
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | ||
Line 94: | Line 110: | ||
line-height: 40px; /*centers the text vertically*/ | line-height: 40px; /*centers the text vertically*/ | ||
} | } | ||
- | /*arrows to signify dropout menus*/ | + | /*arrows to signify dropout menus; to be moved to JQ block*/ |
#nav li a.drop:after{ | #nav li a.drop:after{ | ||
content: '>'; | content: '>'; | ||
+ | padding-right: 20px; | ||
color: #BBB; | color: #BBB; | ||
display: inline; | display: inline; | ||
Line 106: | Line 123: | ||
color: #43bbff; | 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 bottom, from(#333333), to(#424242)); /* for webkit browsers */ | ||
+ | background: -moz-linear-gradient(left, #202020, #333); /* for firefox 3.6+ */ | ||
+ | } | ||
+ | #nav li div.col_1{ | ||
+ | left: -999em; | ||
+ | width: 180px; | ||
+ | } | ||
+ | #nav li div.col_2{ | ||
+ | width: 390px; | ||
+ | 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 bottom, 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{ | ||
+ | left: -999em; | ||
+ | width: 180px; | ||
+ | |||
+ | } | ||
+ | #nav li div.col_r{ | ||
+ | float: right; | ||
+ | } | ||
+ | #nav li:hover div.col_l{ | ||
+ | left: 160px; | ||
+ | top: -3em; | ||
+ | } | ||
+ | #nav li:hover div.col_r{ | ||
+ | left: 340px; | ||
+ | top: -3em; | ||
+ | } | ||
+ | |||
/***End nav styling***/ | /***End nav styling***/ | ||
Line 147: | Line 204: | ||
<li><a href="#">Home</a></li> | <li><a href="#">Home</a></li> | ||
<li><a class="drop" href="#">Team</a> | <li><a class="drop" href="#">Team</a> | ||
- | <div> | + | <div class="col_1"> |
+ | <a href="#">Undergraduates</a> | ||
+ | <a href="#">Advisors</a> | ||
+ | <a href="#">Supervisors</a> | ||
</div> | </div> | ||
</li> | </li> | ||
- | <li><a class="drop" href="#">Project</a></ | + | <li><a class="drop" href="#">Project</a> |
- | + | <div name="col_2"> | |
+ | <div class="col_l"> | ||
+ | <a class="dropheader" href="#">OVERVIEW</a> | ||
+ | <a href="#">Data Page</a> | ||
+ | <a class="dropheader" href="#">BIOSENSOR</a> | ||
+ | <a href="#">Sensing NAs</a> | ||
+ | <a href="#">Promoter Library</a> | ||
+ | <a href="#">Electrochemistry</a> | ||
+ | <a class="dropheader" href="#">FUEL CONVERSION</a> | ||
+ | <a href="#">Decarboxylation</a> | ||
+ | <a href="#">Desulfurization</a> | ||
+ | <a href="#">Denitrification</a> | ||
+ | <a href="#">Ring Cleavage</a> | ||
+ | <a href="#">Flux Analysis</a> | ||
+ | </div> | ||
+ | |||
+ | <div class="col_r"> | ||
+ | <a class="dropheader" href="#">KILLSWITCH</a> | ||
+ | <a href="#">Riboswitches</a> | ||
+ | <a href="#">Rhamnose Promoter</a> | ||
+ | <a class="dropheader" href="#">BIOREACTOR</a> | ||
+ | <a href="#">Design</a> | ||
+ | <a href="#">Modelling</a> | ||
+ | <a class="dropheader" href="#">FUTURE DIRECTIONS</a> | ||
+ | <a class="dropheader" href="#">ATTRIBUTIONS</a> | ||
+ | </div> | ||
+ | |||
</div> | </div> | ||
+ | </li> | ||
<li><a href="#">Parts</a></li> | <li><a href="#">Parts</a></li> | ||
<li><a class="drop" href="#">Notebook</a></li> | <li><a class="drop" href="#">Notebook</a></li> | ||
- | <div> | + | <div name="col_1"> |
</div> | </div> | ||
<li><a class="drop" href="#">Outreach</a></li> | <li><a class="drop" href="#">Outreach</a></li> | ||
- | <div> | + | <div name="col_1"> |
</div> | </div> | ||
<li><a href="#">Sponsors</a></li> | <li><a href="#">Sponsors</a></li> |
Revision as of 17:15, 25 June 2012