Validation site

Par Breiz45, il y a 9 ans

Les bases HTML/CSS

Bonjour,

Voila je suis tout nouveau et je rencontre (déjà...) un petit problème avec mon code.

Ce que je fais

Je suis en train de créer un site pour un ami et j'aurais voulu avoir des conseil sur la mise en page et notamment sur les animations CSS. Voici le site en cours de dev :

http://chaudron.lechaudroncrevin.fr/index.html

Ce que je veux

Un site clair, propre épuré et responsive.

Ce que j'obtiens

Je cherche à mettre en place un menu headroom (http://wicky.nillia.ms/headroom.js/) mais je n'y arrive pas.

20 réponses

Huggy, il y a 9 ans

Pour le headroom c'est relativement simple
tu charges le script headroom.js juste avant ton main.js
a la fin de ton main.js, tu initialises l'objet headroom

$(document).ready(function(){ ... ... var myElement = document.querySelector("header"); // traite la balise header // construct an instance of Headroom, passing the element var headroom = new Headroom(myElement); // initialise headroom.init({ // vertical offset in px before element is first unpinned offset : 0, // scroll tolerance in px before state changes tolerance : 10, // or you can specify tolerance individually for up/down scroll tolerance : { up : 5, down : 0 } } ); });

et il manque du css pour les transitions
à rajouter dans ton main.css

.headroom { will-change: transform; transition: transform 0.25s ease-in-out 0s; } .headroom--pinned { transform: translateY(0%); } .headroom--unpinned { transform: translateY(-100%); }
Breiz45, il y a 9 ans

Ah oui, effectivement, je me suis trompé de version :D

Je viens de mettre à jour ma version !

Breiz45, il y a 9 ans

Bonjour,

J'ai essayé ta solution mais mon menu est toujours pareil. J'ai téléchargé le headroom.js, j'ai un lien dans le head.

<script type="text/javascript" src="js/headroom.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/main.js"></script>

J'ai ensuite inséré le code

$(document).ready(function(){ ... ... var myElement = document.querySelector("header"); // traite la balise header // construct an instance of Headroom, passing the element var headroom = new Headroom(myElement); // initialise headroom.init({ // vertical offset in px before element is first unpinned offset : 0, // scroll tolerance in px before state changes tolerance : 10, // or you can specify tolerance individually for up/down scroll tolerance : { up : 5, down : 0 } } ); });

à la fin de mon main.js et j'ai aussi ajouté ces lignes à mon css :

.headroom { will-change: transform; transition: transform 0.25s ease-in-out 0s; } .headroom--pinned { transform: translateY(0%); } .headroom--unpinned { transform: translateY(-100%); }

Cela n'a aucun effet... Voici mon menu HTML :

<!-- début du header --> <header> <div class="wrapper"> <div class="logo"> <a href=""><img src="img/logo.png" alt="Resto" title=""/></a> </div> <p>Restaurant Pizzéria Le Chaudron</p> <nav id="primary_nav"> <ul> <li><a href="#1">Un</a></li> <li><a href="#2">Deux</a></li> <li><a href="#3">Trois</a></li> <li><a href="#4">Quatre</a></li> <li><a href="5.html">Cinq</a></li> <li><a href="6.html">Six</a></li> </ul> </nav> </div> <script language="JavaScript"> $(function() { $('#nav-status').click(function(e) { e.preventDefault(); $('#navigation').toggle(); });​ }); </script> </header><!-- Fin du header -->

Et le CSS de mon menu :

/* header */ header{ width: 100%; height: 140px; position: fixed; z-index: 2; background: #000; overflow: hidden; } header .logo{ float: left; margin-top: 1px; overflow:hidden; -webkit-border-radius:50px; -moz-border-radius: 50%; border-radius:50px; width:85px; height:85px; border: 2px solid #000; } header .logo:hover, header .logo:focus { transform: rotate(360deg); transition: all 0.7s; -moz-box-shadow: 0px 0px 10px #343434; -webkit-box-shadow: 0px 0px 10px #343434; -o-box-shadow: 0px 0px 10px #343434; box-shadow: 0px 0px 10px #343434; } header p{ text-decoration: none; color: #39CF85; font-family: "wcmanonegrabta"; font-size: 2em; letter-spacing: .5px; text-align: center; margin: 1.3em 10px 1px 60px; } header p:hover, header p:focus{ transform: scale(1.05); } header nav{ /*float: left;*/ /*padding : 0 0.5em;*/ margin: 0.1em 10px 10px 11em; } header nav ul{ list-style: none; margin-top: 20px; text-align:center; } header nav ul li{ display: block; float: left; margin-left: 50px; } header nav ul li a{ text-decoration: none; color: #39CF85; font-family: "aleo-regular", arial; font-size: 20px; letter-spacing: .5px; padding-bottom: 10px; border-bottom: 2px solid #39CF85; } header nav ul li a.active, header nav ul li a:hover{ color: #f34949; border-bottom: 2px solid #f34949; } header nav ul li a:target{ padding-top: 140px; }
Huggy, il y a 9 ans

Vérifie que le script headroom est bien chargé et que tu n'as pas d'erreur javascript
Met en ligne tes modif si tu veux qu'on jette un oeil

PS : j'ai recopié ta page en local et ça fonctionne tel que je te l'ai indiqué

Thomas Chicheportiche, il y a 9 ans

Salut, sur la version que tu as publiée, il y a des erreurs qui sont remontées par la console.

Huggy, il y a 9 ans

Dans le main.js tu as laissé les "..." et du coup ça fait des erreur js
j'avais mis ça pour te dire de rajouter l'initialisation à la fin du bloc document.ready(
donc pas la peine de rajouter un second bloc document.ready

Thomas Chicheportiche, il y a 9 ans

Je te conseille de revoir le code de ton main.js car des erreurs de syntaxe sont encore remontées.

Breiz45, il y a 9 ans

C'est bon, ça marche sur la page principale mais pas sur les deuxx autres (photo et contact...). J'ai pourtant bien inséré le headroom.js avant le main.js.

Thomas Chicheportiche, il y a 9 ans

Il te manque le lien vers ton script headroom.js sur ces deux pages

Breiz45, il y a 9 ans

Non, il est bien présent !

Thomas Chicheportiche, il y a 9 ans

Autant pour moi. Parcontre, déclare le lien vers jQuery. ça pourrait résoudre ton problème.

Breiz45, il y a 9 ans
<script type="text/javascript" src="js/jquery.js"></script>
Breiz45, il y a 9 ans

Le lien vers jQuery est là aussi !

Breiz45, il y a 9 ans

Je n'arrive toujours pas à faire fonctionner le headroom.js sur mes deux autres pages. J'essaye maintenant de faire un menu pour les mobiles avec le lien ci-dessus. J'ai bien créer mes divs, mais le "position: absolute;" du menu m'affiche une page complètement blanche...

Huggy, il y a 9 ans

C'est parce que tu charges 2x jQuery, une fois en début de page (V 1.11) et une seconde fois après le body (V 2.1.3)
en mettant en commentaire la seconde, le headroom fonctionne

Breiz45, il y a 9 ans

Cela ne marche pas sur la page contact... Si je supprime le deuxième jquery, il me supprime ma carte...

Thomas Chicheportiche, il y a 9 ans
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys dB.j @ util.js:212 (anonymous) @ js?sensor=true:127 (anonymous) @ js?sensor=true:46 (anonymous) @ js?sensor=true:43 (anonymous) @ js?sensor=true:46 (anonymous) @ js?sensor=true:99 (anonymous) @ js?sensor=true:43 (anonymous) @ js?sensor=true:99 (anonymous) @ js?sensor=true:43 (anonymous) @ js?sensor=true:99 (anonymous) @ js?sensor=true:43 (anonymous) @ js?sensor=true:99 gc @ js?sensor=true:45 fc.cb @ js?sensor=true:99 (anonymous) @ common.js:1 util.js:212 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

Il ne t'affiches pas ta carte peut-être à cause de cela. Les erreurs sont remontées par la console. Penses bien à vérifier avant :)

Breiz45, il y a 9 ans

Les erreurs ont disparus (comme ma carte...) !