jQuery SliderNav: Listar contactos como en iPhone

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

Ver DemoDescargar

También te puede interesar

2 Comments

  1. Mario
    ene 21, 2011 @ 06:01:19

    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

  2. Leandro
    feb 18, 2011 @ 08:24:49

    deja d poner tantos banners.. en innavegable..