Template:INSA-Lyon/menuA

From 2011.igem.org

(Difference between revisions)
(Created page with "<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Page d'exemple pour tester le CSS</title> <meta http-equiv="Content-Type" content="text/...")
 
(239 intermediate revisions not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
+
<html>
-
  <head>
+
 
-
      <title>Page d'exemple pour tester le CSS</title>
+
<style type="text/css">
-
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+
 
-
      <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
+
#menu {
-
  </head>
+
    width: 170px ; /*220*/
-
  <body>
+
    background:white;
-
      <h1>Découverte du CSS</h1>
+
    }
 +
 
 +
#menu ul {
 +
    padding: 0;
 +
    width: 150px;
 +
    border:0px solid;
 +
    margin:0px;
 +
    }
 +
 
 +
#menu ul li {
 +
    background: #008000 ;
 +
    color:#008000  ;
 +
    position:relative;
 +
    list-style: none; /*on enleve les icones de liste*/  
 +
    width: 150; /*200*/
 +
    border-bottom: 10px solid;
 +
    border-top : 10px solid ;
 +
    border-left : 10px solid;
 +
    border-color : #008000;
 +
    }
 +
 
 +
 
 +
 
 +
#menu ul ul {
 +
    position: relative;
 +
    top: 0;
 +
    left: 0px; /* correspond au décalage a droite*/  
 +
    display : none
 +
    }
 +
 
 +
#menu ul ul li {
 +
    background: #32CD32;
 +
    position:relative;
 +
    list-style: none; /*on enleve les icones de liste */
 +
    border-top: 1px solid;
 +
    border-bottom:1px solid;
 +
    text-align: center ;  
 +
    }
 +
 
 +
#menu li a {
 +
    text-decoration: none ;
 +
    color : white;
 +
    font-family : Times;
 +
    font-weight :bold;
 +
    font-size : large;
 +
    }
 +
 
 +
#menu li.sousmenu {
 +
    background: #008000 ;
 +
    }
 +
 
 +
 
 +
#menu li:hover {
 +
    background:#90EE90;
 +
    }
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
<script type="text/javascript">
 +
 
 +
window.onload = montre('submenu0');
 +
var opened = false;
   
   
-
      <p>
+
function montre(id) {
-
          Bonjour !<br />
+
  document.getElementById('submenu0').style.display='none';
-
          Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour les tutoriels du <a href="http://www.siteduzero.com">Site du Zér0</a>
+
  var d = document.getElementById(id);
-
      </p>
+
  if (d) {
-
+
      if(opened == d) {
-
      <h2>Ce n'est que du blabla</h2>
+
        opened = false;
-
+
        d.style.display='none';
-
      <p>
+
      } else {
-
          Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q>C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
+
        opened = d;
-
          J'aime la choucroute en conserve.<br />
+
        d.style.display='block';
-
          Vive les frites !
+
      }
-
      </p>
+
  }
-
      <p>
+
}
-
           Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
+
</script>
-
      </p>
+
 
-
  </body>
+
 
 +
<div id="menu">
 +
  <ul class="niveau1">
 +
 
 +
    <li><a href="/Team:Lyon-INSA-ENS" title="go to home">Home</a></li>  
 +
<ul id="submenu0" style='display:none;'>
 +
  </ul>
 +
 
 +
    <li> <a class="sousmenu" onclick="javascript:montre('submenu1');">  About us</a>
 +
        <ul id="submenu1" style='display:none;'>
 +
          <li><a href="/Team:Lyon-INSA-ENS/Team/Students" title="go to team">Team</a></li>
 +
          <li><a href="/Team:Lyon-INSA-ENS/Team/Insa" title="go to INSA">INSA</a></li>  
 +
          <!-- <li><a href="/Team:Lyon-INSA-ENS/Team/ENS" title="go to students">ENS</a></li>  
 +
          <li><a href="/Team:Lyon-INSA-ENS/Team/Lyon" title="go to discover Lyon">Discover Lyon</a></li>
 +
          <li><a href="/Team:Lyon-INSA-ENS/Team/Gallery" title="go to students">Gallery</a></li> -->
 +
        </ul>
 +
    </li>
 +
    <li> <a class="sousmenu" onclick="javascript:montre('submenu2');"> Project</a>  
 +
        <ul id="submenu2" style='display:none;'>
 +
          <li><a href="/Team:Lyon-INSA-ENS/Project/Introduction" title="go to Introduction">Introduction</a></li>  
 +
      <!--    <li><a href="/Team:Lyon-INSA-ENS/Project/Issue" title="go to Issue">Issue</a></li>
 +
          <li><a href="/Team:Lyon-INSA-ENS/Project/Human practices" title="go to Human practices">Human practice</a>      </li>
 +
          <li><a href="/Team:Lyon-INSA-ENS/Project/Reglementary" title="go to Reglementary Aspects">Reglementary Aspects</a></li> -->
 +
        </ul>
 +
    </li>
 +
            
 +
    <!--  <li> <a class="sousmenu" onclick="javascript:montre('submenu3');"> Realization</a>
 +
        <ul id="submenu3" style='display:none;'>
 +
          <li><a href="/Team:Lyon-INSA-ENS/Realisation/Experiment" title="go to experiment plan">Experiments schedule</a></li>
 +
          <li><a href="/Team:Lyon-INSA-ENS/Realisation/Parts" title="go to Parts">Parts</a></li>
 +
          <li><a href="/Team:Lyon-INSA-ENS/Realisation/Notebook" title="go to Notebook">Notebook</a></li>
 +
        </ul>
 +
    </li>-->
 +
 
 +
 
 +
    <li><a class="sousmenu" onclick="javascript:montre('submenu4');">Communication</a>
 +
        <ul id="submenu4" style='display:none;'>
 +
          <li><a href="/Team:Lyon-INSA-ENS/Communication/Conferences" title="go to conferences">Conferences</a></li>  
 +
          <li><a href="/Team:Lyon-INSA-ENS/Communication/Events" title="go to events">Events</a></li>
 +
        </ul>
 +
    </li>
 +
 
 +
    <li><a href="/Team:Lyon-INSA-ENS/Sponsors" title="go to sponsors">Sponsors</a></li>
 +
    <li><a href="/Team:Lyon-INSA-ENS/Contact">Contact us</a></li>
 +
</ul>
 +
</div>
 +
 
</html>
</html>

Latest revision as of 09:37, 4 July 2011