es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrar la lista en la página o en el menú del cajón según el ancho de la pantalla.

12 Jul, 2023 Programación

Tengo un menú que se muestra como un menú hamburguesa/cajón cuando el ancho de pantalla es menor que una cierta cantidad y estoy usando react-spring para deslizar ese menú en pantalla cuando se hace clic en el “icono hamburguesa”. Mi problema es que

    está dentro de ese de react-spring, por lo que cuando el tamaño de pantalla es más ancho y el menú hamburguesa/cajón está oculto,

      con los elementos de la lista también se ocultan, lo cual no quiero. Quiero que el menú se muestre normalmente en la página (sin un cajón) cuando la pantalla es más ancha. ¿Hay alguna forma de lograr esto sin tener que crear dos

        ‘s con los mismos

      • ‘s dos veces, uno dentro del que se muestra en un menú de cajón en pantallas más estrechas y otro que se muestra en la página en pantallas más anchas?

        React.js/JSX:

        return (
    //El estado de menuVisible comienza como falso
    <fontawesomeicon classname="menuBarIcon" icon="{faBars}" onclick="{()" ==""> setMenuVisible(!menuVisible)}/>
    {menuTransitions(
      (styles, item) => item &&
      <animated.div style="{styles}" classname="menu">
        <ul>
          <li><a>Elemento de menú uno</a></li>
          <li><a>Elemento de menú dos</a></li>
          <li><a>Elemento de menú tres</a></li>
          <li><a>Elemento de menú cuatro</a></li>
          <li><a>Elemento de menú cinco</a></li>
        </ul>
      </animated.div>
    )}
);

        CSS:

        “`css
        /* Pantallas más anchas */
        .menuBarIcon {
        display: none;
        }

        @media (max-width: 1080px) {
        /* Pantallas más estrechas */
        .menuBarIcon {
        display: inline;
        float: right;
        padding: 10px;
        margin: 25px;
        }

        .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        height: 100%;
        }
        }
        “`

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una forma de lograr mostrar el menú de forma normal en la página sin un cajón en pantallas más anchas, manteniendo el mismo <ul> con los mismos <li>, es renderizar condicionalmente el <ul> dentro del <animated.div> solo cuando el menú es visible o el ancho de pantalla es lo suficientemente pequeño para mostrar el menú del cajón. Para hacer esto, puedes verificar si el estado de menuVisible es verdadero o si el ancho de pantalla es menor o igual a 1080px (el ancho máximo para el menú del cajón) antes de renderizar el <ul> dentro del <animated.div>. Si el ancho de pantalla es mayor a 1080px y el estado de menuVisible es falso, renderiza el <ul> de forma normal sin el <animated.div>.

    React.js/JSX Actualizado:

    const isMenuVisible = menuVisible || window.innerWidth <= 1080; //verificar si el menú debe ser visible

return (
  //El estado de menuVisible comienza como falso
  <fontawesomeicon classname="menuBarIcon" icon="{faBars}" onclick="{()" ==""> setMenuVisible(!menuVisible)}/>

  {isMenuVisible && (
    menuTransitions(
      (styles, item) => item &&
      <animated.div style="{styles}" classname="menu">
        <ul>
          <li><a>Elemento del menú uno</a></li>
          <li><a>Elemento del menú dos</a></li>
          <li><a>Elemento del menú tres</a></li>
          <li><a>Elemento del menú cuatro</a></li>
          <li><a>Elemento del menú cinco</a></li>
        </ul>
      </animated.div>
    )
  )}

  {!isMenuVisible && ( //Renderizar <ul> de forma normal
    <ul>
      <li><a>Elemento del menú uno</a></li>
      <li><a>Elemento del menú dos</a></li>
      <li><a>Elemento del menú tres</a></li>
      <li><a>Elemento del menú cuatro</a></li>
      <li><a>Elemento del menú cinco</a></li>
    </ul>
  ))}
);

    CSS:

    “`css
    .menuBarIcon {
    display: none;
    }

    @media (max-width: 1080px) {
    .menuBarIcon {
    display: inline;
    float: right;
    padding: 10px;
    margin: 25px;
    }

    .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100%;
    }
    }
    “`</animated.div></animated.div></animated.div>

Comments are closed.