buen dia, no se si mi pregunta es obvia o no pero no se por que al abrir el menu desplegsable, y seleccionar la seccion deseada, el boton funciona y cambia la pantalla a la pagina que se indica pero no se cierra automaticamente, el usuario debe clickear "X" para que se cierre el menu ( lo que es realmente molesto a la hora de navegar) gracias por el aporte!
Sofia Salinas
<nav id="ioMenu">
<figure id="showMenu" class="ioMenuMovil" onClick="displayMenu()"><img src="imagenes/menu.png" alt="menu"></figure>
<div id="cardMenu">
<figure id="hideMenu" class="ioMenuMovil exit" onClick="displayMenu()"><img src="imagenes/exit.png" alt="exit"></figure>
<figure id="logoMenu"><img src="imagenes/Logo.png" alt="logo diseñadora"></figure>
<ul>
<li><a onClick="navSection('home')" href="#">Home</a></li>
<li><a onClick="navSection('sobreMi')" href="#">Sobre mi</a></li>
<li><a onClick="navSection('servicios')" href="#">Servicios</a></li>
<li><a onClick="navSection('portafolio')" href="#">Portafolio</a></li>
<li><a onClick="navSection('blog')" href="#">Blog</a></li>
<li><a onClick="displayFormContact('block')" href="#">Contacto</a></li>
</ul>
</div>
</nav>
<div class="flecha prev" id="prev_section" onClick=displaySection('prev')></div>
<div class="flecha next" id="next_section" onClick=displaySection('next')></div>
</header>
</html>
<style>
/*----------------------------MENU--------------*/
nav .ioMenuMovil{
width: 150px;
height:30px;
margin: 0 0 0 8px;
overflow: hidden;
padding: 0;
position: absolute;
top: 2px;
display: inline-block;
cursor: pointer;
}
nav .ioMenuMovil img{
height: 75%;
padding-top: 4px;
}
/*-----------------TARJETA EXIT------------------*/
nav #cardMenu{
background: #FFF;
width: 78%;
max-width: 250px;
height: 82vh;
position: absolute;
top: 0;
border-right: 3px solid #A7A7A7;
border-bottom: 3px solid #A7A7A7;
display: none;
z-index: 999;
}
nav #cardMenu #hideMenu img{
height: 24px;
}
nav #cardMenu #logoMenu img{
width: 80%;
position: absolute;
top: 70px;
left: 10%;
}
nav #cardMenu ul{
position: absolute;
margin-left: 20%;
top: 270px;
}
nav #cardMenu ul li{
list-style: none;
margin: 10px 0;
}
nav #cardMenu ul li a{
text-decoration: none;
color: #605F5F;
font-size: 1.5em;
padding: 5px 20px 5px 5px;
}
</style>
<script>
var sections = new Array(5);
sections [0] = "home";
sections [1] = "sobreMi";
sections [2] = "servicios";
sections [3] = "portafolio";
sections [4] = "blog";
function displayMenu() {
var display;
var cardMenu = document.getElementById("cardMenu");
display = cardMenu.style.display;
if(display == "none"){
cardMenu.style.display = "block";
}
else{
cardMenu.style.display = "none";
}
}
function displaySection(nav){
var search;
var show;
for (var i=0; i<5; i++){
search = document.getElementById(sections[i]);
show = search.style.display;
if (show == "block"){
search.style.display = "none";
if (nav == "next"){
i++;
if(i>4) i=0;
}
if (nav == "prev"){
i--;
if(i<0) i=4;
}
search = document.getElementById(sections[i]);
search.style.display = "block";
setColor(i);
break;
}
}
}
function navSection(nav){
var search;
for (var i = 0; i < 5; i++) {
search = document.getElementById(sections[i]);
search.style.display = "none";
if(sections[i] == nav){
search.style.display = "block";
setColor(i);
}
}
!(https://1drv.ms/u/s!AhtaU0NLGYNthDPuhG03b8FgxA05) !(https://1drv.ms/u/s!AhtaU0NLGYNthDSkkuacfEosZ6Oy)
no se si podran ver la foto, soy nueva en el foro