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>
+
         <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">
-
 
-
<script type="text/javascript">
 
-
  sfHover = function() {
 
-
    var sfEls = document.getElementById("menu").getElementsByTagName("LI");
 
-
    for (var i=0; i<sfEls.length; i++) {
 
-
      sfEls[i].onmouseover=function() {
 
-
        this.className+=" sfhover";
 
-
      }
 
-
      sfEls[i].onmouseout=function() {
 
-
        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
 
-
      }
 
-
    }
 
-
  }
 
-
  if (window.attachEvent) window.attachEvent("onload", sfHover);
 
-
</script>
 
</html>
</html>

Revision as of 16:38, 23 August 2014