Barre de nav
Pb marges sous safari
OK sous chrome et FF
NSP pour IE
HTML
<script src="https://code.jquery.com/jquery-1.11.1.min.js""></script>
<body>
<header>
<div id="wrapper-logo-et-menu" style="display: block;">
<div id="wrapper-logo">
<img src="img/logo-altix.png" alt="Logo Altix"/>
</div> <!-- ---------------- FIN DIV Wrapper logo ---------------- -->
<div class="wrapper-menu-responsive">
<div class="picto-menu-responsive">
<a href="" onclick="javascript:visibilite('menu-responsive'); return false;">
<img src="img/boutons/btn-dwn-menu.png" alt="Boutton menu responsive"/>
</a>
</div>
<div id="menu-responsive" style="display:none;">
<nav>
<div class="picto-home-responsive-icon">
<a href="#image-header-principal" class="scrollTo"><img src="img/picto-home.png" alt="picto home pour le menu"/></a>
</div>
<ul>
<li><a href="#wrapper-a-propos" class="scrollTo">A propos</a></li>
<li><a href=".wrapper-bandeau-et-triangle" class="scrollTo">Nos solutions</a></li>
<li><a href="#wrapper-contact" class="scrollTo">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="wrapper-menu">
<a href="#image-header-principal" class="scrollTo"><img src="img/picto-home.png" alt="picto home pour le menu"/></a>
<nav>
<ul>
<li class="nav-item">
<a href="#wrapper-a-propos" class="scrollTo">A propos</a>
<ul class="sub-nav">
<li class="sub-nav-item"><a href=".titre-texte" class="scrollTo">Qui sommes-nous</a></li>
<li class="sub-nav-item"><a href="#wrapper-nos-valeur" class="scrollTo">Nos valeurs</a></li>
<li class="sub-nav-item"><a href=".wrapper-nos-valeur-2-ieme-partie" class="scrollTo">Notre objectif</a></li>
</ul>
</li>
...
CSS
@charset "UTF-8";
@import url(normalize.css);
@import url(News.min.css);
/* ---------------- INIT ---------------- */
body {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px; }
div {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px; }
/* ---------------- FIN INIT ---------------- */
/* ---------------- WRAPPER LOGO ET MENU ----------------*/
#wrapper-logo-et-menu {
height: 155px;
width: 100%;
position: fixed;
background-color:white;
transition: all .2s linear;
z-index:1000;} /* Pour mettre le menu en avant */
nav ul {
padding: 0;
margin: 0;
list-style-type: none;
width: 600px; }
a:link{text-decoration:none;} /* Enlever tout pour les links */
nav ul li {
float: left;
margin-left: 30px;}
nav ul li a {
display: block;
float: left;
width: 100%;
line-height: 50px; /* hauteur de l'image de FOND */
background: white;
color: #56412C;
text-decoration: none;
text-align: center;
font-size: 1.5em;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase; }
nav ul li a:hover {
background: #56412C;
color: white;
text-decoration: none;
padding-left: 10px;
padding-right: 10px; }
nav ul li a img:hover {
background: white; }
/* Pour mettre le logo home à gauche du menu*/
.wrapper-menu img{
float: left; }
/* Pour mettre le menu a droite du logo Altix*/
.wrapper-menu {
float: right;
margin-top: 60px;
position: relative;
margin-right: 50px; }
.sub-nav {
display: none; /* Masque la sous-liste */
position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
white-space: nowrap; } /* Pour que le texte ne revienne pas à la ligne */
.nav-item:hover .sub-nav {
display: block; /* Affiche cette sous-liste au survol de son conteneur */
height: auto;
width:...
JavaScript
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}