Difference between revisions of "Template:CSS UCL99"

Line 1: Line 1:
 
<html>
 
<html>
−
 
+
<div id="hidden-menu">
−
<script type="text/javascript" src="https://github.com/codrops/ResponsiveMultiLevelMenu.git"></script>
+
<button><img src="https://static.igem.org/mediawiki/2015/d/de/UCLigemMobileMenu.png" id="mobilebutton"></button>
−
 
+
<ul>
−
<div id="dl-menu" class="dl-menuwrapper">
+
<li><a href="https://2015.igem.org/Team:UCL">Home</a></li>
−
<button class="dl-trigger">Open Menu</button>
+
<li><a href="https://2015.igem.org/Team:UCL/Description">Project</a></li>
−
<ul class="dl-menu">
+
<li><a href="https://2015.igem.org/Team:UCL/Parts">Parts</a></li>
−
<li>
+
<li><a href="https://2015.igem.org/Team:UCL/Experiments">Experiments & Protocols</a></li><li><a href="https://2015.igem.org/Team:UCL/Collaborations">Collaborations</a></li>
−
<a href="#">Item 1</a>
+
<li><a href="https://2015.igem.org/Team:UCL/Notebook">Notebook</a></li>
−
<ul class="dl-submenu">
+
<li><a href="https://2015.igem.org/Team:UCL/People">People</a></li>
−
<li><a href="#">Sub-Item 1</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/PolicyandPractice"=">Policy & Practice</a></li>
−
<li><a href="#">Sub-Item 2</a></li>
+
<li><a href="https://2015.igem.org/Team:UCL/Interlabstudy">InterLab Study</a></li>
−
<li><a href="#">Sub-Item 3</a></li>
+
</ul>
−
<li>
+
</div>
−
<a href="#">Sub-Item 4</a>
+
−
<ul class="dl-submenu">
+
−
<li><a href="#">Sub-Sub-Item 1</a></li>
+
−
<li><a href="#">Sub-Sub-Item 2</a></li>
+
−
<li><a href="#">Sub-Sub-Item 3</a></li>
+
−
</ul>
+
−
</li>
+
−
<li><!-- ... --></li>
+
−
<!-- ... -->
+
−
</ul>
+
−
</li>
+
−
<li><!-- ... --></li>
+
−
<li><!-- ... --></li>
+
−
<!-- ... -->
+
−
</ul>
+
−
</div><!-- /dl-menuwrapper -->
+
−
 
+
−
<style>
+
−
.dl-menu.dl-animate-out-1 {
+
−
animation: MenuAnimOut1 0.4s linear forwards;
+
−
}
+
−
 
+
−
@keyframes MenuAnimOut1 {
+
−
50% {
+
−
transform: translateZ(-250px) rotateY(30deg);
+
−
}
+
−
75% {
+
−
transform: translateZ(-372.5px) rotateY(15deg);
+
−
opacity: .5;
+
−
}
+
−
100% {
+
−
transform: translateZ(-500px) rotateY(0deg);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
.dl-menu.dl-animate-in-1 {
+
−
animation: MenuAnimIn1 0.3s linear forwards;
+
−
}
+
−
 
+
−
@keyframes MenuAnimIn1 {
+
−
0% {
+
−
transform: translateZ(-500px) rotateY(0deg);
+
−
opacity: 0;
+
−
}
+
−
20% {
+
−
transform: translateZ(-250px) rotateY(30deg);
+
−
opacity: 0.5;
+
−
}
+
−
100% {
+
−
transform: translateZ(0px) rotateY(0deg);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
</style>
+
−
<script>
+
−
$( '#dl-menu' ).dlmenu({
+
−
animationClasses : { classin : 'animation-class-name', classout : 'animation-class-name' }
+
−
});
+
−
</script>
+
−
 
+
 
</html>
 
</html>

Revision as of 18:25, 26 July 2015