Barre latérale de Foundation

Navigation dans la barre latérale

Utilisation de Foundation<ul class="side-nav">Créer une barre latérale :

Exemple

<ul class="side-nav">
  <li><a href="#">Lien 1</a></li>
  <li><a href="#">Lien 2</a></li>
  <li><a href="#">Lien 3</a></li>
  <li><a href="#">Lien 4</a></li>
</ul>

Essayez-le vous-même »

Liens actifs et lignes de séparation

Les liens cliqués peuvent être<li>Utilisé sur.activeUtilisez la classe pour identifier.dividerlignes de séparation horizontales données via la classe :

Exemple

<ul class="side-nav">
  <li class="active"><a class="a" href="#">Lien 1</a></li>
  <li><a class="a" href="#">Lien 2</a></li>
  <li class="divider"></li>
  <li><a class="a" href="#">Lien 3</a></li>
  <li><a class="a" href="#">Lien 4</a></li>
</ul>

Essayez-le vous-même »

Barre latérale dans une grille

Nous pouvons utiliser le patron de conception de grille pour construire la navigation latérale, comme illustré dans l'exemple suivant :

Exemple

<div class="row">
  <div class="medium-4 columns" style="background-color:#f1f1f1;">
    <ul class="side-nav">
      <li class="active"><a href="#">Accueil</a></li>
      <li><a href="#">Apprendre le HTML</a></li>
      ...
    </ul>
  </div>
  <div class="medium-8 columns">
    <h1>Navigation latérale</h1>
    <p>Du texte..</p>
    ...
  </div>
</div>

Essayez-le vous-même »
autres extensions