Difference between revisions of "Template:Grenoble-Alpes/menu"

 
(435 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
 +
<!-- **************************************** HEAD *************************************** -->
 +
 +
        <head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
</head>
 +
 +
<!-- **************************************** CSS **************************************** -->
 +
 
<style>
 
<style>
−
header {
+
/*fixe la barre du haut*/
−
font-family: 'Molengo', Georgia, Times, serif;
+
.navi {              
−
margin: 0px;
+
        width:100%;
−
padding: 0px;
+
                        background-color:#ecf0f1;
−
z-index: 100; /*pour que le menu soit toujours au dessus*/
+
opacity: 0.9;
 +
position:fixed;
 +
                        z-index: 100;
 +
                        margin: auto;
 +
}
  
−
  width:100%;
+
/*style des onglets*/
−
  height:700px;
+
                .navi ul {         
−
  background-image:url('https://static.igem.org/mediawiki/2017/7/7f/IGEM_Grenoble_2017_photo.jpeg');
+
                        text-transform: uppercase;
−
  background-size: 100%;
+
                        font-family: 'Lato';
−
background-position: 0 -150px;
+
                        font-size: 100%;  
−
  position:relative;
+
                        margin: 0px;  
  
 +
                }
  
−
+
                .navi li {
−
}
+
                        list-style: none; 
−
+
                }
−
nav { /*pour cibler le style des listes du menu navigateur et pas des liens en général*/
+
 
−
width:70%; /*pour agrandir le menu*/
+
/*rétablir la hauteur du menu, à cause d'un conflit enfant/parent */
−
/*background-color:#424558;*/
+
              .navi > ul::after {  
−
margin:auto;
+
−
}
+
−
+
−
nav > ul {
+
−
margin: 0px;
+
−
padding: 0px;
+
−
}
+
−
+
−
nav > ul::after {
+
 
content: "";
 
content: "";
−
display:block;
+
display:block; /*table*/
−
clear:both;
+
clear:both;
−
/*rétablir la hauteur du menu, à cause d'un conflit enfant/parent, trucs qui sont revenus à 0px*/
+
 
}
 
}
−
+
 
−
nav > ul > li {
+
/*position des onglets*/
−
float:left; /*Bien positionner le menu*/
+
                .navi > ul > li {            
−
position: relative;
+
                        float: left;  
−
list-style-type:none;
+
                        -webkit-animation: anim 1s linear;
−
}
+
                        position: relative;
−
+
                }
−
nav > ul > li > a
+
 
−
{
+
/*style des liens*/
−
padding: 20px 30px;
+
                .navi > ul > li > a {     
−
color:#18457D;
+
                        padding: 5px 40px; /*espacement entre les onglets du menu*/
 +
                        color : #3498db;  
 +
                        text-decoration: none;
 +
                        display: inline-block;
 +
                }
 +
 
 +
.menu:hover {
 +
            border-top: 3px solid #3498db; /*bordure au dessus*/
 +
}
 +
 
 +
/*ne pas afficher les sous-menus */           
 +
              .submenu {           
 +
                      display: none;
 +
              }
 +
 
 +
              .navi li:hover .submenu {
 +
                        display: inline-block;
 +
                        top:100%;
 +
                        left: 0px;
 +
                        padding:0px;
 +
                        position: absolute;
 +
                        z-index: 1000;
 +
              }
 +
 
 +
                .navi a {
 +
                        display: inline-block;
 
                         text-decoration: none;
 
                         text-decoration: none;
−
list-style-type:none;
+
                }
 +
 
 +
                .navi > ul > li:hover a
 +
                { /*pour pallier au problème de la bordure qui descend quand on passe la souris*/
 +
                        text-decoration: none;
 +
                        color : #3498db;
 +
                        padding: 2px 40px 5px 40px;
 +
                        background-color: #ecf0f1;
 +
 
 +
 
 
}
 
}
−
nav > ul > li:hover a{ /*pour pallier au problème de la bordure qui descend quand on passe la souris*/
+
 
−
padding: 5px 30px 20px 30px;
+
−
text-decoration: none;
+
−
}
+
−
+
−
nav > li {
+
−
list-style-type:none;
+
−
}
+
−
+
−
.submenu{
+
−
display:none; /*submenu caché par défaut*/
+
−
}
+
−
+
−
nav a {
+
−
display: inline-block;
+
−
text-decoration: none;
+
−
}
+
−
+
−
nav li:hover .submenu{
+
−
/*change le style du submenu quand on passe la souris sur un élément li*/
+
−
display: inline-block;
+
−
position: absolute; /*positionne exactement sous la position relative*/
+
−
top: 100%;
+
−
left: 0px; /*pour que ça s'affiche bien en dessous*/
+
−
padding: 0px;
+
−
z-index: 1000;
+
−
+
−
}
+
−
+
 
.submenu li { /*pour décrire le style du sous-menu */
 
.submenu li { /*pour décrire le style du sous-menu */
−
border-bottom: 1px solid #1F97C6;
+
border-bottom: 1px solid #3498db;
−
display: block;
+
 
}
 
}
 
 
 
.submenu li a { /*pour changer le style des liens*/
 
.submenu li a { /*pour changer le style des liens*/
−
padding: 20px 30px;
+
padding: 15px 30px;
−
font-size: 13px; /*taille écriture un peu plus petite que celle par défaut*/
+
color: #3498db;
−
color: #18457D ;
+
 
width: 200px;
 
width: 200px;
−
                        text-decoration: none;
 
 
display: block;
 
display: block;
 
}
 
}
−
+
−
.menu:hover{ /*fond un peu transparent etc*/
+
             
−
border-top: 5px solid #1F97C6; /*bordure supérieure assez large*/
+
              .submenu {
−
/*background-color: #1F97C6;*/
+
                    background-color: #3498db;
−
+
              }
−
}
+
             
−
+
              .submenu li:hover {
−
.menu .submenu {
+
                    background-color: #3498db;
−
background-color: #FFF; /*fond de couleur sur les sous-menus*/
+
                    opacity: 0.5;
−
opacity: 0.5;
+
                }
−
}
+
 
−
+
                @-webkit-keyframes anim {
−
.submenu li:hover a { /*quand on passe la souris sur submenu=li on change a*/
+
                    0%  {opacity:0;}
−
color: #FFF;  
+
                    100% {opacity:0.8;}
−
}
+
                }
−
+
 
−
.menu .submenu li:hover {  
+
/* ************ Responsive **************** */
−
background-color: #1F97C6;
+
 
−
}
+
              .navi input[type=checkbox]{  /*cacher la case à cocher*/
−
+
                    display: none;
−
/* class for a full width column */
+
              }
−
.column .full_size {
+
              .navi label{
−
width:100%;  
+
                    display: none;  
−
}
+
              }
 +
              .navi input[type=checkbox]:checked ~ ul{
 +
                    display: block;
 +
              }
  
−
/* styling for images in a full width column*/
+
              @media screen and (max-width: 1250px) {  /*pour tous les écrans inférieurs à 1250px*/
−
.column.full_size img {  
+
                    #menumobile{
−
width:97%;  
+
                          color: #3498db;
−
padding: 10px 15px;
+
                          display:none;
−
}
+
                          background-color: #ecf0f1;
 +
  opacity: 0.8;
 +
                          text-align: center;
 +
                          padding: 5px 0px;
 +
                          }
 +
                    .menumobile{
 +
                          display: block;
 +
                          color: #3498db;
 +
                          background-color: #ecf0f1;
 +
  opacity: 0.8;
 +
                          text-align: center;
 +
                          padding: 5px 0px;
 +
                          font-family: 'Lato'
 +
                          font-weight: bold;
 +
                          color:  #0F056B;
 +
                          }
 +
                    .navi ul {
 +
                          display: none; 
 +
                    }
 +
                    .navi ul li, .navi ul li a {
 +
                          width: 100%;
 +
                          text-align: center;
 +
                    }
 +
              .navi li:hover .submenu {
 +
                        position: relative;
 +
                        width : -webkit-fill-available;
 +
              }
  
 +
                    .navi ul li a, .navi ul li:hover a{
 +
                          padding: 5px 0px;
 +
                    }
 +
                    .navi input[type=checkbox]{  /*cacher la case à cocher*/
 +
                    display: block;
 +
              }
 +
              .navi label{
 +
                    display: block;
 +
              }
 +
            } 
  
