1

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

3
  • 1
    Hola @Fernanda, perdona no se si eres nueva en el sitio, si es así bienvenida, te invito a que leas como preguntar, esto ayudara a que tus preguntas sean bien recibidas, lee el recorrido para que tengas una mejor idea de como funciona el sitio. Por ejemplo en tu pregunta no se entiende cual es el tema, es un menú en javascript, pero cual es el problema?, que has intentado?, hay algún error en tu codificación?, de que hablamos?, redacta mejor tu pregunta y muéstranos para ayudarte. Commented el 11 may. 2018 a las 19:35
  • 1
    si, soy nueva...y se nota mucho, no? jaja. ahi agregue el codigo y 2 fotos para que se orienten un poco sobre el problema
    – Fernanda
    Commented el 11 may. 2018 a las 19:48
  • Podrías ponerlo en un codepen.io para verlo funcionando?. Así sería más facil brindarte ayuda Commented el 11 may. 2018 a las 20:19

1 respuesta 1

0

A primera vista lo que te diría que hicieras es dejar la funcion navSection() así

function navSection(nav){
var search;
document.getElementById("cardMenu").style.display = "none";
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);
}
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.