Barre de navigation supérieure de la Fondation


La barre de navigation supérieure est placée en tête de page :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <!-- 如果你不需要标题或图标可以删掉它 -->
      <h1><a href="#">WebSiteName</a></h1>
    </li>
      <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li> 
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>基本头部工具条实例</h3>
  <p>工具条是在页面头部的导航。</p>
  <p><strong>注意:</strong> 在小屏幕上工具条会被一个按钮取代 (重置窗口，查看效果)。</p>
  <p>在按钮被点击后导航项将显示。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter » Exemple » pour afficher des exemples en ligne

Exemple d'analyse

Utilisez <nav class="top-bar" data-topbar> pour créer une barre d'outils standard. La classe .title-area définit la zone du logo du site Web (il faut éviter li.name à l'intérieur). Une fois que l'écran devient plus petit, vous pouvez voir un bouton « menu ». Le menu de Foundation se repliera et s'agrandira automatiquement en fonction de la taille de l'écran :

Sur les petits écrans, de nombreuses options seront masquées en raison de leur taille. La classe li.toggle-topbar menu.icon crée un bouton de menu qui affiche les options masquées lorsque vous cliquez dessus.
Astuce : Réinitialisez la fenêtre du navigateur pour voir l'effet.

.top-bar-section définit la partie lien de la navigation. La classe .left spécifie que les liens sont alignés à gauche. La classe .active permet d'afficher l'élément sélectionné avec un fond bleu.

Conseils : Si vous souhaitez que le lien de navigation soit aligné à droite, vous pouvez remplacer .left par .right :

Exemple

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <!-- 如果你不需要标题或图标可以删掉它 -->
      <h1><a href="#">WebSiteName</a></h1>
    </li>
      <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li> 
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>右对齐工具条</h3>
  <p> .right 类设置工具条按钮右对齐。</p>
  <p><strong>注意:</strong> 在小屏幕上工具条会被一个按钮取代 (重置窗口，查看效果)。</p>
  <p>在按钮被点击后导航项将显示。</p>
</div>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Vous pouvez définir l'alignement à gauche et à droite alignement en même temps :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">WebSiteName</a></h1>
    </li>
    <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="right">
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Login</a></li>
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>左右都有对齐</h3>
  <p>该实例演示了工具条左右都有选项。</p>
  <p><strong>注意:</strong> 在小屏幕上工具条会被一个按钮取代 (重置窗口，查看效果)。</p>
  <p>在按钮被点击后导航项将显示。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Barre de navigation Vous pouvez ajouter des lignes de séparation via la classe .divider (lignes verticales sur grands écrans, lignes horizontales sur petits écrans) :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">WebSiteName</a></h1>
    </li>
    <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li class="divider"></li>
      <li><a href="#">Page 1</a></li>
      <li class="divider"></li>
      <li><a href="#">Page 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Page 3</a></li> 
      <li class="divider"></li>
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>顶部导航栏分割线</h3>
  <p>导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线，小屏幕上是水平线)。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Le drop -menu déroulant de la barre de navigation

La barre de navigation supérieure peut définir le menu déroulant .

Vous pouvez mettre en place un menu déroulant en ajoutant la classe <li> sur l'élément .has-dropdown :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">WebSiteName</a></h1>
    </li>
    <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li class="has-dropdown">
        <a href="#">Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li><a href="#">Second link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>带有下拉菜单的工具栏</h3>
  <p>该实例演示了带有下拉菜单的攻击栏。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Ligne de séparation

Utilisez la classe .divider pour définissez la ligne de démarcation du menu déroulant :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">WebSiteName</a></h1>
    </li>
    <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li class="has-dropdown">
        <a href="#">Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">Apple</a></li>
          <li><a href="#">Banana</a></li>
          <li><a href="#">Orange</a></li>
          <li class="divider"></li>
          <li><a href="#">Kale</a></li>
          <li><a href="#">Spinach</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>带有有分割线的下拉菜单</h3>
  <p> .divider 类用于设置下拉菜单的分割线。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur "Exécuter Bouton "Instance" pour visualiser l'instance en ligne

