Template:Team:OU-Norman OK
From 2013.igem.org
(Difference between revisions)
Zachherron (Talk | contribs) |
Zachherron (Talk | contribs) |
||
Line 2: | Line 2: | ||
<head> | <head> | ||
<!--put stuff here--> | <!--put stuff here--> | ||
- | < | + | <style> |
- | + | ul{ | |
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
- | + | li{ | |
+ | display:inline; | ||
+ | list-type:none; | ||
+ | } | ||
- | * CSS | + | a.glidebutton{ |
- | * | + | display: inline-block; |
- | + | position: relative; | |
- | * | + | 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> | ||
- | |||
- | |||
</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