Menu de contenido con pestañas Css3, sin Jquery.(Tabs)

abril 24, 2013

Hoy les voy a compartir un pequeño truco para usar pestañas o también llamadas tablas sin usar JQuery, solo lo desarrollaremos con CSS3, usando algunos pseudo elementos :target

La lógica es muy simple, hacemos una lista desordenada «ul» ,y en el interior «li» habrá un «div» con la identificación única (id), cuando este identificador único sea llamado a través de algún tipo de vínculo «href» aparecerá la «div» respectiva.

<div id="container">
    <div id="tabs">
        <ul>
            <li id="One"><a href="#1ero" id="first">1ero</a>
                <div>
                    <p>En el tutorial de hoy les voy a compartir una forma sencilla de realizar News Ticker y Barra de notificaciones utilizando CSS3, NO JAVASCRIPT. Antes era muy difícil de codificar en javascript y hacer que funcione con otros plugins, pero hoy he decidido hacer posible en CSS3 y voila, logré Así que vamos.</p>
                </div>
            </li>
            <li id="Two"><a href="#2do" id="sec">2do</a>
                <div>
                    <p>Al leer más sobre HTML5 y CSS3 que acabo de encontrar un botón de increíble css3 estilo. Esta vez quería hacer algo que estaba haciendo desde los últimos 2 años utilizando JQuery. En este tutorial voy a enseñar cómo hacer una slideDown palanca y la función slideUp usando CSS3 y HTML5.</p>
                </div>
            </li>
            <li id="Three"><a href="#3ero" id="third">3ero</a>
                <div>
                    <p>Vamos a empezar a aprender CSS3 antes de que sea demasiado tarde, acabo de ver un sitio web que me sorprendió con sus efectos de animación. Primero pensé que el sitio está utilizando algunas librerías jQuery pero cuando en realidad fue en el código, lo encontré es CSS3. Así que empecé a aprenderlo, y hoy hice mi primer Leer más ... </p>
                </div>
            </li>
        </ul>
    </div>
</div>

Ahora nosotros vamos a usaremos una transición para mostrar el con el efecto de opacidad, el cambio sudece al dar «click» a la pestaña y se ejecutará la transición, y el cambio de «div» junto con el efecto de opacidad.

li div {
    -Moz-transition: todos los  0,5 s facilidad 0 s;
    -Webkit-transición: todos  0.5 s facilidad 0 s;
    frontera : 1px  sólido  # 888888 ;
    float : a la izquierda ;
    Opacidad: 0 ;
    padding : 0  15px ;
    position: absolute;
    Visibilidad : hidden ;
    Ancho : 250px ;
    izquierda : 0 ;
    background :-moz-linear-gradiente ( centro  superior  , e3e3e3 # , # FFFFFF  85px ) repeat  scroll  0  0  transparentes ;
}
 
# Tabs li a {
    background :-moz-linear-gradiente ( centro  superior  , e3e3e3 # , # FFFFFF  18px ) repeat  scroll  0  0  transparentes ;
    frontera : 1px  sólido  # 888888 ;
    margen : 0  3px  0  0 ;
    padding : 5px  25px ;
    posición : relativa ;
    z-index : 1 ;
    font-size : 14px ;
    border-radius: 10px  10px  0  0 ;
    pantalla : bloque ;
    top : 1px ;
}
 
# Uno: div objetivo, # Dos: div objetivo, # Tres: target div {
    opacidad: 1 ;
    Visibilidad : visible ;
}

con esto hemos terminado la creación de pestañas con css3, fue muy simple, por aca dejo la demo y también la descarga de los archivos (contraseña: antocas.com) compartirlo si te gusta y sugerencias son siempre bienvenidos.

Relacionados