SliderNav es un plugin para jQuery desarrollado por DevGrow que permite mediante una barra de navegación vertical el deslizamiento de contenido, se establece el contenido mediante secciones y pueden rotar con la rueda del mouse.
Ejemplo SliderNav
Para implementar este Slider en nuestra Web, debemos de seguir estos pasos:
Paso 1: Incluir los archivos JavaScript y CSS en la cabecera.
Para nuestro ejemplo utilizaremos la librería jQuery y slidernav, luego inicializamos la función.
<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="slidernav-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').sliderNav();
});
</script>
Paso 2: Crear la estructura HTML.
Tenemos total flexibilidad en este Slider, podemos cambiar las letras del alfabeto por secciones según nuestra necesidad.
<div id="slider">
<div class="slider-content">
<ul>
<li id="a"><a name="a" class="title">A</a>
<ul>
<li><a href="/">Adam</a></li>
<li><a href="/">Alex</a></li>
<li><a href="/">Ali</a></li>
<li><a href="/">Apple</a></li>
<li><a href="/">Arthur</a></li>
<li><a href="/">Ashley</a></li>
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
<li><a href="/">Barry</a></li>
<li><a href="/">Becky</a></li>
<li><a href="/">Biff</a></li>
<li><a href="/">Billy</a></li>
<li><a href="/">Bozarking</a></li>
<li><a href="/">Bryan</a></li>
</ul>
</li>
etc...
</ul>
</div>
</div>
Post original: DevGrow.com
Comentarios