Template:Paris2010 menu

From 2010.igem.org

(Difference between revisions)
(testing new menu)
Line 1: Line 1:
-
<div id="menu2">
+
<html>
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
<style>
-
<head>
+
-
    <title>Menu accordéon avec jQuery</title>
+
-
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
-
<style type="text/css">
+
-
#navigation {
+
/*----------------------------------------------------------------------------*/
-
     width: 110px;
+
/* menu left                                                                  */
 +
/*----------------------------------------------------------------------------*/
 +
 
 +
#menu {
 +
     width: 158px;
     margin: 20px 13px 0 7px;
     margin: 20px 13px 0 7px;
 +
    position: relative;
     float: left;
     float: left;
-
    padding:0px;
+
 
-
    list-style: none;
+
-
    border-width: 0px;
+
}
}
-
+
 
-
#navigation a, #navigation span {
+
#menu ul {
-
     display:block;
+
     padding: 0;
-
     width: 110px;
+
     margin: 0 0 10px 0;
     list-style: none;
     list-style: none;
-
    background:url(http://lsdlive.org/tmp-igem/Menu_Paris.png)
 
-
}
 
-
 
-
#navigation .toggleSubMenu2{
 
-
    list-style: none;
 
-
    text-align:center;
 
-
    margin:0px;
 
-
    font-weight:bold;
 
-
    background: url(http://lsdlive.org/tmp-igem/Menu_Paris.png) repeat;
 
-
    color:#b0310e;
 
}
}
-
+
#menu li {
-
#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
+
     margin:0;
-
    list-style: none;
+
-
    text-align:center;
+
-
    margin:0px;
+
-
    background: url(http://lsdlive.org/tmp-igem/Menu_Paris.png) repeat;
+
-
    color:#b0310e;
+
-
    font-weight:bold;
+
-
}
+
-
+
-
#navigation .open a, #navigation .open span {
+
-
    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(http://lsdlive.org/tmp-igem/Menu_Paris.png) repeat;
+
-
     margin: 0px;
+
-
    border-width: 0px;
+
-
    list-style: none;
+
-
}
+
-
+
-
#navigation ul.subMenu a {
+
-
    color:#e4e4e4;
+
-
    text-align:center;
+
-
    font-weight:normal;
+
}
}
-
 
+
#menu a {
-
#navigation ul.subMenu a:active,  #navigation ul.subMenu a:focus, #navigation ul.subMenu a:hover, #navigation ul.subMenu .selflink{
+
    display: block;
-
     color:white;
+
    width: 150px;
-
     text-align:center;
+
    height: 19px;
-
     text-decoration:underline;  
+
     margin-top: 1px;
-
     font-weight:normal;
+
     background: url(https://static.igem.org/mediawiki/2008/9/95/Tudelft_menu_button.png) no-repeat left top;
 +
    padding: 2px 4px;
 +
     text-decoration: none;
 +
     color: #555;
}
}
-
.menu_header {
+
#menu a:hover {
     display: block;
     display: block;
-
     width: 110px;
+
     width: 150px;
-
     background: url(http://lsdlive.org/tmp-igem/Menu_header.png) no-repeat;
+
    height: 19px;
-
     color: #FFF;
+
    margin-top: 1px;
 +
     background: url(https://static.igem.org/mediawiki/2008/4/40/Tudelft_menu_button_hover.png) no-repeat left top;
 +
    padding: 2px 4px;
 +
     color: #fff;
}
}
-
.menu_footer {
+
#menu .selflink {
-
     width:110px;
+
    display: block;
-
     height:10px;
+
     width: 150px;
-
     background: url(http://lsdlive.org/tmp-igem/Footer_Menu.png) no-repeat;
+
     height: 19px;
-
     color: #FFF;
+
    margin-top: 1px;
 +
     background: url(https://static.igem.org/mediawiki/2008/a/a6/Tudelft_menu_button_active.png) no-repeat left top;
 +
    padding: 2px 4px;
 +
     color: #fff;
}
}
-
.open_at_load {
+
#menu a.external {
-
    background: url(http://lsdlive.org/tmp-igem/Menu_Paris.png) repeat;
+
     margin: 0;
-
    color:#e4e4e4;
+
     padding: 0;
-
    list-style: none;
+
     width: 156px;
-
    text-align:center;
+
-
     margin:0px;
+
-
     padding:0px;
+
-
}
+
-
+
-
#navigation ul.open_at_load a {
+
-
     background: url(http://lsdlive.org/tmp-igem/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 {
+
.menu_header {
-
     background: nurl(http://lsdlive.org/tmp-igem/Menu_Paris.png) repeat;
+
    width: 148px;
-
     color:white;
+
    border: 1px solid #bbb;
-
     list-style: none;
+
     background: url(https://static.igem.org/mediawiki/2008/c/c8/Tudelft_menu_header_bg_1.gif) repeat-x bottom;
-
    text-align:center;;
+
     color: #111;
-
    border-width: 0px;
+
     padding: 2px 4px;
-
    text-decoration:underline;
+
-
    font-weight:normal;
+
}
}
-
 
-
 
</style>
</style>
-
<!--[if lte IE 6]>
+
</html>
-
<style type="text/css">
+
-
li {
+
-
    height: 1px;
+
-
}
+
-
</style>
+
-
<![endif]-->
+
 +
<div id="menu">
 +
<ul>
 +
<li>[[Team:Paris_Liliane_Bettencourt | Home]]</li>
 +
<li>[[Team:Paris_Liliane_Bettencourt/Projectl | Project]]</li>
 +
<li>[[Team:Paris_Liliane_Bettencourt/Modeling | Modeling]]</li>
 +
<li>[[Team:Paris_Liliane_Bettencourt# | Results]]</li>
 +
<li>[[Team:Paris_Liliane_Bettencourt/Safety | Safety]]</li>
 +
</ul>
-
   
+
</div>
-
<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" style="background-color: #c8dee5;"><tr><td> // note : ugly at the moment -->
 
-
 
-
<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>
 
-
</div>
 
<!-- start content area -->
<!-- start content area -->
<div id="paris_content_wrapper">
<div id="paris_content_wrapper">
<div id=paris_content_boxtop></div>
<div id=paris_content_boxtop></div>
<div id="paris_content">
<div id="paris_content">

Revision as of 20:42, 2 July 2010

Retrieved from "http://2010.igem.org/Template:Paris2010_menu"