Good morning, I don't know if my question is obvious or not, but I don't know why when opening the drop-down menu, and selecting the desired section, the button works and changes the screen to the page that is indicated, but it does not close automatically, the user you must click "X" to close the menu (which is really annoying when browsing) thanks for the contribution!

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 )

I don't know if you can see the photo, I'm new to the forum