jQuery SliderNav: Listar contactos como en iPhone

2
101

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.
[html]
<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>
[/html]

Paso 2: Crear la estructura HTML.

Tenemos total flexibilidad en este Slider, podemos cambiar las letras del alfabeto por secciones según nuestra necesidad.
[html]
<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>
[/html]
Post original: DevGrow.com
Ver DemoDescargar

2 COMMENTS

  1. excelente, me gusta como queda, es un efecto como el de coda slider, es la primera vez que entro a tu web y te felicito hay cosas muy interesantes

Comments are closed.