Template:Http://2014.igem.org/Team:Colombia

From 2014.igem.org

(Difference between revisions)
Line 683: Line 683:
</div>
</div>
 +
 +
 +
 +
 +
<!-- Inferior Menu-->
 +
 +
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 +
 +
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 +
 +
<style>
 +
 +
#Buttons {
 +
 +
background:none; /* This isn't needed */
 +
height:100px; /* This is important and keeps the navigation in place when hovering over elements in google chrome */
 +
 +
position: absolute;
 +
botton: 0px;
 +
left: 0px;
 +
 +
}
 +
 +
 +
 +
ul.flatflipbuttons{
 +
margin-left:0px;
 +
padding:0;
 +
list-style:none;
 +
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
 +
-moz-perspective: 10000px;
 +
perspective: 10000px;
 +
position: absolute;
 +
botton: 3px;
 +
}
 +
 +
ul.flatflipbuttons li{
 +
margin:200;
 +
display: inline-block;
 +
width: 50px; /* dimensions of buttons. */
 +
height: 50px;
 +
margin-right: 15px; /* spacing between buttons */
 +
background: white;
 +
text-transform: uppercase;
 +
text-align: center;
 +
}
 +
 +
ul.flatflipbuttons li a{
 +
display:table;
 +
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
 +
width: 100%;
 +
height: 100%;
 +
margin-bottom: 4px;
 +
color: black;
 +
background: #3B9DD5;
 +
text-decoration: none;
 +
outline: none;
 +
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */
 +
-moz-transition:all 300ms ease-out;
 +
transition:all 300ms ease-out;
 +
}
 +
 +
ul.flatflipbuttons li:nth-of-type(1) a{
 +
color: white;
 +
background: #3B9DD5;
 +
}
 +
 +
ul.flatflipbuttons li:nth-of-type(2) a{
 +
background: #A1CD3A;
 +
}
 +
 +
ul.flatflipbuttons li:nth-of-type(3) a{
 +
background: #80C5EC;
 +
}
 +
 +
ul.flatflipbuttons li:nth-of-type(4) a{
 +
color: white;
 +
background: #635746;
 +
}
 +
 +
ul.flatflipbuttons li:nth-of-type(5) a{
 +
background: #F2C96D;
 +
}
 +
 +
ul.flatflipbuttons li a span{
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: table-cell;
 +
vertical-align: middle;
 +
align: middle;
 +
width: 100%;
 +
height: 100%;
 +
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
 +
-moz-transition: all 300ms ease-out;
 +
transition: all 300ms ease-out;
 +
}
 +
 +
ul.flatflipbuttons li b{ /* CSS for text beneath button */
 +
display: block;
 +
position: relative;
 +
width: 100%;
 +
opacity: 0;
 +
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
 +
-moz-transition: all 300ms ease-out 0.2s;
 +
transition: all 300ms ease-out 0.2s;
 +
}
 +
 +
 +
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
 +
border-width: 0;
 +
vertical-align: middle;
 +
}
 +
 +
 +
ul.flatflipbuttons li:hover a{
 +
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
 +
-moz-transform: rotateY(180deg);
 +
transform: rotateY(180deg);
 +
background: #c1e4ec; /* bgcolor of button onMouseover*/
 +
-webkit-transition-delay: 0.2s;
 +
-moz-transition-delay: 0.2s;
 +
transition-delay: 0.2s;
 +
}
 +
 +
ul.flatflipbuttons li:hover a span{
 +
color: black; /* color of icon font onMouseover */
 +
-webkit-transform: rotateY(180deg);
 +
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
 +
transform: rotateY(180deg);
 +
-webkit-transition-delay: 0.2s;
 +
-moz-transition-delay: 0.2s;
 +
transition-delay: 0.2s;
 +
}
 +
 +
 +
ul.flatflipbuttons li:hover b{
 +
opacity: 1;
 +
}
 +
 +
/* CSS for 2nd menu below specifically */
 +
 +
ul.second li a{
 +
background: #eee !important;
 +
}
 +
 +
ul.second li a:hover{
 +
background: #ddd !important;
 +
}
 +
 +
</style>
 +
 +
 +
 +
 
 +
</ul>
 +
 +
<!-- end menu !-->
 +
 +
</div><!-- nav holder !-->
 +
</div><!-- wrap5 !-->
 +
</div><!-- wrap4 !-->
 +
</div><!-- wrap3 !-->
 +
</div><!-- wrap2 !-->
 +
</div><!-- wrap1 !-->
 +
</div><!-- menu-wrap !-->
 +
 +
 +
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 +
 +
 +
<body>
 +
 +
 +
<div id="Buttons">
 +
 +
<ul class="flatflipbuttons">
 +
 +
<li><a href="https://2014.igem.org/Team:Colombia" title="Home"><span class="icon-home"></span></a> <b>Home</b></li>
 +
<li><a href="http://www.uniandes.edu.co"><span class="icon-book"></span></a> <b>University</b></li>
 +
<li><a href="http://www.facebook.com/colombia.igem"><span class="icon-facebook"></span></a> <b>Facebook</b></li>
 +
<li><a href="http://twitter.com/Colombia_igem1"><span class="icon-twitter"></span></a> <b>Twitter</b></li>
 +
 +
</ul>
 +
 +
</div>
 +
 +
 +
 +

Revision as of 19:02, 22 August 2014

' Wheeltz - CSS3 Navigational Wheel Menu

Retrieved from "http://2014.igem.org/Template:Http://2014.igem.org/Team:Colombia"