|
|
(21 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <div id="menu2"> | + | <!-- 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(http://lsdlive.org/tmp-igem/Menu_header.png) no-repeat;
| |
- | color: #FFF;
| |
- | }
| |
- |
| |
- | .menu_footer {
| |
- | width:110px;
| |
- | height:10px;
| |
- | background: url(http://lsdlive.org/tmp-igem/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" style="background-color: #c8dee5;"><tr><td>
| |
- | <ul id="navigation">
| |
- | <li class="menu_header">
| |
- | <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"> </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">
| |