Étiquette du menu déroulant

Ajoutez un élément <li> à l'intérieur de <label> pour définir l'étiquette (titre) du menu déroulant :

Exemple 

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">WebSiteName</a></h1>
    </li>
    <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li class="has-dropdown">
        <a href="#">Dropdown</a>
        <ul class="dropdown">
          <li><label>Fruit</label></li>
          <li><a href="#">Apple</a></li>
          <li><a href="#">Banana</a></li>
          <li><a href="#">Orange</a></li>
          <li class="divider"></li>
          <li><label>Vegetable</label></li>
          <li><a href="#">Kale</a></li>
          <li><a href="#">Spinach</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>下拉菜单标签(标题)</h3>
  <p>使用 label 元素为下拉菜单设置标签(标题)。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Menu déroulant intégré menu

Menu déroulant Vous pouvez intégrer un autre menu déroulant :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">WebSiteName</a></h1>
    </li>
   <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li class="has-dropdown">
        <a href="#">Dropdown</a>
        <ul class="dropdown">
          <li><label>Level 1</label></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="has-dropdown">
            <a href="#">New dropdown</a>
            <ul class="dropdown">
              <li><label>Level 2</label></li>
              <li><a href="#">2nd level dropdown</a></li>
              <li><a href="#">2nd level dropdown</a></li>
              <li class="has-dropdown">
                <a href="#">New dropdown</a>
                <ul class="dropdown">
                  <li><label>Level 3</label></li>
                  <li><a href="#">3rd level dropdown</a></li>
                  <li><a href="#">3rd level dropdown</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>导航栏内嵌下拉菜单</h3>
  <p>该实例演示了下拉菜单中再嵌入下拉菜单。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour visualiser l'exemple en ligne

Cliquable

Par défaut, le menu déroulant de la barre de navigation s'affiche après le déplacement de la souris dessus. Nous pouvons utiliser l'attribut data-options="is_hover: false" pour définir la barre de navigation à afficher après un clic de souris :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar data-options="is_hover: false">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">WebSiteName</a></h1>
    </li>
     <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li class="has-dropdown">
        <a href="#">Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li><a href="#">Second link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>点击下拉菜单 With Clickable Dropdown</h3>
 <p>默认情况下导航栏的下拉菜单在鼠标移动过去后显示，我们可以使用 <code>data-options="is_hover: false"</code> 属性来设置导航栏在鼠标在点击后显示。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

<. 🎜>Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Boutons et icônes de la barre de navigation

Vous pouvez placez des icônes et des boutons sur la barre de navigation :

Exemple

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">WebSiteName</a></h1>
    </li>
    <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#" class="button">Button Link</a></li>    
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>头部工具条按钮</h3>
  <p>头部工具条按钮实例。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance»Cliquez sur "Exécuter l'instance" bouton pour afficher l'instance en ligne

Vous pouvez mettre une icône sur la barre de navigation, plus de styles d'image peuvent être visualisés Tutoriel sur les icônes de la Fondation :

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <!-- Foundation 图标样式 -->
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-icons/foundation-icons.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#"><i class="fi-home"></i> Home</a></li>
      <li><a href="#"><i class="fi-torso"></i> Sign Up</a></li>
      <li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></li>    
    </ul>
  </section>
</nav>

<div style="padding:20px;">
  <h3>工具条图标</h3>
  <p>工具条上显示图标实例。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Barre de navigation fixe

La barre de navigation peut être fixée en haut de la page.

La barre de navigation en haut ne bougera pas lorsque la page défilera.

Pour réparer la barre de navigation, placez simplement la barre de navigation à l'intérieur de

 :<div class="fixed">

Exemple

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="height:1500px">

<div class="fixed">
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">WebSiteName</a></h1>
      </li>
       <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
      <ul class="left">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>   &am
←
→