Team:XMU-China/CSS/SpryMenuBarHorizontal/css

From 2012.igem.org

(Difference between revisions)
 
(20 intermediate revisions not shown)
Line 1: Line 1:
-
{{Team:XMU-China/Main_Header|home}}
+
<html>
 +
<style type="text/css">
-
<html>
 
-
<head>
+
@charset "UTF-8";
-
<script type="text/javascript">
+
-
$(document).ready(function(){
+
-
+
-
$('#promoter').hover(
+
-
function(){
+
-
$('#subdefault').hide();
+
-
$('#subpromoter').show();
+
-
},
+
-
function(){
+
-
$('#subpromoter').hide();
+
-
$('#subdefault').show();
+
-
});
+
-
+
-
$('#reporter').hover(
+
-
function(){
+
-
$('#subdefault').hide();
+
-
$('#subreporter').show();
+
-
},
+
-
function(){
+
-
$('#subreporter').hide();
+
-
$('#subdefault').show();
+
-
});
+
-
$('#chassis').hover(
+
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
-
function(){
+
-
$('#subdefault').hide();
+
-
$('#subchassis').show();
+
-
},
+
-
function(){
+
-
$('#subchassis').hide();
+
-
$('#subdefault').show();
+
-
});
+
-
});
+
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
-
<meta http-equiv="Content-Type"
+
/*******************************************************************************
-
content="text/html; charset=utf-8" />
+
LAYOUT INFORMATION: describes box model, positioning, z-order
-
<title>无标题文档</title>
+
-
<script
+
-
src="Template:Team:XMU-China/js" type="text/javascript"></script>
+
*******************************************************************************/
-
<link
+
-
 
+
-
href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
+
-
 
+
-
<style
+
-
 
+
-
type="text/css">
+
-
#schoolbadge {
+
-
position:absolute;
+
-
width:50px;
+
-
height:50px;
+
-
z-
+
-
 
+
-
index:4;
+
-
left:100px;
+
-
top:3px;
+
-
padding-left:20px;
+
-
font-size:30px;
+
-
+
-
 
+
-
color: #006dab;
+
-
font-family:Tahoma, Geneva, sans-serif;
+
-
text-align:center;
+
 +
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
 +
ul.MenuBarHorizontal
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
cursor: default;
 +
width: auto;
}
}
-
#leftnavig {
+
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
-
+
ul.MenuBarActive
-
 
+
{
-
position:absolute;
+
z-index: 1000;
-
width:145px;
+
-
height:115px;
+
-
z-index:2;
+
-
left: 100px;
+
-
top:
+
-
 
+
-
55px;
+
}
}
-
 
+
/* Menu item containers, position children relative to this container and are a fixed width */
-
#titlebar {
+
ul.MenuBarHorizontal li
-
font-size: 13px;
+
{
-
color: #006DAB;
+
margin: 0;
-
background-image: url
+
padding: 0;
-
 
+
list-style-type: none;
-
(pictures/index.png);
+
font-size: 100%;
-
background-repeat: no-repeat;
+
position: relative;
 +
text-align: left;
 +
cursor: pointer;
 +
width: 8em;
 +
float: left;
 +
}
 +
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
 +
ul.MenuBarHorizontal li ul
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
z-index: 1;
 +
cursor: default;
 +
width: 8.2em;
position: absolute;
position: absolute;
-
z-index: 1;
+
left: -1000em;
-
+
-
 
+
-
width: 900px;
+
-
left: 245px;
+
-
top: 55px;
+
-
display: table;
+
-
letter-spacing: 0px;
+
}
}
-
#photo {
+
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
-
+
ul.MenuBarHorizontal li ul.MenuBarSubmenuVisible
-
 
+
{
-
position:absolute;
+
left: auto;
-
width:840px;
+
-
height:100px;
+
-
z-index:3;
+
-
left:245px;
+
-
+
-
 
+
-
top:80px;
+
-
visibility:inherit;
+
-
padding:30px;
+
-
+
}
}
-
#description {
+
/* Menu item containers are same fixed width as parent */
 +
ul.MenuBarHorizontal li ul li
 +
{
 +
width: 8.2em;
 +
}
 +
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
 +
ul.MenuBarHorizontal li ul ul
 +
{
position: absolute;
position: absolute;
-
+
margin: -5% 0 0 95%;
-
 
+
}
-
width:840px;
+
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
-
left: 245px;
+
ul.MenuBarHorizontal li ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
-
top: 210px;
+
{
-
margin:30px;
+
left: auto;
-
table-layout:fixed;
+
top: 0;
-
+
-
 
+
-
height:350px;
+
-
overflow: scroll;
+
}
}
-
</style>
 
