TapTap: A Super Customizable WordPress Mobile Menu

TapTap: A Super Customizable WordPress Mobile Menu

TapTap 5

Con TapTap, nos propusimos crear un Complemento de menú fácil de personalizar, móvil primero, fuera del lienzo para WordPress eso sería lo suficientemente versátil como para ser usado literalmente en cualquier sitio.

Ya sea una cartera de creatividades o un sitio corporativo, mezclar y combinar fuentes, tamaños de fuente, íconos, espaciado entre letras, colores, posiciones de botones y logotipos, fondos, alineaciones, velocidades de animación, etc. le permiten crear rápidamente un menú que es exclusivamente suyo. Olvídate de los diseños predeterminados y crea el menú móvil que quieras. Obtenga una vista previa de los cambios que realice en tiempo real y personalice su nuevo menú más rápido y fácil que nunca.

Para obtener toda la información sobre TapTap, lea la lista de características a continuación y eche un vistazo a los ejemplos en vivo. en el sitio de demostración aquí.

¡PD! TapTap está disponible con un descuento en el Paquete de menú móvil de WordPress.

Lista completa de funciones de TapTap:

TapTap es muy personalizable y, con mucho, el menú móvil de WordPress más versátil disponible en cualquier lugar. Para familiarizarse con todo lo que puede editar, agregar y personalizar, eche un vistazo a los detalles completos sobre las posibilidades casi infinitas de TapTap a continuación:

Botón de menú

  • Coloque el botón de menú hacia la izquierda o hacia la derecha, luego ajuste la distancia superior / lateral con precisión por píxel
  • 6 estilos diferentes de botones de menú
    • Cada estilo tiene variaciones regulares y delgadas (12 diseños en total)
    • Cada botón tiene dos animaciones diferentes (o ninguna animación)
    • Establecer velocidad de animación personalizada
    • Establecer la opacidad del botón
    • Color personalizado, color de desplazamiento (+ colores cuando el menú está activo)
  • Agregar etiqueta al botón de menú
    • Ingrese el texto de la etiqueta personalizada
    • Etiqueta secundaria disponible (se mostrará cuando se abre el menú)
    • Coloque la etiqueta en cualquier lugar alrededor del botón con precisión por píxel
    • Establecer tamaño de fuente personalizado
    • Establecer espaciado de letras personalizado
    • Seleccione la fuente de la etiqueta (12 opciones disponibles, o use una fuente de tema)
    • Si el botón de menú está oculto, la etiqueta permanecerá visible (si se ingresa uno) y se puede usar para activar el menú
    • Personalizar color de etiqueta, color de desplazamiento
  • Opcionalmente, oculte el botón de menú (útil si desea utilizar un elemento personalizado para activar el menú)

Colocación del logo

  • Coloque el logotipo a la izquierda, centro o derecha, luego ajuste la distancia superior / lateral con precisión por píxel
  • Si el logotipo ingresó como texto:
    • Establecer tamaño de fuente personalizado
    • Establecer espaciado de letras personalizado
    • Seleccione la fuente del logotipo (12 opciones disponibles, o use una fuente de tema)
    • Personaliza el color, pasa el color
  • Si el logotipo ingresó como una imagen:
    • Establecer tamaño de imagen de logotipo personalizado
  • Opcionalmente, oculta la ubicación del logotipo

Botón de búsqueda

  • Coloque el botón de búsqueda hacia la izquierda o hacia la derecha, luego ajuste la distancia superior / lateral con precisión por píxel
  • Variaciones de botón de búsqueda regulares y delgadas
  • Opcionalmente, voltee el botón de búsqueda para variaciones adicionales
  • Personaliza el color, pasa el color
  • Agregar etiqueta al botón de búsqueda
    • Ingrese el texto de la etiqueta personalizada
    • Coloque la etiqueta en cualquier lugar alrededor del botón con precisión por píxel
    • Establecer tamaño de fuente personalizado
    • Establecer espaciado de letras personalizado
    • Seleccione la fuente de la etiqueta (12 opciones disponibles, o use una fuente de tema)
    • Si el botón de búsqueda está oculto, la etiqueta permanecerá visible (si se ingresa una) y se puede usar para activar la función de búsqueda
    • Personalizar color de etiqueta, color de desplazamiento
  • Opcionalmente, oculte el botón de búsqueda (y la función junto con él)

