{"id":124660,"date":"2022-11-16T17:33:30","date_gmt":"2022-11-16T16:33:30","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-custom-menu\/"},"modified":"2025-02-03T16:44:46","modified_gmt":"2025-02-03T15:44:46","slug":"how-to-create-a-custom-menu","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/como-disenar-un-menu-personalizado","title":{"rendered":"C\u00f3mo dise\u00f1ar un men\u00fa personalizado"},"content":{"rendered":"<p><span data-preserver-spaces=\"true\">Aqu\u00ed aprender\u00e1s a dise\u00f1ar un men\u00fa personalizado.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73357737\/index.html\" width=\"820px\" height=\"320px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span data-preserver-spaces=\"true\">As\u00ed es como se construye:<\/span><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">Ver<\/span><\/strong><\/h3>\n<ul>\n<li><span data-preserver-spaces=\"true\">Selecciona una \u00abTabla\u00bb y col\u00f3cala en el lienzo; desde la paleta Propiedades, edita el n\u00famero de columnas y archivos a un archivo y cuatro columnas, adem\u00e1s, ajusta la altura de la tabla para simular una cabecera.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-1.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Selecciona cada celda una a una y en la paleta Propiedades cambia la disposici\u00f3n a \u00abHorizontal\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-2.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Coloca cuatro textos centrados en el lienzo y escribe \u00abInicio\u00bb, \u00abProductos\u00bb, \u00abServicios\u00bb y \u00abAcerca de\u00bb, mant\u00e9n pulsado comando (Mac) o control (Windows), y arrastra los elementos dentro de las celdas, ver\u00e1s un tinte azul.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-3.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Desde la biblioteca \u00abComponentes web\u00bb, introduce un icono \u00abChevron hacia abajo\u00bb junto a \u00abProductos\u00bb, \u00abServicios\u00bb y \u00abAcerca de\u00bb. Al haber dado a cada celda una disposici\u00f3n horizontal, el icono se colocar\u00e1 horizontalmente al texto. En la paleta Propiedades, puedes ajustar el espacio entre el texto y el icono.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-4.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Para las opciones de men\u00fa, coloca una nueva \u00abTabla\u00bb y desde la paleta Propiedades edita las columnas a una y las filas a tres.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-5.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Mant\u00e9n pulsado comando (Mac) o control (Windows) y coloca 3 textos dentro de cada celda para \u00abElemento 1\u00bb, \u00abElemento 2\u00bb y \u00abElemento3\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-6.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Con la \u00abTabla\u00bb seleccionada ve a la paleta Propiedades y cambia el color de todas las opciones de borde a gris claro y desmarca el borde interior que separa las celdas.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-7.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Con la \u00abTabla\u00bb que hemos creado seleccionada, mant\u00e9n pulsada la tecla alt y arrastra para duplicarla, col\u00f3cala debajo de \u00abServicios\u00bb y dupl\u00edcala una vez m\u00e1s para \u00abAcerca de\u00bb. Con la \u00abTabla\u00bb bajo \u00abAcerca de\u00bb seleccionada, ve a la paleta Propiedades y edita el n\u00famero de filas a dos. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-8.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Selecciona una a una las tablas de Elementos, haz clic con el bot\u00f3n derecho del rat\u00f3n sobre ellas y selecciona la opci\u00f3n \u00abAgrupar en Panel Din\u00e1mico\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-9.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Aseg\u00farate de que cada \u00abPanel din\u00e1mico\u00bb sobresale del borde de la tabla que contiene para que los eventos que creemos a continuaci\u00f3n funcionen correctamente.<\/span><\/span><span data-preserver-spaces=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-10.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Selecciona los tres paneles Din\u00e1micos que funcionan como desplegables, ve a la paleta Propiedades y haz clic en el icono \u00abOculto en simulaci\u00f3n\u00bb. Los desplegables no ser\u00e1n visibles en simulaci\u00f3n por defecto.   <\/span><\/span><\/span>\n<p> <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-11.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/p>\n<p> <\/p>\n<p> <\/p>\n<\/li>\n<\/ul>\n<h3>Eventos<\/h3>\n<p><span data-preserver-spaces=\"true\">Con la celda \u00abProductos\u00bb seleccionada, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-12.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abAl entrar el rat\u00f3n\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abMostrar elemento oculto\u00bb y selecciona el \u00abPanel din\u00e1mico\u00bb que act\u00faa como desplegable de la opci\u00f3n \u00abProductos\u00bb. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-13.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Con la celda \u00abProductos\u00bb a\u00fan seleccionada, ve a la paleta Eventos y haz clic en el signo \u00ab+\u00bb para a\u00f1adir un evento.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abAl entrar el rat\u00f3n\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abOcultar elemento\u00bb y selecciona los dos \u00abPaneles din\u00e1micos\u00bb que act\u00faan como desplegables para las opciones \u00abServicios\u00bb y \u00abAcerca de\u00bb. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-14.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">En la paleta Eventos, entre las dos opciones, haz clic en la flecha, y c\u00e1mbiala a la opci\u00f3n \u00abCON anterior\u00bb, para que ambas acciones se realicen a la vez.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-15.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/p>\n<p>Repite los eventos para cada opci\u00f3n del men\u00fa superior, y su correspondiente desplegable. En cada caso, debemos seleccionar el \u00abPanel din\u00e1mico\u00bb que queremos mostrar y los que queremos ocultar. <\/p>\n<p>Selecciona la celda \u00abInicio\u00bb y ve a la paleta Eventos, haz clic en \u00abA\u00f1adir evento\u00bb.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abAl entrar el rat\u00f3n\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abOcultar elemento\u00bb y selecciona los tres \u00abPaneles din\u00e1micos\u00bb de las opciones. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento. <\/span><\/li>\n<\/ol>\n<p>Selecciona los \u00abPaneles din\u00e1micos\u00bb de la opci\u00f3n \u00abProductos\u00bb y ve a la paleta Eventos, haz clic en \u00abA\u00f1adir evento\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-16.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona<span style=\"font-weight: 400;\">\u00abal salir del rat\u00f3n<\/span>\u00ab.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir Acci\u00f3n\u00bb, selecciona \u00abOcultar elemento\u00bb y selecciona el mismo \u00abPanel din\u00e1mico\u00bb, De esta forma, al salir del \u00abPanel din\u00e1mico\u00bb, \u00e9ste ya no se mostrar\u00e1. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-17.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p>Repite el mismo proceso para cada uno de los \u00abPaneles din\u00e1micos\u00bb.<\/p>\n<p>Selecciona la primera celda (Elemento 1) de la columna en el \u00abPanel din\u00e1mico\u00bb de la opci\u00f3n \u00abProductos\u00bb, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-18.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona<span style=\"font-weight: 400;\">\u00abal pasar el rat\u00f3n<\/span>\u00ab.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abCambiar estilo\u00bb y en el men\u00fa desplegable \u00abSeleccionar estilo a cambiar\u00bb elige fondo y edita el color. De esta forma, al pasar el rat\u00f3n por encima del \u00abElemento 1\u00bb, conseguiremos un efecto de retroalimentaci\u00f3n. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-19.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p>Con la celda (Elemento 1) a\u00fan seleccionada, ve a la Paleta de Eventos y haz clic en el bot\u00f3n \u00abCopiar todos los eventos\u00bb. A continuaci\u00f3n, selecciona cada una de las celdas y haz clic en la opci\u00f3n \u00abPegar todos los eventos\u00bb. El objetivo se cambiar\u00e1 autom\u00e1ticamente.  <br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-22.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-22.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-22.png\" alt=\"Creador de expresiones\">Creador de expresiones<\/video><\/p>\n<p>Simula tu prototipo.<\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aqu\u00ed aprender\u00e1s a dise\u00f1ar un men\u00fa personalizado. As\u00ed es como se construye: Ver Selecciona una \u00abTabla\u00bb y col\u00f3cala en el lienzo; desde la paleta Propiedades, edita&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8434,8424],"tags":[],"class_list":["post-124660","post","type-post","status-publish","format-standard","hentry","category-interacciones-avanzadas","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124660"}],"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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124660"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124660\/revisions"}],"predecessor-version":[{"id":126195,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124660\/revisions\/126195"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}