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.