Difference between revisions of "Template:CSS UCL99"

 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
<script>
 +
 +
$(document).mouseup(function (e)
 +
{
 +
    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;
 +
}
 +
 +
#hidden-menu:not(:hover) ul {
 +
display:none;
 +
}
 +
 +
#hidden-menu ul li{
 +
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;
 +
}
 +
 +
#hidden-menu ul {
 +
display:none;
 +
position:fixed;
 +
top:60px;
 +
left:0px;
 +
}
 +
 +
#hidden-menu ul li a {
 +
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">
 
<div id="hidden-menu">
<button><img src="https://static.igem.org/mediawiki/2015/d/de/UCLigemMobileMenu.png" id="mobilebutton"></button>
+
<img src="https://static.igem.org/mediawiki/2015/d/de/UCLigemMobileMenu.png" id="mobilebutton">
<ul>
+
<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">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/Description">Project</a></li>

Latest revision as of 15:34, 27 July 2015