Saludos.
Estoy tratando de hacer un menú desplegable con submenús que se desplieguen cuando se hace click. Yo pensaba que la orden "onclick" era en caso de que el usuario haga click, pero el menú se despliega sin hacer click, directamente aparece al cargar la página.
El código html resumido es:
Código:
<head>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">window.onload=inicia;</script>
</head>
<body>
<nav id="elnav">
<button id="men1" class="btn" type="button">Menú 1 <span class="flecha"></span></button>
</nav>
<div id="submenus">
<ul id="submenu1" class="lasul">
<li class="lasli"><a href="#">Submenú 1</a></li>
<li class="lasli"><a href="#">Submenú 2</a></li>
<li class="lasli"><a href="#">Submenú 3</a></li>
</ul>
</div>
</body>
Y el script "script.js" (también resumido):
Código:
var estado1 = false;
function inicia(){
elbut = document.getElementById(men1);
elbut.style.cursor = 'all-scroll';
elbut.onclick = mostrar();
}
function mostrar(){
var elsubmen = document.getElementById(submenu1);
if(estado1 == false){
elsubmen.style.display = 'block';
estado1 = true;
}else{
elsubmen.style.display = 'none';
estado1 = false;
}
}
El estilo (por si tuviera algo que var en mi problema) es:
Código:
.btn{
width: 95px;
height: 35px;
background-color: #cc0066;
border-radius: 0px;
border: 0px solid;
-moz-appearance: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-weight: bold;
color: #fff;
display: inline-block;
}
.flecha{
width: 0;
height: 0;
border-top: 10px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
float: right;
margin: 4px;
}
.lasul{
position: fixed;
margin: 0;
padding: 0;
display: none;
}
Mi construcción mental (dado los resultados es deconstrucción) es:
Cuando cargue la página inicia las cosas. Las cosas son: si el usuario hace click, enseña el submenú si vuelve a hacer click ocúltalo.
Pero el submenu aparece al cargar la página sin necesidad de hacer click.
He pensado que el elemento al ser un botón a lo mejor es autónomo. Lo he cambiado a <div> pero da igual.