Template:Team:OU-Norman OK

From 2013.igem.org

(Difference between revisions)
Line 2: Line 2:
<head>
<head>
<!--put stuff here-->
<!--put stuff here-->
-
<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" />
+
<style>
-
<script type="text/javascript" src="csshorizontalmenu.js">
+
ul{
 +
margin:0;
 +
padding:0;
 +
}
-
/***********************************************
+
li{
 +
display:inline;
 +
list-type:none;
 +
}
-
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
+
a.glidebutton{
-
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
+
display: inline-block;
-
* This notice must stay intact for usage
+
position: relative;
-
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
+
color: #4A4A4A; /* default color */
 +
background: #ececec; /* default bg color */
 +
text-decoration: none;
 +
font: bold 14px Arial; /* font settings */
 +
letter-spacing: 2px; /* font settings */
 +
overflow: hidden;
 +
height: 30px; /* height of each button */
 +
text-align: center;
 +
border-radius: 5px; /* border radius */
 +
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
-ms-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
 
 +
a.glidebutton > span:first-child{ /* first span inside button */
 +
position: relative;
 +
display: block;
 +
height: 100%;
 +
padding: 6px; /* padding of button */
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
-ms-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
 
 +
a.glidebutton > span:first-child:after{ /* CSS generated content */
 +
content: attr(data-text); /* Duplicate text of span markup */
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
padding: inherit;
 +
position: absolute;
 +
top:100%;
 +
left:0;
 +
}
 +
 
 +
a.glidebutton:hover{
 +
color: black; /* color of button on hover */
 +
background: #72cb47; /* bg color of button on hover */
 +
box-shadow: 0 0 4px green inset;
 +
}
 +
 
 +
a.glidebutton:hover > span:first-child{
 +
-moz-transform: translateY(-100%);
 +
-webkit-transform: translateY(-100%);
 +
-ms-transform: translateY(-100%);
 +
-o-transform: translateY(-100%);
 +
transform: translateY(-100%);
 +
}
 +
</style>
-
***********************************************/
 
-
</script>
 
</head>
</head>
<body>
<body>
<!-- put more stuff here too -->
<!-- put more stuff here too -->
<ul id="verticalmenu" class="glossymenu">
<ul id="verticalmenu" class="glossymenu">
-
<li><a href="https://2013.igem.org/Team:OU-Norman_OK">Home</a></li>
+
<li><a href="https://2013.igem.org/Team:OU-Norman_OK"><span data-text="Home">Home</a></li>
-
<li><a href="https://2013.igem.org/Team:OU-Norman_OK/Team" >Team</a>
+
<li><a href="https://2013.igem.org/Team:OU-Norman_OK/Team" ><span data-text="Team">Team</a>
<ul>
<ul>
     <li><a href="https://2013.igem.org/Team:OU-Norman_OK/Team/Undergraduates">Undergraduates</a></li>
     <li><a href="https://2013.igem.org/Team:OU-Norman_OK/Team/Undergraduates">Undergraduates</a></li>
Line 27: Line 87:
     <li><a href="https://2013.igem.org/Team:OU-Norman_OK/Team/Advisors">Advisors</a></li>
     <li><a href="https://2013.igem.org/Team:OU-Norman_OK/Team/Advisors">Advisors</a></li>
     </ul></li>
     </ul></li>
-
<li><a href="https://2013.igem.org/Team:OU-Norman_OK/Project">Project</a>
+
<li><a href="https://2013.igem.org/Team:OU-Norman_OK/Project"><span data-text="Project">Project</a>
<ul>
<ul>
     <li><a href="https://2013.igem.org/Team:OU-Norman_OK/Project/Overview">Overview</a></li>
     <li><a href="https://2013.igem.org/Team:OU-Norman_OK/Project/Overview">Overview</a></li>
Line 35: Line 95:
</li>
</li>
-
<li><a href="https://2013.igem.org/Team:OU-Norman_OK/Safety" >Safety</a></li>
+
<li><a href="https://2013.igem.org/Team:OU-Norman_OK/Safety" ><span data-text="Safety">Safety</a></li>
-
<li><a href="https://2013.igem.org/Team:OU-Norman_OK/Commmunity" >Community Outreach</a>
+
<li><a href="https://2013.igem.org/Team:OU-Norman_OK/Commmunity" ><span data-text="Community Outreach">Community Outreach</a>
<ul>
<ul>
     <li><a href="https://2013.igem.org/Team:OU-Norman_OK/Community/Teaching">Teaching</a></li>
     <li><a href="https://2013.igem.org/Team:OU-Norman_OK/Community/Teaching">Teaching</a></li>
Line 43: Line 103:
</ul>
</ul>
</li>
</li>
-
<li><a href="https://2013.igem.org/Team:OU-Norman_OK/Attributions">Attributions</a></li>
+
<li><a href="https://2013.igem.org/Team:OU-Norman_OK/Attributions"><span data-text="Attributions">Attributions</a></li>
</body>
</body>
</html>
</html>

Revision as of 18:34, 7 June 2013