−
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
+
/* Clear the default wiki settings */
−
   
+
−
    /* Clear the default wiki settings */
+
 
      
 
      
 
     #home_logo, #sideMenu { display:none; }
 
     #home_logo, #sideMenu { display:none; }
Line 133: Line 177:
 
     #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
     #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
 +
</style>
  
−
</style>
+
 
−
+
<!-- ***************************************** NAV **************************************** -->
−
+
 
−
    <head>
+
<div class="navi">
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
                        <label for="menumobile" class="menumobile">MENU</label>
−
<link href='http://fonts.googleapis.com/css?family=Ubuntu:bold' rel='stylesheet' type='text/css'>
+
                        <input type="checkbox" id="menumobile" role="button">
−
<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
+
−
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
+
−
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
+
−
</head>
+
−
   
+
−
    <header>
+
−
        <nav>
+
 
<ul>
 
<ul>
−
<li class="menu"><a href="https://2017.igem.org/Team:Grenoble-Alpes"> Home </a></li>
+
<li class="menu"><a href="https://2017.igem.org/Team:Grenoble-Alpes">Home</a></li>
−
<li class="menu"><a href="https://2017.igem.org/Team:Grenoble-Alpes/Team"> Team </a>
+
                                <li class="menu"><a href="https://2017.igem.org/Team:Grenoble-Alpes/Team">Team</a>
