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

Line 1: Line 1:
 
<html>
 
<html>
−
<style>
+
 
−
header {
+
<style>
 +
header {
 
width:100%;
 
width:100%;
 
height: 200px;
 
height: 200px;
Line 11: Line 12:
 
text-align: center;
 
text-align: center;
 
}
 
}
−
+
 
−
nav { /*pour cibler le style des listes du menu navigateur et pas des liens en général*/
+
.inner{
 +
  /*position:fixed;*/
 +
  position:absolute;
 +
  top:0;
 +
  left:0;
 +
  right:0;
 +
  /*background-color: rgba(33,33,33,0.5);*/
 +
  width : 100%;
 +
  height : 70px;
 +
  /*  -webkit-transition: 0.7s transform;
 +
    -moz-transition: 0.7s transform;
 +
    -o-transition: 0.7s transform;
 +
    -ms-transition: 0.7s transform;
 +
  transition: 0.7s transform; */
 +
  z-index: 100;
 +
  /*
 +
  width: 80%;
 +
  margin: 0 auto;
 +
  position:relative;
 +
  height:100%;
 +
  padding:0;*/
 +
 
 +
}
 +
 
 +
 
 +
.icon{
 +
  display:none;
 +
  color:#e6f2f2;
 +
  position:absolute;
 +
  right:20px;
 +
  top:15px;
 +
  cursor:pointer;
 +
}
 +
 
 +
 
 +
#logo{
 +
  position:absolute;
 +
  top:10px;
 +
  left:20px;
 +
  opacity:0;
 +
}
 +
 
 +
#logo img{
 +
  width:50px;
 +
}
 +
 
 +
/* STICKY HEADER */
 +
 
 +
 
 +
body.header-fixed .navbar{
 +
  margin:0;
 +
  padding-top:15px;
 +
  width:100%;
 +
  background-color: #212121;
 +
  position:fixed;
 +
  top:0;
 +
  left:0;
 +
  right:0;
 +
      -moz-transition:0.7s all;
 +
    -webkit-transition:0.7s all;
 +
    -ms-transition:0.7s all;
 +
    -o-transition:0.7s all;
 +
  transition:0.7s all;
 +
}
 +
 
 +
 
 +
 
 +
/* MENU LINKS */
 +
 
 +
nav { /*pour cibler le style des listes du menu navigateur et pas des liens en général*/
 
width:80%; /*pour agrandir le menu*/
 
width:80%; /*pour agrandir le menu*/
 
/*background-color:#424558;*/
 
/*background-color:#424558;*/
Line 100: Line 170:
 
background-color: #1F97C6;
 
background-color: #1F97C6;
 
}
 
}
−
+
 
−
</style>
+
 
−
+
 
−
+
/* RESPONSIVE */
−
    <head>
+
@media screen and (max-width: 600px){
 +
    header{
 +
      height:70px;
 +
    }
 +
    #title{
 +
      font-size : 20px;
 +
      top:10px;
 +
      left:70px;
 +
    }
 +
    #logo{
 +
      top:10px;
 +
      left:10px;
 +
    }
 +
    #logo img{
 +
      width:50px;
 +
    }
 +
    .icon{
 +
      display:block;
 +
    }
 +
    nav {
 +
      display: none;
 +
      text-align: center;
 +
    }
 +
    .inner{
 +
      width:100%;
 +
    }
 +
 
 +
}
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link href='http://fonts.googleapis.com/css?family=Ubuntu:bold' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.googleapis.com/css?family=Ubuntu:bold' rel='stylesheet' type='text/css'>
Line 113: Line 218:
 
      
 
      
 
     <header>
 
     <header>
 +
      <div class="inner">
 +
      <div id="logo"><img src="logo.jpg" alt="" ></div>
 +
 
 +
 
 
         <nav>
 
         <nav>
 
<ul>
 
<ul>
Line 171: Line 280:
 
     </header>
 
     </header>
 
      
 
      
−
   
+
 
−
   
+
 
−
   
+
 
</html>
 
</html>

Revision as of 12:23, 27 June 2017