Difference between revisions of "Template:CSS UCL99"
Superjack15 (Talk | contribs) |
|||
(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"> | ||
− | + | <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