-
</head>
+
/*******************************************************************************
-
<body>
+
DESIGN INFORMATION: describes color scheme, borders, fonts
-
<div id="schoolbadge"><img
+
-
src="https://static.igem.org/mediawiki/2012/6/67/Schoolbadge.gif" width="100%"  /></div>
+
  *******************************************************************************/
-
<div
+
-
id="leftnavig"><table border="0" cellspacing="0" cellpadding="0"
+
/* Submenu containers have borders on all sides */
 +
ul.MenuBarHorizontal li ul
 +
{
 +
border: 1px solid #CCC;
 +
}
 +
/* Menu items are a light gray block with padding and no text decoration */
 +
ul.MenuBarHorizontal a
 +
{
 +
display: block;
 +
cursor: pointer;
 +
background-color: #EEE;
 +
padding: 0.5em 0.75em;
 +
color: #333;
 +
text-decoration: none;
 +
}
 +
/* Menu items that have mouse over or focus have a blue background and white text */
 +
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
 +
{
 +
background-color: #33C;
 +
color: #FFF;
 +
}
 +
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
 +
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
 +
{
 +
background-color: #33C;
 +
color: #FFF;
 +
}
-
background="https://static.igem.org/mediawiki/2012/a/a2/Left-navigbar.png"  width="100%">
+
/*******************************************************************************
-
    <tr>
+
-
 
+
-
  <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Project description</td>
+
SUBMENU INDICATION: styles if there is a submenu under a given menu item
-
    </tr>
+
-
   
+
-
<tr>
+
*******************************************************************************/
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Main results</td>
+
-
    </tr>
+
-
   
+
-
<tr>
+
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Data</td>
+
ul.MenuBarHorizontal a.MenuBarItemSubmenu
-
    </tr>
