Biblioteca de navegación de desplazamiento fácil de una página-Slide-NAV

Vista prévia

Descripción

Slide-NAV es un plugin de JavaScript ligero y fácil de usar que se utiliza para crear una navegación adhesiva para sus páginas web de desplazamiento de una página. Scrollspy y desplazamiento suave también son compatibles.

Funcionamiento

Cree una lista de navegación que contenga enlaces de anclaje apuntando a las secciones de contenido dentro de su documento HTML.

<div class="nav">

<nav>


<a href="#section1">Link to section 1</a>


<a href="#section2">Link to section 2</a>


<a href="#section3">Link to section 3</a>


<a href="#section4">Link to section 4</a>

</nav>
</div>

<div id="section1" class="section">

<div class="text-wr">


<h1 class="title">



<div class="title-top">Slide 1</div>



<div class="title-tx">This is slide 1</div>


</h1>

</div>
</div>
<div id="section2" class="section">

<div class="text-wr">


<div class="title-top">Slide 2</div>


<div class="title-tx">This is slide 2</div>

</div>
</div>
<div id="section3" class="section">

<div class="text-wr">


<div class="title-top">Slide 3</div>


<div class="title-tx">This is slide 3</div>

</div>
</div>
<div id="section4" class="section">

<div class="text-wr">


<div class="title-top">Slide 4</div>


<div class="title-tx">This is slide 4</div>

</div>
</div>

Estilo de la navegación y fijarlo a la parte superior de la página web cuando se desplaza.

.nav {

position: fixed; /*left: 50%;*/

width: 100%;

top: 20px;

z-index: 9;

padding-left: 10px;
}

.nav a {

padding: 7px 20px;

border-radius: 7px;

margin-right: 10px;

background: rgba(255, 255, 255, 0.5);

-webkit-transition: all 0.2s ease-out;

-moz-transition: all 0.2s ease-out;

-ms-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

text-decoration: none;

color: black;

font-family: sans-serif, arial;

font-weight: 100;
}

.nav a.active {

background: rgba(0, 0, 0, 0.5);

color: white;
}

.nav a:hover { background: rgba(255, 255, 255, 0.7); }

Importe el archivo de JavaScript principal slideNav. js en el documento.

<script src="dist/slideNav.js"></script>

Active la navegación de desplazamiento de una página.

window.slide = new SlideNav();

Todas las opciones posibles que se pueden pasar como un objeto JS a la SlideNav ():

var nav = new SlideNav({


activeClass: "active",


toggleButtonSelector: false,


toggleBoxSelector: false,


hideAfterSelect: true,


speed: 70,


changeHash: false,


navBoxToggleClass: false
});