Buscando función

  • Establecer velocidad de animación de apariencia personalizada
  • Campo de búsqueda:
    • Establecer texto de marcador de posición de campo de búsqueda personalizado
    • Personaliza la altura del campo de búsqueda
    • Para soporte RTL, alinee el texto del campo de búsqueda a la derecha
    • Ocultar la opción «borrar campo»
    • Establecer tamaño de fuente personalizado
    • Establecer espaciado de letras personalizado
    • Seleccione la fuente de la etiqueta (12 opciones disponibles, o use una fuente de tema)
    • Cambiar la opacidad del fondo del campo de búsqueda
    • Personalice los colores del fondo del campo de búsqueda, el marcador de posición y el texto de búsqueda, los botones de cerrar y «borrar campo»
  • Establecer la opacidad y el color de la superposición de fondo

Encabezamiento

  • Mostrar / ocultar encabezado
  • Establecer altura de encabezado personalizada
  • Cambiar el color de fondo del encabezado
  • Cambiar la opacidad del fondo del encabezado
  • Mostrar / ocultar sombra de fondo del encabezado (+ establecer intensidad de sombra)

Contenedor de menú, menú, widgets, etc.

  • General:
    • Muestra el menú desplegable como pantalla completa o establece el ancho / alto personalizado
      • La altura se aplica cuando el menú está configurado para animar desde arriba / abajo.
      • El ancho se aplica cuando el menú está configurado para animar de izquierda / derecha.
    • Configure el menú para que aparezca desvaneciéndose o deslizándose desde la izquierda, derecha, arriba o abajo
    • Establecer la velocidad de apariencia del menú personalizado
    • Opcionalmente, muestre el submenú cuando esté actualizado (tenga los menús abiertos cuando esté en el elemento del menú actual)
    • Opcionalmente, cierre el menú después de hacer clic en el elemento del menú (útil en sitios web de una página)
    • Alinee el contenido del menú a la izquierda / centro / derecha y arriba / medio / abajo
    • Dar contenido dentro del contenedor del menú ancho máximo
    • Alterar el contenido del menú y la animación de escala de fondo (cualquier nivel de escala, positivo o negativo, o desactivar por completo).
    • Establecer contenedor de menú de relleno izquierdo, derecho, superior e inferior personalizado
    • Si está en el escritorio, presionar el botón ESC cierra el menú y busca
    • Cambiar el color y la opacidad de la superposición del fondo del menú
  • Antecedentes:
    • Agregar imagen de fondo o patrón
    • Cambiar el posicionamiento de la imagen de fondo
    • Cambiar la opacidad de la imagen de fondo
    • Cambiar color de fondo
    • Cambiar la opacidad del color de fondo
    • Cree fondos de color animados y vibrantes (+ cambie la velocidad de animación)
  • Añadir texto de encabezado y subtítulo:
    • Cambiar fuentes (12 opciones disponibles, o usar una fuente de tema)
    • Cambiar tamaños de fuente
    • Cambiar espacios entre letras
    • Cambiar alturas de línea
    • Convierta textos de encabezado en enlaces
  • Añadir imagen de encabezado:
    • Establecer tamaño máximo
    • Convierta la imagen de encabezado en un enlace
    • Establecer márgenes superior e inferior
  • Menú de acordeón:
    • Cree un menú de varios niveles (sin límite de profundidad)
    • Agregar descripciones a elementos de menú de un solo nivel (elementos de menú superiores o inferiores)
    • Establecer espacio vertical entre elementos de menú y descripciones de menú
    • Cambiar fuentes (12 opciones disponibles, o usar una fuente de tema)
    • Cambiar tamaños de fuente
    • Cambiar espacios entre letras
    • Cambiar alturas de línea
    • Cambiar todos los colores
    • Todas las opciones de fuente se pueden configurar individualmente para elementos de nivel superior y subnivel, así como descripciones de menú
    • Agregar iconos a los elementos del menú:
      • 600+ iconos disponibles
      • Cambiar el tamaño del icono (por separado para elementos de nivel superior y submenú)
      • Cambiar el color del icono (por separado para elementos de nivel superior y submenú)
  • Barra de desplazamiento con estilo personalizable:
    • Personaliza los colores de la barra de desplazamiento
    • Personalizar el grosor de la barra de desplazamiento
    • Personalizar la distancia de la barra de desplazamiento desde los lados
    • Personalizar la redondez de la esquina de la barra de desplazamiento
    • Mostrar la barra de desplazamiento siempre o solo al pasar el mouse
    • Si la barra de desplazamiento con estilo está habilitada, se mostrará solo en el escritorio. En dispositivos móviles, se utiliza el comportamiento de desplazamiento nativo del dispositivo.
  • Efectos de animación de contenido (aplicados al contenido seleccionado cuando el menú se abre / cierra):
    • Escalada
    • Opacidad
    • Difuminar
  • Ubicaciones de widgets:
    • Ubicaciones de widgets arriba y abajo del menú
    • El widget de texto acepta códigos cortos
    • Seleccione fuentes (12 opciones disponibles, o use una fuente de tema)
    • Establecer tamaños de fuente personalizados
    • Establecer espaciado de letras personalizado
    • Establecer alturas de línea personalizadas
    • Cambiar colores (títulos, contenido, enlaces)
    • Establecer configuraciones de fuente individualmente para títulos y contenido de widgets