+
{
-
    <tr>
+
background-image: url(SpryMenuBarDown.gif);
-
     
+
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal li ul a.MenuBarItemSubmenu
 +
{
 +
background-image: url(SpryMenuBarRight.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarDownHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal li ul a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarRightHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
-
<td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Protocals</td>
+
/*******************************************************************************
-
    </tr>
+
-
    <tr>
+
-
      <td
+
-
height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Team members</td>
+
BROWSER HACKS: the hacks below should not be changed unless you are an expert
-
    </tr>
+
-
    <tr>
+
-
     
+
-
<td><img src="https://static.igem.org/mediawiki/2012/a/a5/Leftbar.png" alt="pictures/leftbar.png"
+
*******************************************************************************/
-
width="145" /></td>
+
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
-
    </tr>
+
ul.MenuBarHorizontal iframe
-
  </table></div>
+
{
-
<ul id="titlebar" class="MenuBarHorizontal"
+
position: absolute;
-
 
+
z-index: 1010;
-
style="background:url(pictures/navigbar.png) ;">
+
filter:alpha(opacity:0.1);
-
  <li><a
+
}
-
 
+
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
-
href="#https://2012.igem.org/Team:XMU-China">Home</a></li>
+
@media screen, projection
-
  <li><a class="MenuBarItemSubmenu"
+
{
-
 
+
ul.MenuBarHorizontal li.MenuBarItemIE
-
href="#" >Team</a>
+
{
-
    <ul>
+
display: inline;
-
      <li><a href="#">Instructors</a></li>
+
f\loat: left;
-
      <li><a
+
background: #FFF;
-
 
+
}
-
href="#">Advisors</a></li>
+
}
-
      <li><a href="#">Team members</a></li>
+
</style>  
-
      <li><a
+
-
 
+
-
href="#">Acknowledgement</a></li>
+
-
      <li><a href="#">Collaborations</a></li>
+
-
      <li><a
+
-
 
+
-
href="#">Our city&amp;Our university</a></li>
+
-
    </ul>
+
-
  </li>
+
-
    <li><a
+
-
 
+
-
class="MenuBarItemSubmenu" href="#" >Project</a>
+
-
    <ul>
+
-
      <li><a href="#">Background
+
-
     
+
-
 
+
-
(Approach/
+
-
      Program)</a></li>
+
-
      <li><a href="#">Section A</a></li>
+
-
      <li><a
+
-
 
+
-
href="#">Section B</a></li>
+
-
      <li><a href="#">Accomplishment</a></li>
+
-
      <li><a
+
-
 
+
-
href="#">Data page</a></li>
+
-
      <li><a href="#">Future plan</a></li>
+
-
      <li><a
+
-
 
+
-
href="#">Reference</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li><a class="MenuBarItemSubmenu"
+
-
 
+
-
href="#">Parts</a>
+
-
    <ul>
+
-
      <li><a href="#">Parts submitted</a></li>
+
-
      <li><a
+
-
 
+
-
href="#">Attrivutions</a></li>
+
-
    </ul>
+
-
  </li>
+
-
  <li><a class="MenuBarItemSubmenu"
+
-
 
+
-
href="#">Notebook</a>
+
-
    <ul>
+
-
      <li><a href="#">Brainstorm</a></li>
+
-
      <li><a
+
-
 
+
-
href="#">Wet lab journal</a></li>
+
-
      <li><a href="#">Protocols</a></li>
+
-
    </ul>
+
-
  </li>
+
-
 
+
-
 
+
-
<li><a href="#">Safety</a></li>
+
-
  <li><a class="MenuBarItemSubmenu" href="#">HumanPractice</a>
+
-
+
-
 
+
-
  <ul>
+
-
      <li><a href="#">Exhibition</a></li>
+
-
      <li><a href="#">Communication</a></li>
+
-
 
+
-
 
+
-
  </ul>
+
-
  <li><a href="#https://2012.igem.org">iGEM</a></li>
+
-
  </li>
+
-
</ul>
+
-
 
+
-
<!--<div
+
-
 
+
-
id="photo"><img src="" alt="放图~" name="用来放图~" width="100%" height="100%"  id="photo2" 
+
-
 
+
-
/></div> -->
+
-
 
+
-
<div id="description"><table width="100%" border="0" cellspacing="0"
+
-
 
+
-
cellpadding="0" >
+
-
<tr>
+
-
<p>Description</p>
+
-
<hr />
+
-
</tr>
+
-
  <tr>
+
-
    <td><img
+
-
 
+
-
src="https://static.igem.org/mediawiki/2012/c/cd/Fig2.png" width="108" height="168" /></td>
+
-
   
+
-
 
+
-
<td><p>&nbsp;&nbsp;&nbsp;&nbsp;The aim of this study is to construct a fluorescent digital
+
-
 
+
-
display device of genetic circuits with synthetic logic gates. The finished device will
+
-
 
+
-
display and switch numbers. Similar to electronic circuits, logic regulation operation in
+
-
 
+
-
cells integrates the extracellular and intracellular signals. We assemble several pairs of
+
-
 
+
-
promoters and their activators (or repressors) into computing building block of the circuit:  
+
-
 
+
-
<I>P<font size="1px">BAD</font></I>-Arabinose,<I>P<font size="1px">cI</font></I>-CI, and
+
-
 
+
-
<I>P<font size="1px">tetR</font></I>-TetR. These computation units act as genetic logic gates
+
-
 
+
-
perform AND, OR and NOT gates function. In order to light up our digital numbers, we put
+
-
 
+
-
Green Fluorescent Protein (GFP) in the downstream expression, which is ubiquitous in the
+
-
 
+
-
field of biological signal protein. Considering that the common types of GFP usually tend to
+
-
 
+
-
be very stable and hard to "quench", we choose unstable GFP to make our device reusable and
+
-
 
+
-
convert in a fast speed. This unstable GFP is tagged with a C-terminal extension, which will
+
-
 
+
-
be recognized and degraded by tail-specific proteases, leading to a short half-life and fast
+
-
 
+
-
degradation of the protein. Degradation rate should be confined at a suitable range,
+
-
 
+
-
otherwise the device would either have no light or take a long time to change numbers.
+
-
 
+
-
</a><br />
+
-
       
+
-
        &nbsp;&nbsp;&nbsp;&nbsp;Moreover, we intend to develop a unique
+
-
 
+
-
display device in such a way that each unit lights up one after another. To meet the
+
-
 
+
-
challenge, we set out to engineer a series of cells with variable time-delayed expression
+
-
 
+
-
characters under the inspiration of Feed Forward Loops (FFLs) in transcription network. As
+
-
 
+
-
shown in Figure 1, both X and Y are transcriptional activators of coherent type 1 FFL with
+
-
 
+
-
"AND-gate" function. When signal Sx appears, X becomes active and stimulates the downstream
+
-
 
+
-
promoters, which are capable of inducing the production of Y and Z. Due to the "AND gate"
+
-
 
+
-
function, Z starts to accumulate only when Y yields at a threshold. By controlling the Y
+
-
 
+
-
production and the activation threshold for the <I>Z</I> promoter, we can alter the duration
+
-
 
+
-
of time-delay in the expression of GFP. Lux system will still play an important role based on
+
-
 
+
-
our project last year. Promoter <I>luxpR</I> with various modifications in threshold will be
+
-
 
+
-
created by site-directed mutagenesis.
+
-
        </a><br />
+
-
    </td>
+
-
</tr>
+
-
  </tr>
+
-
 
+
-
</div>
+
-
<script
+
-
 
+
-
type="text/javascript">
+
-
var MenuBar1 = new Spry.Widget.MenuBar("titlebar",
+
-
 
+
-
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
+
-
 
+
-
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
+
-
</script>
+
-
</body>
+
</html>
</html>

Latest revision as of 04:55, 6 August 2012

Retrieved from "http://2012.igem.org/Team:XMU-China/CSS/SpryMenuBarHorizontal/css"