Template:Paris2009 menu6

From 2009.igem.org

(Difference between revisions)
 
(20 intermediate revisions not shown)
Line 1: Line 1:
<div id="menu2">
<div id="menu2">
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<head>
-
<style type="text/css">
+
    <title>Menu accordéon avec jQuery</title>
-
<!--
+
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
ul#menu {
+
<style type="text/css">
 +
 
 +
#navigation {
     width: 110px;
     width: 110px;
     margin: 20px 13px 0 7px;
     margin: 20px 13px 0 7px;
-
    position: relative;
 
     float: left;
     float: left;
-
     padding:0;
+
     padding:0px;
     list-style: none;
     list-style: none;
 +
    border-width: 0px;
}
}
-
 
+
-
ul#menu ol {
+
#navigation a, #navigation span {
-
     text-align: right;
+
     display:block;
-
     display: none;
+
     width: 110px;
-
     list-style-type: none;
+
     list-style: none;
-
     margin: 0px 0;
+
     background:url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png)
-
    padding: 0;
+
}
}
-
 
+
-
ul#menu li,
+
#navigation .toggleSubMenu2{
     list-style: none;
     list-style: none;
-
    padding: 0;
+
     text-align:center;
-
    margin:0;
+
     margin:0px;
-
    position: relative;
+
-
}
+
-
 
+
-
ul#menu li {
+
-
    border-bottom: solid 1px #b9a894;
+
-
    line-height: 15px;
+
-
}
+
-
 
+
-
ul#menu ol li {
+
-
    color:white;
+
-
    border-bottom: none;
+
-
    background: url(https://static.igem.org/mediawiki/2009/9/9a/Menu_sub_Paris.png) no-repeat;
+
-
}
+
-
 
+
-
ul#menu ol li:before {
+
-
    content: "";
+
-
}
+
-
 
+
-
ul#menu a {
+
-
    display: block;
+
-
    width: 110px;
+
-
    height: 19px;
+
-
    color: #e4e4e4;
+
-
    padding:0;
+
-
    outline: none;
+
-
}
+
-
 
+
-
ul#menu a:hover {
+
-
    display: block;
+
-
    width: 110px;
+
-
    height: 19px;
+
-
    color:white;
+
-
     text-decoration: underline;
+
-
}
+
-
 
+
-
ul#menu a.active {
+
-
     display: block;
+
-
    width: 110px;
+
-
    height: 19px;
+
-
    color:white;
+
-
    text-decoration: none;
+
     font-weight:bold;
     font-weight:bold;
     background: url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
     background: url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
 +
    color:#b0310e;
}
}
-
-->
 
-
</style>
 
-
<script type="text/javascript">
+
-
<!--
+
#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
-
/* This script and many more are available free online at
+
    list-style: none;
-
The JavaScript Source :: http://javascript.internet.com
+
    text-align:center;
-
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com */
+
    margin:0px;
-
 
+
    background: url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
-
/* Coded by Travis Beckham
+
    color:#b0310e;
-
  http://www.squidfingers.com | http://www.podlob.com
+
    font-weight:bold;
-
  version date: 06/02/03
+
-
  If want to use this code, feel free to do so, but please leave this message intact. */
+
-
 
+
-
// Node Functions
+
-
 
+
-
if(!window.Node){
+
-
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
+
}
}
-
 
+
-
function checkNode(node, filter){
+
#navigation .open a, #navigation .open span {
-
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
+
    list-style: none;
 +
    margin:0px;  
}
}
-
 
+
-
function getChildren(node, filter){
+
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
-
  var result = new Array();
+
    text-decoration:underline;  
-
  var children = node.childNodes;
+
     color:#e53100;
-
  for(var i = 0; i < children.length; i++){
+
-
     if(checkNode(children[i], filter)) result[result.length] = children[i];
+
-
  }
+
-
  return result;
+
}
}
-
 
