Team:Evry/Template:Menu
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
+ | |||
+ | <style> | ||
+ | body { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | border:0; /* This removes the border around the viewport in old versions of IE */ | ||
+ | width:100%; | ||
+ | background:#fff; | ||
+ | min-width:600px; /* Minimum width of layout - remove line if not required */ | ||
+ | /* The min-width property does not work in old versions of Internet Explorer */ | ||
+ | font-size:90%; | ||
+ | } | ||
+ | a { | ||
+ | color:#369; | ||
+ | } | ||
+ | a:hover { | ||
+ | color:#fff; | ||
+ | background:#369; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | h1, h2, h3 { | ||
+ | margin:.8em 0 .2em 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | p { | ||
+ | margin:.4em 0 .8em 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | img { | ||
+ | margin:10px 0 5px; | ||
+ | } | ||
+ | #ads img { | ||
+ | display:block; | ||
+ | padding-top:10px; | ||
+ | } | ||
+ | |||
+ | /* Header styles */ | ||
+ | #header { | ||
+ | clear:both; | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | } | ||
+ | #header { | ||
+ | border-bottom:1px solid #000; | ||
+ | } | ||
+ | #header p, | ||
+ | #header h1, | ||
+ | #header h2 { | ||
+ | padding:.4em 15px 0 15px; | ||
+ | margin:0; | ||
+ | } | ||
+ | #header ul { | ||
+ | clear:left; | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | list-style:none; | ||
+ | margin:10px 0 0 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | #header ul li { | ||
+ | display:inline; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | #header ul li a { | ||
+ | display:block; | ||
+ | float:left; | ||
+ | margin:0 0 0 1px; | ||
+ | padding:3px 10px; | ||
+ | text-align:center; | ||
+ | background:#eee; | ||
+ | color:#000; | ||
+ | text-decoration:none; | ||
+ | position:relative; | ||
+ | left:15px; | ||
+ | line-height:1.3em; | ||
+ | } | ||
+ | #header ul li a:hover { | ||
+ | background:#369; | ||
+ | color:#fff; | ||
+ | } | ||
+ | #header ul li a.active, | ||
+ | #header ul li a.active:hover { | ||
+ | color:#fff; | ||
+ | background:#000; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | #header ul li a span { | ||
+ | display:block; | ||
+ | } | ||
+ | /* 'widths' sub menu */ | ||
+ | #layoutdims { | ||
+ | clear:both; | ||
+ | background:#eee; | ||
+ | border-top:4px solid #000; | ||
+ | margin:0; | ||
+ | padding:6px 15px !important; | ||
+ | text-align:right; | ||
+ | } | ||
+ | /* column container */ | ||
+ | .colmask { | ||
+ | position:relative; /* This fixes the IE7 overflow hidden bug */ | ||
+ | clear:both; | ||
+ | float:left; | ||
+ | width:100%; /* width of whole page */ | ||
+ | overflow:hidden; /* This chops off any overhanging divs */ | ||
+ | } | ||
+ | /* common column settings */ | ||
+ | .colright, | ||
+ | .colmid, | ||
+ | .colleft { | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | position:relative; | ||
+ | } | ||
+ | .col1, | ||
+ | .col2, | ||
+ | .col3 { | ||
+ | float:left; | ||
+ | position:relative; | ||
+ | padding:0 0 1em 0; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | /* 2 Column (left menu) settings */ | ||
+ | .leftmenu { | ||
+ | background:#fff; /* right column background colour */ | ||
+ | } | ||
+ | .leftmenu .colleft { | ||
+ | right:75%; /* right column width */ | ||
+ | background:#f4f4f4; /* left column background colour */ | ||
+ | } | ||
+ | .leftmenu .col1 { | ||
+ | width:71%; /* right column content width */ | ||
+ | left:102%; /* 100% plus left column left padding */ | ||
+ | } | ||
+ | .leftmenu .col2 { | ||
+ | width:21%; /* left column content width (column width minus left and right padding) */ | ||
+ | left:6%; /* (right column left and right padding) plus (left column left padding) */ | ||
+ | } | ||
+ | /* Footer styles */ | ||
+ | #footer { | ||
+ | clear:both; | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | border-top:1px solid #000; | ||
+ | } | ||
+ | #footer p { | ||
+ | padding:10px; | ||
+ | margin:0; | ||
+ | } | ||
+ | </style> | ||
+ | <script src="workbook/html/js/config.js"></script> | ||
+ | |||
+ | <script src="workbook/html/js/skel.min.js"></script> | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | ||
+ | <script> | ||
+ | |||
+ | var main = function() { | ||
+ | $('.icon-menu').click(function() { | ||
+ | $('.menu').animate({ | ||
+ | left: "+10px" | ||
+ | }, 200); | ||
+ | |||
+ | $('body').animate({ | ||
+ | left: "0px" | ||
+ | }, 200); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $('.icon-close').click(function() { | ||
+ | $('.menu').animate({ | ||
+ | left: "-10px" | ||
+ | }, 200); | ||
+ | |||
+ | $('body').animate({ | ||
+ | left: "0px" | ||
+ | }, 200); | ||
+ | }); | ||
+ | }; | ||
+ | $(document).ready(main) | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <style> | ||
+ | |||
+ | /* Initial body */ | ||
+ | body { | ||
+ | left: 0; | ||
+ | margin: 0; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | /* Initial menu */ | ||
+ | .menu { | ||
+ | background: #04084E; | ||
+ | left: 10px; /* start off behind the scenes */ | ||
+ | height: 25%; | ||
+ | position: fixed; | ||
+ | width: 285px; | ||
+ | } | ||
+ | |||
+ | /* Menu accordéon */ | ||
+ | #menu-accordeon { | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | list-style:none; | ||
+ | text-align: center; | ||
+ | width: 180px; | ||
+ | } | ||
+ | #menu-accordeon ul { | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | list-style:none; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #menu-accordeon li { | ||
+ | background-color:#729EBF; | ||
+ | background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%); | ||
+ | background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%); | ||
+ | border-radius: 6px; | ||
+ | margin-bottom:2px; | ||
+ | box-shadow: 3px 3px 3px #999; | ||
+ | border:solid 1px #333A40 | ||
+ | } | ||
+ | #menu-accordeon li li { | ||
+ | max-height:0; | ||
+ | overflow: hidden; | ||
+ | transition: all .5s; | ||
+ | border-radius:0; | ||
+ | background: #444; | ||
+ | box-shadow: none; | ||
+ | border:none; | ||
+ | margin:0 | ||
+ | } | ||
+ | #menu-accordeon a { | ||
+ | display:block; | ||
+ | text-decoration: none; | ||
+ | color: #fff; | ||
+ | padding: 8px 0; | ||
+ | font-family: verdana; | ||
+ | font-size:1.2em | ||
+ | } | ||
+ | #menu-accordeon ul li a, #menu-accordeon li:hover li a { | ||
+ | font-size:1em | ||
+ | } | ||
+ | #menu-accordeon li:hover { | ||
+ | background: #729EBF | ||
+ | } | ||
+ | #menu-accordeon li li:hover { | ||
+ | background: #999; | ||
+ | } | ||
+ | #menu-accordeon ul li:last-child { | ||
+ | border-radius: 0 0 6px 6px; | ||
+ | border:none; | ||
+ | } | ||
+ | #menu-accordeon li:hover li { | ||
+ | max-height: 15em; | ||
+ | } | ||
+ | |||
+ | </head> | ||
<div id="preloader"> | <div id="preloader"> | ||
Line 11: | Line 275: | ||
<li><a class="current" href="https://2014.igem.org/Team:Evry">Home</a> | <li><a class="current" href="https://2014.igem.org/Team:Evry">Home</a> | ||
</li> | </li> | ||
- | <li><a href="https://2014.igem.org/Team:Evry/Project">Project</a> | + | <li><a id="menu-accordeon" href="https://2014.igem.org/Team:Evry/Project">Project</a> |
- | + | <ul> | |
<li><a href="https://2014.igem.org/Team:Evry/Project/Overview">Overview</a></li> | <li><a href="https://2014.igem.org/Team:Evry/Project/Overview">Overview</a></li> | ||
<li><a class="dropdown-menu" href="https://2014.igem.org/Team:Evry/Project/Pseudovibrio">Pseudovibrio</a></li> | <li><a class="dropdown-menu" href="https://2014.igem.org/Team:Evry/Project/Pseudovibrio">Pseudovibrio</a></li> | ||
Line 19: | Line 283: | ||
<li><a class="dropdown-menu" href="https://2014.igem.org/Team:Evry/Project/Achievements">Achievements</a></li> | <li><a class="dropdown-menu" href="https://2014.igem.org/Team:Evry/Project/Achievements">Achievements</a></li> | ||
<li><a class="dropdown-menu" href="https://2014.igem.org/Team:Evry/Project/References">References</a></li> | <li><a class="dropdown-menu" href="https://2014.igem.org/Team:Evry/Project/References">References</a></li> | ||
- | </ul | + | </ul> |
</li> | </li> | ||
<li><a href="https://2014.igem.org/Team:Evry/EvryTeam">Team</a> | <li><a href="https://2014.igem.org/Team:Evry/EvryTeam">Team</a> | ||
Line 75: | Line 339: | ||
<div class="st-content"> | <div class="st-content"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</html> | </html> |
Revision as of 16:38, 23 August 2014