Difference between revisions of "Template:CSS UCL99"

 
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<div id="dl-menu" class="dl-menuwrapper">
+
<script>
−
<button class="dl-trigger">Open Menu</button>
+
−
<ul class="dl-menu">
+
−
<li>
+
−
<a href="#">Item 1</a>
+
−
<ul class="dl-submenu">
+
−
<li><a href="#">Sub-Item 1</a></li>
+
−
<li><a href="#">Sub-Item 2</a></li>
+
−
<li><a href="#">Sub-Item 3</a></li>
+
−
<li>
+
−
<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 -->
+
  
−
.dl-menu.dl-animate-out-1 {
+
$(document).mouseup(function (e)
−
animation: MenuAnimOut1 0.4s linear forwards;
+
{
 +
    var container = $("mobile-list");
 +
 
 +
    if (!container.is(e.target) // if the target of the click isn't the container...
 +
        && container.has(e.target).length === 0) // ... nor a descendant of the container
 +
    {
 +
        container.hide();
 +
    }
 +
});
 +
 
 +
</script>
 +
<style>
 +
 
 +
#hidden-menu:hover ul{
 +
display:block;
 +
height:auto;
 +
width:auto;
 
}
 
}
  
−
@keyframes MenuAnimOut1 {
+
#hidden-menu:not(:hover) ul {
−
50% {
+
display:none;
−
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 {
+
#hidden-menu ul li{
−
animation: MenuAnimIn1 0.3s linear forwards;
+
display:none;
 +
clear:both;
 +
background-color: #70C4BB;
 +
text-align: center;
 +
display: block;
 +
margin:none;
 +
padding-left:20px;
 +
padding-right:20px;
 +
padding-top:8px;
 +
padding-bottom:8px;
 +
box-shadow:1.5px 1.5px lightgrey;
 +
border-radius:4px;
 +
opacity:0.9;
 +
z-index:99999;
 
}
 
}
  
−
@keyframes MenuAnimIn1 {
+
#hidden-menu ul {
−
0% {
+
display:none;
−
transform: translateZ(-500px) rotateY(0deg);
+
position:fixed;
−
opacity: 0;
+
top:60px;
−
}
+
left:0px;
−
20% {
+
−
transform: translateZ(-250px) rotateY(30deg);
+
−
opacity: 0.5;
+
−
}
+
−
100% {
+
−
transform: translateZ(0px) rotateY(0deg);
+
−
opacity: 1;
+
−
}
+
 
}
 
}
  
−
$( '#dl-menu' ).dlmenu({
+
#hidden-menu ul li a {
−
animationClasses : { classin : 'animation-class-name', classout : 'animation-class-name' }
+
color: #fff; font-size: 23px;
−
});
+
}
 +
 
 +
#hidden-menu ul li a:hover {
 +
color: #787172
 +
}
 +
 
 +
#hidden-menu a {
 +
color: #473E4F; text-decoration: none; font-family: Raleway; 
 +
}
 +
 
 +
#hidden-menu a:hover {color: #70C4BB;
 +
    -webkit-transition: color ease-in-out 150ms;
 +
}
 +
 
 +
#mobilebutton {
 +
height:50px;
 +
width:50px;
 +
top:15px;
 +
left:1px;
 +
position:fixed;
 +
opacity:0.9;
 +
}
  
 +
</style>
 +
<div id="hidden-menu">
 +
<img src="https://static.igem.org/mediawiki/2015/d/de/UCLigemMobileMenu.png" id="mobilebutton">
 +
<ul id="mobile-list">
 +
<li><a href="https://2015.igem.org/Team:UCL">Home</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Description">Project</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Parts">Parts</a></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>
 +
<li><a href="https://2015.igem.org/Team:UCL/Notebook">Notebook</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/People">People</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/PolicyandPractice"=">Policy & Practice</a></li>
 +
<li><a href="https://2015.igem.org/Team:UCL/Interlabstudy">InterLab Study</a></li>
 +
</ul>
 +
</div>
 
</html>
 
</html>

Latest revision as of 15:34, 27 July 2015