+
-
function getChildrenByElement(node){
+
#navigation .subMenu {
-
  return getChildren(node, "ELEMENT_NODE");
+
    background: url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
 +
    margin: 0px;
 +
    border-width: 0px;
 +
    list-style: none;
}
}
-
 
+
-
function getFirstChild(node, filter){
+
#navigation ul.subMenu a {
-
  var child;
+
     color:#e4e4e4;
-
  var children = node.childNodes;
+
     text-align:center;
-
  for(var i = 0; i < children.length; i++){
+
    font-weight:normal;
-
     child = children[i];
+
-
     if(checkNode(child, filter)) return child;
+
-
  }
+
-
  return null;
+
}
}
-
function getFirstChildByText(node){
 
-
  return getFirstChild(node, "TEXT_NODE");
 
-
}
 
-
function getNextSibling(node, filter){
+
#navigation ul.subMenu a:active, #navigation ul.subMenu a:focus, #navigation ul.subMenu a:hover, #navigation ul.subMenu .selflink{
-
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
+
     color:white;
-
     if(checkNode(sibling, filter)) return sibling;
+
    text-align:center;
-
  }
+
    text-decoration:underline;  
-
  return null;
+
    font-weight:normal;
-
}
+
-
function getNextSiblingByElement(node){
+
-
        return getNextSibling(node, "ELEMENT_NODE");
+
}
}
-
// Menu Functions & Properties
+
.menu_header {
-
 
+
     display: block;
-
var activeMenu = null;
+
     width: 110px;
-
 
+
     background: url(https://static.igem.org/mediawiki/2009/e/eb/Menu_header.png) no-repeat;
-
function showMenu() {
+
     color: #FFF;
-
  if(activeMenu){
+
-
     activeMenu.className = "";
+
-
    getNextSiblingByElement(activeMenu).style.display = "none";
+
-
  }
+
-
  if(this == activeMenu){
+
-
     activeMenu = null;
+
-
  } else {
+
-
     this.className = "active";
+
-
    getNextSiblingByElement(this).style.display = "block";
+
-
     activeMenu = this;
+
-
  }
+
-
  return false;
+
}
}
-
function initMenu(){
+
.menu_footer {
-
  var menus, menu, text, a, i;
+
     width:110px;
-
  menus = getChildrenByElement(document.getElementById("menu"));
+
     height:10px;
-
  for(i = 0; i < menus.length; i++){
+
     background: url(https://static.igem.org/mediawiki/2009/d/d5/Footer_Menu.png) no-repeat;
-
     menu = menus[i];
+
     color: #FFF;
-
     text = getFirstChildByText(menu);
+
-
     a = document.createElement("a");
+
-
    menu.replaceChild(a, text);
+
-
    a.appendChild(text);
+
-
     a.href = "#";
+
-
    a.onclick = showMenu;
+
-
    a.onfocus = function(){this.blur()};
+
-
  }
+
}
}
-
if(document.createElement) window.onload = initMenu;
+
.open_at_load {
-
//-->
+
    background: url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
-
</script>
+
    color:#e4e4e4;
-
 
+
    list-style: none;
-
<script type="text/javascript">
+
    text-align:center;
-
 
+
    margin:0px;
-
/* This script and many more are available free online at
+
    padding:0px;
-
The JavaScript Source :: http://javascript.internet.com
+
-
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com */
+
-
 
+
-
/* Coded by Travis Beckham
+
-
  http://www.squidfingers.com | http://www.podlob.com
+
-
  version date: 06/02/03
+
-
  If want to use this code, feel free to do so, but please leave this message intact. */
+
-
 
+
-
// Node Functions
+
-
 
+
-
if(!window.Node){
+
-
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
+
}
}
-
 
+
-
function checkNode(node, filter){
+
#navigation ul.open_at_load a {
-
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
+
    background: url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
 +
    color:#e4e4e4;
 +
    list-style: none;
 +
    text-align:center;
 +
    border-width: 0px;
 +
    font-weight:normal;
}
}
-
function getChildren(node, filter){
+
#navigation ul.open_at_load li a:focus, #navigation ul.open_at_load li a:hover,  #navigation ul.open_at_load li a:active {
-
  var result = new Array();
+
    background: nurl(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
-
  var children = node.childNodes;
+
    color:white;
-
  for(var i = 0; i < children.length; i++){
+
    list-style: none;
-
     if(checkNode(children[i], filter)) result[result.length] = children[i];
+
    text-align:center;;
-
  }
+
     border-width: 0px;
-
  return result;
+
    text-decoration:underline;
 +
    font-weight:normal;
}
}
-
function getChildrenByElement(node){
 
-
  return getChildren(node, "ELEMENT_NODE");
 
-
}
 
-
function getFirstChild(node, filter){
+
</style>
-
  var child;
+
<!--[if lte IE 6]>
-
  var children = node.childNodes;
+
<style type="text/css">
-
  for(var i = 0; i < children.length; i++){
+
li {
-
     child = children[i];
+
     height: 1px;
-
    if(checkNode(child, filter)) return child;
+
-
  }
+
-
  return null;
+
}
}
 +
</style>
 +
<![endif]-->
-
function getFirstChildByText(node){
 
-
  return getFirstChild(node, "TEXT_NODE");
 
-
}
 
-
function getNextSibling(node, filter){
 
-
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
 
-
    if(checkNode(sibling, filter)) return sibling;
 
-
  }
 
-
  return null;
 
-
}
 
