Zurb Foundation Collant De La Barre De Navigation

Donc je suis en utilisant la valeur par défaut .top-bar classe à partir de la zurb foundation framework, mais je ne suis pas a trouver un moyen simple de faire de la barre de navigation "collantes" (suit l'utilisateur comme il défile), comme vous pouvez le faire avec Twitter bootstrap.

Voici mon code, je suis en utilisant jade:

nav.top-bar
  ul
    li.name
      h1
        a(href='#') Site Title
    li.toggle-topbar
      a(href='#')

  section
    ul.left
      li.divider
      li
        a.active(href='#') Link
      li.divider
      li
        a.active(href='#') Link
      li.divider
      li
        a.active(href='#') Link
      li.divider
      li
        a.active(href='#') Link
      li.divider
  section
    ul.right
      li.divider
      li.has-dropdown
        a.active(href='#') Log in

Ai-je raté quelque chose de tout à fait évident ici?

C'est assez facile, vous avez probablement juste écrémé sur elle dans les docs. J'ai posté la réponse et le lien ci-dessous.

OriginalL'auteur Connor Black | 2013-01-01

  1. 8

    De la docs page: http://foundation.zurb.com/docs/navigation.php

    Le positionnement de la Barre de

    La barre du haut est construit avec un seul élément nav avec une classe de haut-bar. Il va prendre sur la pleine largeur du navigateur par défaut. Pour rendre le haut de la barre de séjour fixe que vous faites défiler, l'envelopper dans un div class="fixed". Si vous voulez que votre navigation sera mis à votre grille de la largeur, de l'envelopper dans des div class="contiennent-to-grid". Vous pouvez utiliser fixes et contiennent-à-grille.

    Que le lien est mort maintenant depuis Zurb mis à jour l'ensemble de leur documentation de base 4. Pour ce faire, dans 4, mis div class="contiennent-à-grille collant" n'importe où dans votre navigation, balisage. Plus de détails: foundation.zurb.com/docs/components/top-bar.html.
    foundation.zurb.com/old-docs/f3/navigation.php existe toujours et est toujours pris en charge
    "n'importe où dans votre navigation, balisage" -> qu'est-ce que cela signifie?
    Il dit "n'importe où dans votre balisage" pas "n'importe où dans votre navigation, balisage", ce Qui signifie que vous pouvez ajouter un collant bar à n'importe quel endroit dans le code HTML.
    le lien est maintenant malheureusement mort trop. Heres la page F5: foundation.zurb.com/sites/docs/v/5.5.3/components/topbar.html et le F6: foundation.zurb.com/sites/docs/top-bar.html

    OriginalL'auteur Ed Charbeneau

  2. 0

    Vous pouvez aussi lui donner de la classe "collant" et avoir le menu situé n'importe où sur votre page, et quand il touche le haut de il va tenir et suivre.

    Vous pouvez également envelopper votre barre du haut en div class="contiennent-à-grille collant"
    et le mettre n'importe où dans votre balisage. Lors de la navigation frappe le
    en haut du navigateur, il va agir comme le fixe en haut de la barre et s'en tenir à
    le plus haut que les utilisateurs continuent à défiler.
    Lien vers la Source

    OriginalL'auteur Tensai

  3. 0

    Pour faire de votre .haut de la barre de travail bien et bien, vous avez besoin pour l'envelopper avec une div distinctes, comme

    <div class="sticky">
 <div class="contain-to-grid">
  <nav>
   ...
  </nav>
 </div>
</div>

    J'ai trouvé cela fonctionne très bien avec mon redimensionnement du navigateur et iphone Chrome.

    OriginalL'auteur Koo Jeng Tong