Fundación - Magellan Sticky Navigation

Descripción

El complemento adhesivo se puede incluir con magellan para crear un encabezado de navegación constante. El siguiente ejemplo funciona bien en la versión anterior de Foundation.

Ejemplo

El siguiente ejemplo demuestra el uso de la navegación pegajosa de Magellan en Foundation:

<!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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

  • Guarde el código html dado anteriormente magellan_sticky_navigation.html archivo.

  • Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.