−
<ul class="submenu">
+
                                      <ul class="submenu">
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Team">Team</a></li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Team">Members</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Collaborations">Collaborations</a></li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Attributions">Attributions</a></li>
−
</ul>
+
                                      </ul></li>
−
</li>
+
 
<li class="menu"> <a href="https://2017.igem.org/Team:Grenoble-Alpes/Description"> Project </a>
 
<li class="menu"> <a href="https://2017.igem.org/Team:Grenoble-Alpes/Description"> Project </a>
−
<ul class="submenu">
+
                                      <ul class="submenu">
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Description">Description</a></li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Description">Description</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Design">Design</a></li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Demonstrate">Results</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Experiments">Experiments</a></li>
+
                                      </ul></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Notebook">Notebook</a></li>
+
<li class="menu"> <a href="https://2017.igem.org/Team:Grenoble-Alpes/LabBook">Lab</a>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/InterLab">InterLab</a></li>
+
                                      <ul class="submenu">
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Contribution">Contributions</a></li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/LabBook">LabBook</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Model">Model</a></li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Protocols">Protocols</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Results">Results</a></li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Composite_Part">Composite part</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Demonstrate">Demonstrate</a></li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Parts">Parts</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Improve">Improve</a></li>
+
                                      </ul></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Attributions">Attributions</a></li>
+
<li class="menu"><a href="https://2017.igem.org/Team:Grenoble-Alpes/Measurement">Engineering</a>
−
</ul>
+
                                      <ul class="submenu">
−
</li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Measurement">Detection</a></li>
−
<li class="menu"> <a href="https://2017.igem.org/Team:Grenoble-Alpes/Parts"> Parts </a>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Fluid_Transfer">Fluid Transfer</a></li>
−
<ul class="submenu">
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Temperature_Control">Temperature control</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Parts">Parts</a></li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Hardware">Hardware</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Basic_Part">Basic Part</a></li>
+
                                      </ul></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Composite_Part">Composite Parts</a></li>
+
<li class="menu"><a href="https://2017.igem.org/Team:Grenoble-Alpes/Software">App</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Part_Collection">Part Collection</a></li>
+
<li class="menu"> <a href="https://2017.igem.org/Team:Grenoble-Alpes/Safety">Safety</a></li>
−
</ul>
+
<li class="menu"><a href="https://2017.igem.org/Team:Grenoble-Alpes/HP/Silver">Human Practices</a>
−
</li>
+
                                      <ul class="submenu">
−
<li class="menu"><a href="https://2017.igem.org/Team:Grenoble-Alpes/Safety">Safety</a></li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/HP/Silver">Human Practices</a></li>
−
<li class="menu"><a href="https://2017.igem.org/Team:Grenoble-Alpes/HP/Silver"> Human practices </a>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/HP/Gold_Integrated">Integrated Human Practices</a></li>
−
<ul class="submenu">
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Collaborations">Collaborations</a></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/HP/Silver">Silver HP</a></li>
+
                                      </ul></li>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/HP/Gold">Integrated and Gold</a></li>
+
                                <li class="menu"><a href="https://2017.igem.org/Team:Grenoble-Alpes/Notebook">Notebook</a>
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Engagement">Public Engagement</a></li>
+
                                    <ul class="submenu">
−
</ul>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Notebook">Notebook</a></li>
−
</li>
+
                                          <li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Medals">Medal Criteria</a></li>
−
<li class="menu"> <a href="https://2017.igem.org/Team:Grenoble-Alpes/Applied_Design"> Awards </a>
+
                                      </ul></li>
−
<ul class="submenu">
+
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Applied_Design">Applied design</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Entrepreneurship">Entrepreneurship</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Hardware">Hardware</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Measurement">Measurement</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Model">Model</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Plant">Plant</a></li>
+
−
<li><a href="https://2017.igem.org/Team:Grenoble-Alpes/Software">Software</a></li>
+
−
</ul>
+
−
</li>
+
−
<li class="menu"><a href="https://igem.org/2017_Judging_Form?team=Grenoble-Alpes">Judging form</a></li>
+
 
</ul>
 
</ul>
−
+
          </div>
−
+
−
</nav>
+
−
    </header>
+
−
   
+
−
   
+
−
   
+
−
   
+
−
</html>
+

Latest revision as of 20:56, 28 October 2017