Fundação - Magellan Sticky Navigation

Descrição

O plug-in pegajoso pode ser incluído no magellan para criar um cabeçalho de navegação constante. O exemplo a seguir funciona bem na versão anterior do Foundation.

Exemplo

O exemplo a seguir demonstra o uso da navegação pegajosa magellan no 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima magellan_sticky_navigation.html Arquivo.
Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

↰ Previous page