Simple menú con CSS, HTML y Javascript

Simple Menú con CSS, HTML y Javascript

Simple Menú con CSS, HTML y Javascript

Las «Tabs» o Pestañas  son muy buenas alidadas, en cuestión de diseño web; ocupan poco espacio y le dan orden a los contenidos.

Se popularizaron en los navegadores hace algunos años, el primero en aplicarlas fue Opera Navigator. Es por eso que me encanta este navegador.

Aquí está el código, es muy bonito y no necesita de imágenes externas:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
	$(document).ready(function()
	{
		$(".tab_content").hide();
		$(".tab_content:first").show();




		$("ul.tabs li").click(function(click)
		{
			click.preventDefault();
			$("ul.tabs li").removeClass("active");
			$(this).addClass("active");
			$(".tab_content").hide();




			var activeTab = $(this).find("a").attr("href");
			$(activeTab).fadeIn();
		});
	});
</script>




<style type="text/css">
#panel{
	font-family: arial;
    width: 944px;
    background: -webkit-linear-gradient(#FFF, #E2E2E2);
    background: -moz-linear-gradient(#FFF, #E2E2E2);
    background: -o-linear-gradient(#FFF, #E2E2E2);
    border-radius: 6px;
    padding: 26px 40px;
}
    #panel h1{
        font-size: 30px;
    }
    #panel h2{
        font-size: 17px;
        font-weight: bold;
    }
    #panel input{
        width: 608px;
        height: 40px;
        font-size: 17px;
        padding: 0 5px;
        margin-bottom: 27px;
        border: #CCCCCC 1px solid;
        box-shadow: inset 1px 1px 4px 0px rgba(0,0,0,0.2);
        border-radius: 3px;
    }
    #panel .button{
        display: block;
        padding: 10px 20px;
        text-align: center;
        font-size: 15px;
    }




    .tabs {
        margin: 0;
        padding: 0;
        float: left;
        list-style: none;
        height: 41px;
        border: 1px solid #CCCCCC;
        border-radius: 5px 5px 0 0;
        width: 100%;
            background: -webkit-linear-gradient(#F9F9F9, #F3F3F3);
            background: -moz-linear-gradient(#F9F9F9, #F3F3F3);
            background: -o-linear-gradient(#F9F9F9, #F3F3F3);
    }
        .tabs li {
            float: left;
            margin: 0;
            padding: 0;
            height: 41px;
            line-height: 41px;
            border: 1px solid #CCCCCC;
            border-top: none;
            border-left: none;
            margin-bottom: -1px;
            overflow: hidden;
            position: relative;
        }
            .tabs li a {
                text-decoration: none;
                display: block;
                font-size: 13px;
                padding: 0 20px;
                border: 1px solid #fff;
                outline: none;
            }
                .tabs li:first-child{
                    border-radius: 5px 0 0 0;
                }
                .tabs li a:hover {
                    background: #FFF;
                }
                .tabs li:not(.active) a{
                    color: #888;
                }
                .tabs .active a{
                    color: #000;
                    font-weight: bold;
                }
            .tabs li.active, .tabs li.active a:hover  {
                background: #fff;
                border-bottom: 1px solid #fff;
            }
            .tabs li .active{
                color:#000;
            }
             




            .tab_container{
                border: 1px solid #CCCCCC;
                border-top: none;
                overflow: hidden;
                clear: both;
                float: left; width: 100%;
                background: #fff;
                border-radius: 0 0 5px 5px;
            }
                .tab_content{
                    padding: 20px;
                    font-size: 1.2em;
                }
</style>
	<div id="panel">
		<h1>Millonarios Futbol Club</h1>
		<p>El m&aacute;s veces campe&oacute;n. El equipo embajador, El Ballet Azul</p>
		<br/>
		<ul class="tabs">
		    <li class="active"><a href="#tab1">Partidos</a></li>
		    <li><a href="#tab2">Refuerzos</a></li>
		    <li><a href="#tab3">Noticias</a></li>
		    <li><a href="#tab4">Galer&iacute;a</a></li>				    
		    <li><a href="#tab5">Historia Millonarios FC</a></li>
		    <li><a href="#tab6">Videos</a></li>
		    <li><a href="#tab7">Redes sociales</a></li>
		    <li><a href="#tab8">Registro</a></li>
		</ul>




		<div class="tab_container">
		    <div id="tab1" class="tab_content">
		        <ul>
		        	<li>Millonarios (Colombia) - Olimpia (Honduras) 21 de julio 2013</li>
		        	<li>Millonarios (Colombia) - Porto (Portugal) 24 de julio 2013</li>
		        	<li>Millonarios (Colombia) - Am&eacute;rica de Cali (Colombia) 31 de julio 2013</li>
		        </ul>
		    </div>
		    <div id="tab2" class="tab_content">
		       Alas :O
			</div>
		    <div id="tab3" class="tab_content">
		       Alas :O
			</div>
		    <div id="tab4" class="tab_content">
		        holas 🙂
		    </div>
		    <div id="tab5" class="tab_content">
		       Alas :O
			</div>
		    <div id="tab6" class="tab_content">
		       Alas :O
			</div>
		    <div id="tab7" class="tab_content">
			    <fieldset>
			        <form action="confirmacion.html" method="post" >
			            <label class="label" >
		       				<h2>Cambiar contrase&ntilde;a</h2>
		       				</br>
			                <input type="password" name="name" placeholder="Nueva contrase&ntilde;a">
			            </label>
			            <button type="submit" class="button" title="Enviar formulario">
			                <span class="desk">Guardar cambios</span>
			            </button>
			        </form>
			    </fieldset>
			</div>
		    <div id="tab8" class="tab_content">
		       Alas :O
			</div>
		</div>
		<div style="clear: both;"></div>
		</div>
Anuncios
Acerca de

Programador, usuario Linux e hincha de Millonarios de Colombia

Tagged with: , , , , , ,
Publicado en css, General, html, javascript, programacion
One comment on “Simple menú con CSS, HTML y Javascript

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Sígueme en Twitter
Categorías
Flickr Photos
¡Apareció Linux!

Mirando de lado

Café

Más fotos
A %d blogueros les gusta esto: