Menu con tablas
En esta Ocacion les enseñare a crear un menu con cambio de tablas excelente para sitios que no quieran tener mas paginas html y solo tengasn la informacion sobre un archivo, excisten muchas formas de crearlas teniendo en cuenta que los estilos de las paginas ya inclullen "javascript", como ya les habia comentado soy algo malo con el java asi que este menu con tablas lo are con puro css despues creare uno con java que sea auto responsive pero por el momento les dejo esto.
Empecemos primero con el documento principal que es el html si no conocen las etiquetas principales les dejo el link para que descarguen la plantilla que biene ya con las etiquetas principales incluidas las de compatibilidades con dispositivos
Descarga plantilla HTMLPrimero epezemos con el html que es lo que le va a dar el formato a nuestra pagina todo lo deben poner dontro de la etiqueta <body>
<input type="radio" name="tabs" id="tab1" checked ></input>
<label for="tab1">
<span>Menú 1</span>
</label>
<input type="radio" name="tabs" id="tab2" ></input>
<label for="tab2">
<span>Menú 2</span>
</label>
<input type="radio" name="tabs" id="tab3" ></input>
<label for="tab3">
<span>Menú 3</span>
</label>
<input type="radio" name="tabs" id="tab4" ></input>
<label for="tab4">
<span>Menú 4</span>
</label>
<div id="tab-conten1" class="tab-content">
<h3>Titulo de la primera Area de tranajo</h3>
<p>Contenido de la primera Area de Trabajo</p>
</div>
<div id="tab-conten2" class="tab-content">
<h3>Titulo de la segunda Area de tranajo</h3>
<p>Contenido de la segunda Area de Trabajo</p>
</div>
<div id="tab-conten3" class="tab-content">
<h3>Titulo de la tercera Area de tranajo</h3>
<p>Contenido de la tercera Area de Trabajo</p>
</div>
<div id="tab-conten4" class="tab-content">
<h3>Titulo de la cuarta Area de tranajo</h3>
<p>Contenido de la cuarta Area de Trabajo</p>
</div>
</div>
width : 100%;
list-style :none;
}
.tabs input {
display : none;
}
.tabs label {
background : #000;
display : block;
float :left;
width :25%;
color : #ccc;
font-size : 30px;
font-weight : normal;
text-align :center;
line-height :1.5;
cursor : pointer;
border-bottom : 4px solid #ccc;
transition : all 1s;
}
.tab-content {
display : none;
width : 100%;
float :left;
padding :15px;
box-sizing : border-box;
background-color : transparent;
}
.tab-content* {
animation : scale 0.7s ease-in-out;
}
@keyframes scale {
0%{
transform :scale(0.9);
opacity :0;
}
50%{
transform :scale(1.01);
opacity :0.5;
}
0%{
transform :scale(1);
opacity :1;
}
}
.tabs [id^="tab"]:checked + label {
border-bottom : 4px solid #3498db;
color : #f44336;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3,
#tab4:checked ~ #tab-content4,
display : block;
}
Titulo de la primera Area de Trabajo
Contenido de la primera Area de Trabajo
Titulo de la segunda Area de Trabajo
Contenido de la segunda Area de Trabajo
Titulo de la tercera Area de Trabajo
Contenido de la tercera Area de Trabajo
Titulo de la cuarta Area de Trabajo
Contenido de la cuarta Area de Trabajo