Misceláneos

  • Mostrar / ocultar en resoluciones especificadas (mostrar en el móvil y ocultar en el escritorio, o viceversa)
  • Ocultar completamente en publicaciones / páginas especificadas
  • Opción de «encabezado inteligente» (los elementos del encabezado se deslizan fuera de la vista cuando el sitio se desplaza hacia abajo, se deslizan hacia la vista cuando se desplaza hacia arriba).
  • Ocultar menú temático, logotipo, etc. cuando TapTap está activo, por la clase / ID de los elementos del tema
  • Opcionalmente, bloquee el desplazamiento del cuerpo cuando se abre el menú
  • Se incluyen una docena de variaciones de fuente cuidadosamente seleccionadas (o usa tus fuentes de tema)
  • Abrir submenús desde el indicador de flecha o el elemento completo del menú de nivel superior
  • Opcionalmente tiene TapTap abrir por defecto en la portada
  • Alternar el menú a través de un elemento personalizado, a través de una clase activadora
  • Mostrar el botón alternativo para cerrar el menú. Las opciones disponibles incluyen posicionamiento izquierdo / derecho y ajuste de posición, posicionamiento fijo o absoluto, una animación de desplazamiento opcional, ajustes de color y grosor.
  • Soporte RTL
  • WordPress compatible con múltiples sitios
  • Posicionamiento absoluto / fijo
  • Haga que el logotipo, la búsqueda y el encabezado aparezcan encima o debajo del menú
  • Opcionalmente, no cargue el conjunto de iconos FontAwesome (útil si no usa iconos en su menú o si algo en su instalación ya carga este conjunto de iconos ampliamente utilizado)
  • Opcionalmente, desactive el soporte de retina (en caso de que no utilice las posibilidades de imagen en el complemento)

Menú experimental basado en imágenes

