Como hacer un menú bonito

 

Ciencia Variedades Arte


En este parrafo escribimos lo que corresponde con el texto indicando que tienes 3 opciones para que encuentres en esta página lo que tanto has deseado y esta definido dentro de estas tresa categorias entonces bla, bla, bla....







este parrafo tiene un id=m1 En mi experiencia como ingeniero en el área petrolera he tenido la de conocer como instalar un sistema de anodos de sacrificio para tanques de agua salada en estaciones de flujo y es apacionante ver la puesta en funcionamiento y la instalación de las famosas barritas enterradas en una instalación petrolera que precisamente no es un lugar elegante ni muy cientifico para que un circuito tan interesante se encuentre alli. no digo que el resto de elementos no sean dignos de admiración del punto vista de diseño, todo tiene su punto de prueba y cada elemento lucha contra la naturaleza que quiere todo dominar y regresar a su punto original, "eres polvo y en polvo te convertirás", pero un circuito electrico encargado de llevar la contraria a la naturaleza me parece muy interesante. el hecho de las reacciones electro quimicas de oxido reducción sean expontáneas y tan exactas que al encontrarse mágicamente dos elementos con diferente nivel de xxxxx en sus capas de electrones xxxxx reaccionen quimicamente con reacciones tan xxxxx exactas y







este parrafo tiene un id=m2 una desaparezca frente a la otra, tal como en las peliculas cuando un mago destruye un adversario frete a el con una varita mágis. el principio de xxxxxxxxx nos permite predecir el nivel intercambio electrico o diferencia de potencial que se tendrá en el xxxxx lo que es más llamativo es el hecho de que al aplicar la ecuación xxxxxx al revés , es decir aplicando el resultado que es un diferencial de voltaje logremos controlar el proceso que normalmente sin ese delta voltaje permite desaparecer los metales como por arte de la magia del tiempo. en el área se realizan excavaxciones en sitios completamente equidistantes para repartir a través del terreno donde se encuentra la estructura metálica completamente protegida con el metodo de proteccion catódica , xxxxxx(adicionar un breve descripcion de dicho procedimiento), en este caso el elemento que aporta el material que debe desaparecer son los anodos de sacrificio llamadoa asi por su funcion evidente, ya comentamos quien es mas eletrone---- y quien se oxida y quien se reduce, este s








este parrafo tiene un id=m3 una desaparezca frente a la otra, tal como en las peliculas cuando un mago destruye un adversario frete a el con una varita mágis. el principio de xxxxxxxxx nos permite predecir el nivel intercambio electrico o diferencia de potencial que se tendrá en el xxxxx lo que es más llamativo es el hecho de que al aplicar la ecuación xxxxxx al revés , es decir aplicando el resultado que es un diferencial de voltaje logremos controlar el proceso que normalmente sin ese delta voltaje permite desaparecer los metales como por arte de la magia del tiempo. en el área se realizan excavaxciones en sitios completamente equidistantes para repartir a través del terreno donde se encuentra la estructura metálica completamente protegida con el metodo de proteccion catódica , xxxxxx(adicionar un breve descripcion de dicho procedimiento), en este caso el elemento que aporta el material que debe desaparecer son los anodos de sacrificio llamadoa asi por su funcion evidente, ya comentamos quien es mas eletrone---- y quien se oxida y quien se reduce, este s


este es el codigo:




<table style="width: 50%; margin: 0 auto; border-collapse: collapse; text-align: center;">
<tr>
<td id="1" onclick="sS(id)" onmouseover="cC(this, 'red')"
 onmouseout="cC(this, 'black')">ciencia</td>

<td id="2" onclick="sS(id)" onmouseover="cC(this, 'red')"
 onmouseout="cC(this, 'black')">Variedades</td>

<td id="3" onclick="sS(id)" onmouseover="cC(this, 'red')"
 onmouseout="cC(this, 'black')">Arte</td>
</tr>
</table>

<p id="m1">1er parrafoEn mi experiencia como ....</p>
<p id="m2">2do parrafo   una desaparezca frente a la otra...</p>
<p id="m3" >  3er parrafo una desaparezca frente a la otra....</p>


<script>
function cC(elemento, color) { elemento.style.color = color;}
function sS(XS) {
if (XS==="1") {
var x1 = document.getElementById("m1");
x1.scrollIntoView({ behavior: "smooth" });      };
if (XS==="2") {
var x2 = document.getElementById("m2");
x2.scrollIntoView({ behavior: "smooth" });       };
if (XS==="3") {
var x3 = document.getElementById("m3");
x3.scrollIntoView({ behavior: "smooth" });     };
}
</script>



//funcion cC cambia el color cuando el mouse pasa por encima de la celda
//funcion sS  reconoce el id de cada celda si haces click en ella
                       luego simulas un link con "scrollIntoView"