{"id":124699,"date":"2019-01-02T18:01:34","date_gmt":"2019-01-02T17:01:34","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-conditional-menu\/"},"modified":"2025-02-03T16:45:13","modified_gmt":"2025-02-03T15:45:13","slug":"create-a-conditional-menu","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/crear-un-menu-condicional","title":{"rendered":"Crear un men\u00fa condicional"},"content":{"rendered":"<p>Los men\u00fas condicionales s\u00f3lo mostrar\u00e1n determinadas partes del men\u00fa en funci\u00f3n del tama\u00f1o de la pantalla. Esto te permite ocultar elementos que no son tan importantes cuando el tama\u00f1o de la pantalla es peque\u00f1o, y mostrar m\u00e1s elementos cuando el tama\u00f1o de la pantalla es mayor. <video style=\"\" class=\"lazyload\" preload=\"\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\"><source src=\"\" type=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Ejemplo de men\u00fa condicional<\/source><\/video><br \/>\nAqu\u00ed tienes c\u00f3mo crear uno: <\/p>\n<ol>\n<li>Arrastra al Lienzo todos los elementos que quieras incluir en el men\u00fa. En nuestro ejemplo, arrastramos tres widgets Rect\u00e1ngulo y los etiquetamos como \u00abInicio\u00bb, \u00abReg\u00edstrate\u00bb e \u00abIdentif\u00edcate\u00bb. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15174\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/DesignMenu.png\" alt=\"Men\u00fa de dise\u00f1o\" width=\"755\" height=\"450\"><\/li>\n<li>Selecciona los tres pulsando May\u00fasculas y haciendo clic sobre ellos en el lienzo o en la paleta Contorno. A continuaci\u00f3n, haz clic con el bot\u00f3n derecho del rat\u00f3n y, en el cuadro de di\u00e1logo que aparece, haz clic en \u00abAgrupar en panel din\u00e1mico\u00bb. Fija este panel a la derecha con un margen de 40px.\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758255\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>A\u00f1ade otro panel dentro del Panel Din\u00e1mico seleccionando el Panel 1 y haciendo clic en el icono \u00ab+\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15175\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/AddAnotherPanel.png\" alt=\"A\u00f1adir otro panel\" width=\"755\" height=\"394\"><\/li>\n<li>En este panel (Panel 2) arrastra un icono de men\u00fa hamburguesa. El nuestro es de la biblioteca de widgets Web Components. Fija este panel a la derecha con un margen de 20px.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15176\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/MenuIcon.png\" alt=\"Icono del men\u00fa\" width=\"755\" height=\"413\"><\/li>\n<li>Selecciona el Panel Din\u00e1mico en el Lienzo. Crea un evento \u00abAl cambiar el tama\u00f1o de la ventana\u00bb + \u00abEstablecer panel activo\u00bb. Haz que establezca el Panel 2 como activo.\n<div class=\"embed-container\" style=\"padding-bottom:60%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758429\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>Crea una condici\u00f3n para esta acci\u00f3n, de forma que s\u00f3lo active el Panel 2 cuando la pantalla tenga una determinada anchura. Haz clic en el texto \u00abA\u00f1adir condici\u00f3n\u00bb. Aparecer\u00e1 el constructor de Expresiones Condicionales.Sigue estos pasos para crear la condici\u00f3n:\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758599\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><strong>1.<\/strong> En el constructor, haz clic en la pesta\u00f1a \u00abConstantes\u00bb. Arrastra el icono \u00abAncho de ventana\u00bb al espacio abierto en la expresi\u00f3n. <strong>2.<\/strong> Haz clic en la pesta\u00f1a \u00abFunciones\u00bb y en la secci\u00f3n \u00abComparadores\u00bb. Arrastra un icono &#8216;Menor que&#8217; (&#8216;&lt;&#8216;) junto al icono &#8216;Ancho de ventana&#8217;. <strong>3.<\/strong> Por \u00faltimo, en el espacio abierto que aparece junto al icono &#8216;Menor que&#8217; (&#8216;&lt;&#8216;), haz doble clic y escribe 600. <strong>4.<\/strong> Haz clic en Aceptar para terminar de crear la condici\u00f3n. <\/p>\n<\/li>\n<li>Haz clic en el texto \u00abSi no\u00bb, que abrir\u00e1 el cuadro de di\u00e1logo Eventos. Crea un evento \u00abAl Cambiar el Tama\u00f1o de la Ventana\u00bb + \u00abEstablecer Panel Activo\u00bb, y selecciona el Panel 1 como Panel a establecer como activo. Haz clic en Aceptar para terminar de crear el evento. No es necesario crear una condici\u00f3n para este evento.\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758684\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p>Haz clic en \u00abSimular\u00bb y comprueba c\u00f3mo funciona tu men\u00fa condicional.<\/p>\n<div><strong>Nota:<\/strong> La configuraci\u00f3n de la simulaci\u00f3n debe ajustarse para que se expanda a la anchura del navegador. Puedes especificarlo en los ajustes de simulaci\u00f3n o en la ventana de simulaci\u00f3n. <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15298\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/SimulationSetting.png\" alt=\"Ajuste de simulaci\u00f3n\" width=\"755\" height=\"491\"><br \/>\nPuedes <a href=\"https:\/\/s3-eu-west-1.amazonaws.com\/justinmind\/examples\/ConditionalMenu.vp\">descargar nuestro ejemplo aqu\u00ed.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los men\u00fas condicionales s\u00f3lo mostrar\u00e1n determinadas partes del men\u00fa en funci\u00f3n del tama\u00f1o de la pantalla. Esto te permite ocultar elementos que no son tan importantes&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8418,8440],"tags":[],"class_list":["post-124699","post","type-post","status-publish","format-standard","hentry","category-formacion","category-prototipado-responsivo"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124699"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124699"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124699\/revisions"}],"predecessor-version":[{"id":126236,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124699\/revisions\/126236"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}