-
function getNextSiblingByElement(node){
 
-
        return getNextSibling(node, "ELEMENT_NODE");
 
-
}
 
-
 
-
// Menu Functions & Properties
 
-
 
-
var activeMenu = null;
 
-
 
-
function showMenu() {
 
-
  if(activeMenu){
 
-
    activeMenu.className = "";
 
-
    getNextSiblingByElement(activeMenu).style.display = "none";
 
-
  }
 
-
  if(this == activeMenu){
 
-
    activeMenu = null;
 
-
  } else {
 
-
    this.className = "active";
 
-
    getNextSiblingByElement(this).style.display = "block";
 
-
    activeMenu = this;
 
-
  }
 
-
  return false;
 
-
}
 
-
 
-
function initMenu(){
 
-
  var menus, menu, text, a, i;
 
-
  menus = getChildrenByElement(document.getElementById("menu"));
 
-
  for(i = 0; i < menus.length; i++){
 
-
    menu = menus[i];
 
-
    text = getFirstChildByText(menu);
 
-
    a = document.createElement("a");
 
-
    menu.replaceChild(a, text);
 
-
    a.appendChild(text);
 
-
    a.href = "#";
 
-
    a.onclick = showMenu;
 
-
    a.onfocus = showMenu;
 
-
  }
 
-
}
 
-
 
-
if(document.createElement) window.onload = initMenu;
 
 +
   
 +
<script type="text/javascript" src="http://www.alsacreations.com/xmedia/tuto/exemples/accordeon/jquery-1.2.1.js"></script>
 +
    <script type="text/javascript">
 +
    <!--
 +
    $(document).ready( function () {
 +
        // Hide subMenu
 +
        // Exept the "open_at_load" :
 +
        $("ul.subMenu:not('.open_at_load')").hide();
 +
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
 +
   
 +
        // replace by span:
 +
        $("li.toggleSubMenu span").each( function () {
 +
            // On stocke le contenu du span :
 +
            var TexteSpan = $(this).text();
 +
            $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
 +
        } ) ;
 +
   
 +
        // modify "click" on link listed in class "toggleSubMenu" :
 +
        $("li.toggleSubMenu > a").click( function () {
 +
            // if subMenu is already open, we close it :
 +
            if ($(this).next("ul.subMenu:visible").length != 0) {
 +
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
 +
            }
 +
            // if subMenu is hided, we close them :
 +
            else {
 +
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
 +
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
 +
            }
 +
            return false;
 +
        });
 +
   
 +
    } ) ;
 +
// -->
</script>
</script>
-
/*a.onfocus = function(){this.blur()};*/
 