Tenga en cuenta: cuando se utiliza, el diseño del menú basado en imágenes se puede utilizar tanto en lugar de como además del menú principal. El menú basado en imágenes tiene su propio conjunto de configuraciones que no se aplican al menú principal y viceversa.

  • Cambiar todos los colores
  • Cambiar el origen y / o la opacidad de la animación de apariencia
  • Cambiar espacios de bloques de imagen
  • Cambiar redondez de esquina
  • Admite hasta nueve elementos de nivel superior y submenús ilimitados.
  • Cargue las imágenes principales y cambie otras configuraciones en la sección «Menú basado en imágenes»

Registro de cambios

Update 5.1
- Added alternate menu button label option (will be shown when menu is opened)
- Added option to apply menu content scaling animation to the menu background as well
- Menu item descriptions can now be displayed either above or below menu items
- Added appearance animation origin/opacity and spacing options to new experimental layout

Update 5.0
- Added new experimental image-based menu design which can be used instead of or in addition to the main dropdown menu. The new menu has its own menu location (TapTap: Image-Based Menu) and customization section in the Customizer (TapTap Plugin > Image-based Menu)
- Added optional stand-alone close button (useful in cases where a custom element is used to activate the menu while TapTap's own menu button is hidden)

Actualizaciones anteriores

- added options to apply additional appearance animation to menu items
- added option to display secondary logo when menu is opened (useful if for example you'd like to show a light logo when the menu is closed but a dark one when the menu is opened)
- it is now possible to add a background image to the header (either as full image or pattern), as well as control the background image opacity for see-through effect
- added another widget area; there are now widget areas above as well as below the menu
- added option to hide menu button label when menu opened
Added content animation options. When menu is opened, it is now possible to add and freely adjust the following animation effects for specified site content:
- Scaling
- Opacity
- Blur (done via CSS3, can be disabled for non-touch devices due to possible rendering issues in some versions of Chrome)
- Added option to lock body scroll when menu is opened.
- TapTap is no longer just a full-screen menu; width and height of the menu fly-out can now be customized.
- Added optional 'smart header' option. When enabled, header elements will slide out of view when scrolled down and slide back into view when scrolled up (see example #6 on demo site).
- Added option to hide TapTap on specified posts/pages
- Added option for pulsating background color (view example #5 on demo site)
- Added option to change pulsating background color animation speed
- Added option to change heading image maximum width
- Updated icon set to latest version
- Added optional, heavily customizable styled scrollbar (If enabled, displayed on desktop only. On mobile, the device's native scroll behavior is used)
--- Customize scrollbar colors
--- Customize scrollbar thickness
--- Customize scrollbar distance from the sides
--- Customize scrollbar corner roundness
--- Show the scrollbar always or only on mouseover
- Added scaling options to menu appearance. You can now enter any level of scaling you'd like or disable the scaling animation altogether
- It is now possible to toggle the menu via a custom element, via an activator class (details in the documentation)
- Fixed search overlay issue which appeared on super high resolutions
- You can now preview any changes you make in real-time (settings are under "Appearance → Customize → TapTap Plugin")  
- The menu button, logo and search button can now each be individually positioned, allowing you to create any header layout you'd like
- You can now set custom height for the header
- Expanded upon the logo area
--- Customize logo image size
--- If logo is entered as text, select from different fonts (or use a font included in your theme), change font size and letter spacing
- You can now add fully customizable labels to the menu and search buttons
--- Position label anywhere around the button
--- It's also possible to hide either button (label will remain visible if one has been entered)
--- Select label font (or use a theme font), font size, letter spacing
--- Customize colors
--- Optionally hide menu label when menu is opened
- Redesigned menu buttons and re-did button animations
--- There are now 6 different menu button styles
--- Each style has regular and thin options (12 designs total)
--- Each button style has 2 different animation options (or no animation at all)
- Redesigned search icon
--- Search icon now has thin and regular variations
--- Search icon can be flipped for additional variations
- Rebuilt the search function
--- Added 'clear field' option to search field (can be disabled)
--- Height of search field can now be customized
--- Appearance speed of search field is now customizable
--- Opacity of search field is now customizable
--- For RTL support, search field text can be aligned right
--- Change the search field's font (or use a theme font), font size and letter spacing
--- Added overlay when search field open (change color, opacity)
- Rebuilt the submenu indicator arrow
--- Instead of just rotating, the submenu indicator arrow now animates beautifully
--- The arrow and its hit area are now larger for more comfortable use
- Updated retina.js
--- The inclusion now specifically only targets the logo and heading images
--- Added option to disable retina image support
- Added option to show submenu when current (have menus open when on current menu item)
- Added scaling animation to content inside the fullscreen menu
- Added setting to control menu appearance speed
- Added background overlay with customizable color and opacity
- Added options to set top and bottom margin to heading image
- Added option to set maximum width to the content inside the menu container
- Added individual left, right and bottom padding settings to menu container (only top padding setting existed previously)
- Submenu items and menu descriptions now have their own letter spacing options (instead of inheriting it from top-level menu items)
- Widened font selection to a dozen
- Pressing ESC button now also closes search
- The submenu indicator arrow divider is now shown and hidden automatically depending on whether the "Alternate submenu activation" option is active or not (this setting chooses if a submenu is triggered by the entire menu item or the arrow indicator only)
- Updated how GoogleFonts are enqueued
- Updated FontAwesome icon set to latest version
- Updated retina.js inclusion
- added retina logo support
- added option to show shadow behind header (+ option to customize the shadow strength)
- added new menu button, search button and logo positioning options (Upon customer requests, logo can now be centered and menu and search buttons can individually appear on either left or right sides)
- added 2 new menu button styles
- users can now control menu button animation speed
- added option to use full top-level menu item (text + arrow icon) to open sub-menus, instead of just the arrow icon
- updated icon set to latest version
- added widget location (with customizable options+colors, text widget accepts shortcodes)
- added option to turn heading image into a link (+option to open in new window/tab)
- added option to display header and search when menu is open (by default they get hidden behind the full-screen menu)
- added option to change menu contents' top distance
- updated icon set to latest version
- the default "type search term.." text can now be customized
- added advanced feature: theme menu can now be hidden when TapTap is active, given that the user knows the class/ID of the theme menu
- removed empty space from bottom of the screen that could momentarily appear when scrolling on certain touch device browsers
- changing vertical align for sub-menus now plays with bottom margin instead of top margin, making for a more consistent overall appearance
- added option to open the menu by default on the front page
- colors for active menu item can now be customized
- Added a third menu button style (static SVG)
- 500+ icons can now be added to menu (colors+size adjustments also available)
- Added option to close menu when menu item is clicked/tapped (useful on one-page websites where menu links lead to anchors instead of new pages).
- Added option to customize menu button hover color when menu is active
- Heading and sub-heading texts can now optionally be turned into links
- Added options to customize line heights for heading and sub-heading (useful when your (sub-)heading text spans multiple lines)
- Added second menu button style (a more traditional, three-bar hamburger menu)
- Added option to change active menu button color
- Menu and sub-menu item font sizes and line heights can now be changed separately
- You can now add customizable descriptions to single-level menu items (documentation updated accordingly)
- Added quick links to settings page for easier navigation
- Added search feature (optional)
- Added positioning options for background image
- menu can now be closed by pressing the ESC key


Fuente

TapTap: A Super Customizable WordPress Mobile Menu

TapTap: A Super Customizable WordPress Mobile Menu

Precio: $26

Añadido a Resourceswp: junio 8, 2020

Categorías: ,

O si lo prefieres, podemos crear tu página web desde 0 con Elementor 2 Pro (Incluido) por un módico precio.

También te puede interesar

es_ESEspañol
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Ver Política de cookies
Privacidad