Template:Paris2010 menu

From 2010.igem.org

(Difference between revisions)
 
(23 intermediate revisions not shown)
Line 1: Line 1:
-
<div id="menu2" script="background-color: #c8dee5;">
+
<!-- MENU -->
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
-
<head>
+
-
    <title>Menu accordéon avec jQuery</title>
+
-
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
-
<style type="text/css">
+
-
#navigation {
+
<html>
-
    width: 110px;
+
-
    margin: 20px 13px 0 7px;
+
-
    float: left;
+
-
    padding:0px;
+
-
    list-style: none;
+
-
    border-width: 0px;
+
-
}
+
-
+
-
#navigation a, #navigation span {
+
-
    display:block;
+
-
    width: 110px;
+
-
    list-style: none;
+
-
    background:url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png)
+
-
}
+
-
+
-
#navigation .toggleSubMenu2{
+
-
    list-style: none;
+
-
    text-align:center;
+
-
    margin:0px;
+
-
    font-weight:bold;
+
-
    background: url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
+
-
    color:#b0310e;
+
-
}
+
-
+
<div id="menu">
-
#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
+
<ul>
-
    list-style: none;
+
  <li><a href="#">home</a></li>
-
    text-align:center;
+
  <li><a href="#">projects</a></li>
-
    margin:0px;
+
  <li><a href="#">team</a></li>
-
    background: url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
+
  <li><a href="#">notebook</a></li>
-
    color:#b0310e;
+
  <li><a href="#">about</a></li>
-
    font-weight:bold;
+
  <li><a href="#">acknowledgement</a></li>
-
}
+
  <li><a href="#">collaboration</a></li>
-
+
</ul>
-
#navigation .open a, #navigation .open span {
+
</div>
-
    list-style: none;
+
-
    margin:0px;   
+
-
}
+
-
+
-
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
+
-
    text-decoration:underline;
+
-
    color:#e53100;
+
-
}
+
-
+
-
#navigation .subMenu {
+
-
    background: url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
+
-
    margin: 0px;
+
-
    border-width: 0px;
+
-
    list-style: none;
+
-
}
+
-
+
-
#navigation ul.subMenu a {
+
-
    color:#e4e4e4;
+
-
    text-align:center;
+
-
    font-weight:normal;
+
-
}
+
 +
<div id="content">
 +
<div id="left">
-
#navigation ul.subMenu a:active,  #navigation ul.subMenu a:focus, #navigation ul.subMenu a:hover, #navigation ul.subMenu .selflink{
 
-
    color:white;
 
-
    text-align:center;
 
-
    text-decoration:underline;
 
-
    font-weight:normal;
 
-
}
 
-
 
-
.menu_header {
 
-
    display: block;
 
-
    width: 110px;
 
-
    background: url(https://static.igem.org/mediawiki/2009/e/eb/Menu_header.png) no-repeat;
 
-
    color: #FFF;
 
-
}
 
-
 
-
.menu_footer {
 
-
    width:110px;
 
-
    height:10px;
 
-
    background: url(https://static.igem.org/mediawiki/2009/d/d5/Footer_Menu.png) no-repeat;
 
-
    color: #FFF;
 
-
}
 
-
 
-
.open_at_load {
 
-
    background: url(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
 
-
    color:#e4e4e4;
 
-
    list-style: none;
 
-
    text-align:center;
 
-
    margin:0px;
 
-
    padding:0px;
 
-
}
 
-
 
-
#navigation ul.open_at_load a {
 
-
    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;
 
-
}
 
-
 
-
#navigation ul.open_at_load li a:focus, #navigation ul.open_at_load li a:hover,  #navigation ul.open_at_load li a:active {
 
-
    background: nurl(https://static.igem.org/mediawiki/2009/7/7c/Menu_Paris.png) repeat;
 
-
    color:white;
 
-
    list-style: none;
 
-
    text-align:center;;
 
-
    border-width: 0px;
 
-
    text-decoration:underline;
 
-
    font-weight:normal;
 
-
}
 
-
 
-
 
-
 
-
</style>
 
-
<!--[if lte IE 6]>
 
-
<style type="text/css">
 
-
li {
 
-
    height: 1px;
 
-
}
 
-
</style>
 
-
<![endif]-->
 
-
 
-
 
-
 
-
   
 
-
<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>
 
-
</head>
 
-
<body>
 
-
<table cellspacing="0"><tr><td>
 
-
    <ul id="navigation">
 
-
        <li class="menu_header">&nbsp;
 
-
    <hr>
 
-
    <hr>
 
-
        <li class="toggleSubMenu2"> Home
 
-
            <ul class="open_at_load">
 
-
                <li><a href="#">Synopsis</a></li>
 
-
    <hr>
 
-
                <li><a href="https://2010.igem.org/Team:Paris_Liliane_Bettencourt/Project">Project overview</a></li>
 
-
    <hr>
 
-
                <li><a href="https://2010.igem.org/Team:Paris_Liliane_Bettencourt/Modeling">Modeling overview</a></li>
 
-
    <hr>
 
-
                <li><a href="#">Conclusion & Results</a></li>
 
-
    <hr>
 
-
    <hr>
 
-
                <li><a href="#">Brainstorm</a></li>
 
-
    <hr>
 
-
                <li><a href="https://2010.igem.org/Team:Paris_Liliane_Bettencourt/Safety">Safety</a></li>
 
-
            </ul>
 
-
        </li>
 
-
    <hr>
 
-
        <li class="menu_footer">&nbsp;</li>
 
-
  </ul> 
 
-
</td></tr>
 
-
</table>
 
-
</body>
 
</html>
</html>
-
</div>
 
-
<!-- start content area -->
 
-
<div id="paris_content_wrapper">
 
-
<div id=paris_content_boxtop></div>
 
-
<div id="paris_content">
 

Latest revision as of 14:28, 6 September 2010