</head>
</head>
-
<body><table><tr><td>
+
<body>
-
<div>
+
<table cellspacing="0"><tr><td>
-
<ul id="menu">
+
    <ul id="navigation">
-
  <li class="menu_header">&nbsp;
+
        <li class="menu_header">&nbsp;
-
<hr>
+
    <hr>
-
  <li class="title">. Home .
+
    <hr>
-
    <ol class="none">
+
        <li class="toggleSubMenu"> <span> Home </span>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris#top">&nbsp;Synopsis</a></li>
+
            <ul class="subMenu">
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Brainstorm#top">&nbsp;Brainstorm</a></li>
+
                <li><a href="https://2009.igem.org/Team:Paris#top">Synopsis</a></li>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Project#top">&nbsp;OMV Project</a></li>
+
    <hr>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Modeling#top">&nbsp;Modeling methodes</a></li>
+
                <li><a href="https://2009.igem.org/Team:Paris/Project#top">Project overview</a></li>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Conclusion#top">&nbsp;Conclusion</a></li>
+
    <hr>
-
    </ol>
+
                <li><a href="https://2009.igem.org/Team:Paris/DryLab#top">Modeling overview</a></li>
-
  </li>
+
    <hr>
-
  <li class="title">. Addressing .
+
                <li><a href="https://2009.igem.org/Team:Paris/Conclusion#top">Conclusion & Results</a></li>
-
    <ol class="none">
+
    <hr>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Addressing_overview#top">&nbsp;Export & ClyA</a></li>
+
    <hr>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Addressing_design#top">&nbsp;Parts</a></li>
+
                <li><a href="https://2009.igem.org/Team:Paris/Brainstorm#top">Brainstorm</a></li>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Addressing_testing#top">&nbsp;WetLab</a></li>
+
    <hr>
-
    </ol>
+
                <li><a href="https://2009.igem.org/Team:Paris/safety#top">Safety</a></li>
-
  </li>
+
            </ul>
-
  <li class="title">. Production .
+
        </li>
-
    <ol class="none">
+
    <hr>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Production_overview#top">&nbsp;Tol/Pal system</a></li>
+
        <li class="menu_footer">&nbsp;</li>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Production_modeling#top">&nbsp;Delay model</a></li>
+
        <li class="menu_header">&nbsp;
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Production_modeling2#top">&nbsp;Vesicle model</a></li>
+
    <hr>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Production_design#top">&nbsp;Parts</a></li>
+
    <hr>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Production_testing#top">&nbsp;WetLab</a></li>
+
        <li class="toggleSubMenu"> <span> Addressing the message </span>
-
    </ol>
+
            <ul class="subMenu">
-
  </li>
+
                      <li><a href="https://2009.igem.org/Team:Paris/Addressing_overview#top">To the periplasm</a></li>
-
  <li class="title">. Reception .
+
    <hr>
-
    <ol class="none">
+
                <li><a href="https://2009.igem.org/Team:Paris/Addressing_overview2#top">In the outer membrane</a></li>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Transduction_overview#top">&nbsp;Membranes fusion</a></li>
+
    <hr>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Transduction_overview2#top">&nbsp;Transduction</a></li>
+
                <li><a href="https://2009.igem.org/Team:Paris/Addressing_testing#top">WetLab</a></li>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Transduction_modeling#top">&nbsp;Fec simulation</a></li>
+
            </ul>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Transduction_design#top">&nbsp;Parts</a></li>
+
        </li>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Transduction_testing#top">&nbsp;WetLab</a></li>
+
    <hr>
-
     </ol>
+
        <li class="toggleSubMenu"><span> Producing the messenger </span>
-
  </li>
+
            <ul class="subMenu">
-
  <li class="title">. Ethics .
+
                <li><a href="https://2009.igem.org/Team:Paris/Production_overview#top">Vesicle production system</a></li>
-
     <ol class="none">
+
    <hr>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Ethics_ethicallabbook#top">&nbsp;Ethical Lab book</a></li>
