Ejercicio

[XD2XD2]

Iniciado por 3nr1c

Si dices que aún no has manejado a hacer arrays, yo de tí los aprendería primero porque se suelen usar bastante...

Pero si quieres empezar a hacer algo, podrías crear un script para un menú desplegable:

Código HTML:

<div class="nivel1">Parent 1</div>
<div class="nivel2">
<ul><li>Elemento1</li><li>Elemento2</li></ul>
</div>
<div class="nivel1">Parent 2</div>
<div class="nivel2">
<ul><li>Elemento1</li><li>Elemento2</li></ul>
</div>
 

La idea es que al hacer clic en los elementos "parent 1" y "parent 2" se vean los div de nivel dos (solo el correspondiente), es decir primero tienen que estar ocultos.

No es solo de Javascript también de HTML y CSS pero es que javascript solo como que mucha utilidad no tiene si no vas a usar Node...

Un saludo

Jquery:

Código Javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(iniciar);
 
function iniciar(){
$("#1").mouseover(ocultar);
$("#2").mouseout(mostrar);
}
 
function ocultar(){
$("#2").removeAttr("hidden", "false");
$("#2").Attr("hidden", "false");
}
 
function mostrar(){
$("#2").attr("hidden", "true");
}
</script>
<style text="text/css">
#button {
padding: 0;
}
 
 
#button li {
display: inline;
}
 
#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}
 
#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}
</style>
<div id="Info"></div>
<ul id="button">
    <li><a id="1" href="#">Home</a>
        <a id="2" hidden="true">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">F.A.Q</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
 

Javascript:

Código Javascript:

<style text="text/css">
#button {
padding: 0;
}
 
 
#button li {
display: inline;
}
 
#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}
 
#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}
</style>
 
<ul id="button">
    <li><a onmouseover="document.getElementById('1').hidden=false" href="#">Home</a>
        <a href="#" id="1" onmouseout="this.hidden=true" hidden>Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">F.A.Q</a></li>
    <li><a href="#">Help</a></li>
    <li><a onmouseover="document.getElementById('2').hidden=false" href="#">Contact Us</a>
        <a href="#" id="2" onmouseout="this.hidden=true" hidden>Home</a></li>
</ul>
 

Estaria bien no?