Utilisation de templates Foundation sans SCSS

coralie
Les bases HTML/CSS

Bonjour,

Je ne suis pas du tout programmatrice, mais je me débrouille. J'utilise les templates Foundation 6. Je ne me sers pas de SCSS, mais uniquement de HTML et CSS. Je crée mon site en responsive.

Ce que je cherche à faire

Je cherchais au début à avoir une sticky navigation bar avec un template, mais j'ai quelques difficultés. J'ai opté pour une barre latérale qui apparaît et disparaît en fonction de la taille de la fenêtre. Je trouvais la première option plus pratique, mais pour le moment, je voudrais arriver à mettre celle-ci en œuvre car je m'en servirai peut-être.
L'exemple est visible en ligne ici :
Dans mon cas, il semble que la fonction JS en fin de page ne marche pas. Je l'ai intégrée après le corps de la page.

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
       <link rel="stylesheet" href="css1/add.css" />

</head>
<body>

 <link href='http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css' rel='stylesheet' type='text/css'>

<div class="off-canvas-wrap move-right" data-offcanvas>
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle" href="#"><i class="fi-list"></i></a>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">

      <div class="icon-bar vertical five-up">
      <a class="item">
        <i class="fi-home"></i>
        <label>Home</label>
      </a>
      <a class="item">
       <i class="fi-home"></i>
        <label>Bookmark</label>
      </a>
      <a class="item">
        <i class="fi-home"></i>
        <label>Info</label>
      </a>
      <a class="item">
        <i class="fi-home"></i>
        <label>Mail</label>
      </a>
      <a class="item">
        <i class="fi-home"></i>
        <label>Like</label>
      </a>
    </div>

    </aside>
    <header class="row">
      <div class="small-12 columns">

 <div class="callout large">
<div class="row column text-center">
<h1>Europa</h1>
<p class="lead">SOund Is MOre</p>
<a href="#" class="button large">Learn More</a>
<a href="#" class="button large hollow">Learn Less</a>
</div>
</div>
      </div>
    </header>

<div class="row">

<!-- colonne gauche principale -->
<div class="medium-4 columns">

<!-- texte -->

blablabla

  <a class="exit-off-canvas"></a>

  </div>
</div>

 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>
<script>
      $(document).foundation();
      </script>   
      <script>
      function sideNav() {
  if ($(window).width() < 769) {
    $('.off-canvas-wrap').removeClass('move-right');
    $('.left-off-canvas-toggle').show();
  } else {
    $('.off-canvas-wrap').addClass('move-right');
    $('.left-off-canvas-toggle').hide();
  }  
}

$(window).resize(function() {
  sideNav();
});
     </script>  

</body>
</html>


### Ce que je veux

C'est visible sur le site de Foundation : voir le lien

### Ce que j'obtiens

La barre est présente, mais le style n'y est pas, et le menu ne disparait pas. J'ai bien copié le CSS dans ma feuille de style supplémentaire. Je ne sais pas si ça tient au fait de ne pas utiliser de SCSS ou pas. Je crois que la fonction JS ne marche pas. Je ne me sens pas capable d'utiliser le SCSS.

[](http://coraliediatkine.eu/Prestations.html)

Merci pour votre aide, je ne suis peut-être pas très claire.

Coralie

Aucune réponse