+
                <li><a href="https://2009.igem.org/Team:Paris/Production_modeling#top">Vesicle production model</a></li>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Ethics_Materials#top">&nbsp;Materials</a></li>
+
    <hr>
-
    </ol>
+
                <li><a href="https://2009.igem.org/Team:Paris/Production_modeling2#top">Vesicle biophysics model</a></li>
-
  </li>
+
    <hr>
-
  <li class="title">. Tool .
+
                <li><a href="https://2009.igem.org/Team:Paris/Production_testing#top">WetLab</a></li>
-
    <ol class="block">
+
            </ul>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Tool_introduction#top">&nbsp;Introduction</a></li>
+
        </li>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Tool_DataBase#top ">&nbsp;Databases</a></li>
+
    <hr>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Tool_OSXSoft#top">&nbsp;Mac Software</a></li>
+
        <li class="toggleSubMenu"><span> Receiving the message </span>
-
      <li class="sub"><a href="https://2009.igem.org/Team:Paris/Tool_iPhone#top">&nbsp;iPhone</a></li>
+
            <ul class="subMenu">
-
    </ol>
+
                <li><a href="https://2009.igem.org/Team:Paris/Transduction_overview#top">Membrane fusion</a></li>
-
<hr>
+
    <hr>
-
  <li class="menu_footer">&nbsp;</li>
+
                <li><a href="https://2009.igem.org/Team:Paris/Transduction_overview2#top">Signal Transduction</a></li>
-
</ul></td></tr>
+
    <hr>
 +
                <li><a href="https://2009.igem.org/Team:Paris/Transduction_modeling#top">Fec operon simulation</a></li>
 +
    <hr>
 +
                <li><a href="https://2009.igem.org/Team:Paris/Transduction_testing#top">WetLab</a></li>
 +
            </ul>
 +
        </li>
 +
    <hr>
 +
        <li class="menu_footer">&nbsp;</li>
 +
        <li class="menu_header">&nbsp;
 +
    <hr>
 +
    <hr>
 +
        <li class="toggleSubMenu"><span> Ethics </span>
 +
            <ul class="subMenu">
 +
                <li><a href="https://2009.igem.org/Team:Paris/Ethics_overview#top">Overview</a></li>
 +
     <hr>
 +
                <li><a href="https://2009.igem.org/Team:Paris/Ethics_ethicallabbook#top">Lab book</a></li>
 +
     <hr>
 +
                <li><a href="https://2009.igem.org/Team:Paris/Ethics_ethicalreport#top">Report</a></li>
 +
    <hr>
 +
                <li><a href="https://2009.igem.org/Team:Paris/Ethics_Materials#top">Materials</a></li>
 +
            </ul>
 +
        </li>
 +
    <hr>
 +
        <li class="menu_footer">&nbsp;</li>
 +
        <li class="menu_header">&nbsp;
 +
    <hr>
 +
    <hr>
 +
        <li class="toggleSubMenu2"> Tool, iPhone
 +
            <ul class="open_at_load">
 +
                <li><a href="https://2009.igem.org/Team:Paris/Tool_introduction#top">Introduction</a></li>
 +
    <hr>
 +
                <li><a href="https://2009.igem.org/Team:Paris/Tool_DataBase#top ">Databases</a></li>
 +
    <hr>
 +
                <li><a href="https://2009.igem.org/Team:Paris/Tool_OSXSoft#top">Mac Software</a></li>
 +
    <hr>
 +
                <li><a href="https://2009.igem.org/Team:Paris/Tool_iPhone#top">iPhone</a></li>
 +
            </ul>
 +
        </li>
 +
    <hr>
 +
        <li class="menu_footer">&nbsp;</li>
 +
  </ul>
 +
</td></tr>
</table>
</table>
</body>
</body>
-
 
</html>
</html>
-
 
</div>
</div>
<!-- start content area -->
<!-- start content area -->

Latest revision as of 01:01, 22 October 2009

Retrieved from "http://2009.igem.org/Template:Paris2009_menu6"