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>