Foundation - Magellan 粘性导航

上一页
下一页

说明

Sticky 插件可与 Magellan 一起使用，创建固定的导航头。以下示例适用于较旧版本的 Foundation。

示例

以下示例演示在 Foundation 中使用 Magellan 粘性导航的方式 -

实际演示 
<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
   </head>

   <body>
      <div data-magellan-expedition = "fixed">
         <section class = "top-bar-section">
            <div class = "sticky-mag">
               <ul class = "horizontal menu" data-magellan>
                  <li data-magellan-arrival = "home"><a href = "#home">Home</a></li>
                  <li data-magellan-arrival = "about"><a href = "#about">About</a></li>
                  <li data-magellan-arrival = "service"><a href = "#service">Service</a></li>
               </ul>
            </div>
         </section>
      </div>
      <br/>
      <br/>

      <h2>Example of Magellan Sticky Navigation</h2>
      <h3 data-magellan-destination = "home">Home</h3>
      <a name = "home"></a>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>
      
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>

      <h3 data-magellan-destination = "about">About</h3>
      <a name = "about"></a>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>
      
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>

      <h3 data-magellan-destination = "service">Service</h3>
      <a name = "service"></a>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>
      
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting
         industry. Lorem Ipsum has been the industry's standard dummy text ever
         since the 1500s, when an unknown printer took a galley of type and
         scrambled it to make a type specimen book.
      </p>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

输出

让我们执行以下步骤，看看上述给定代码如何工作 -

  • 将上面给定的 HTML 代码保存在magellan_sticky_navigation.html文件中。

  • 在浏览器中打开此 HTML 文件，如下所示显示输出。

foundation_navigation.htm
打印页面
上一页
下一页
广告