TapTap: A Super Customizable WordPress Mobile Menu

We embarked on a mission with TapTap: to craft a WordPress plugin for mobile-first, responsive, off-canvas menus that’s effortlessly customizable. Our aim was to make it adaptable for use on any website, whether it’s a creative portfolio or a corporate platform.

Ditch the constraints of pre-made layouts. With TapTap, you have the power to mix and match fonts, font sizes, icons, letter spacing, colors, button and logo placements, backgrounds, alignments, animation speeds, and more. This means you can swiftly create a responsive menu that’s entirely your own. Say goodbye to predefined designs, and say hello to building the mobile menu you envision. Preview your changes in real-time, and streamline the customization process like never before.

Features:

Menu Button:

• Position the menu button on the left or right, with pixel-perfect control over top and side distances.
• Choose between click/tap or mouseover to open the menu.
• Enjoy six distinct menu button styles, each with regular and thin variations (12 designs in total).
• Each button boasts two different animations (or none at all), with customizable animation speeds.
• Adjust button opacity and customize colors, including hover and active states.
• Add a label to the menu button with complete control over text, position, font size, letter spacing, and font selection.
• If the menu button is hidden, the label remains visible and can activate the menu.
• Customize label colors for both normal and hover states.
• Optionally hide the menu button to use a custom element for menu activation.

Logo Placement:

• Place your logo on the left, center, or right, fine-tuning its position with pixel-level precision.
• Customize font size, letter spacing, and font selection if the logo is text-based.
• Adjust logo color and hover color.
• Control logo size if it’s an image.
• Optionally hide the logo placement.

WooCommerce Cart Button:

• Position the WooCommerce button on the left or right, with detailed control over top and side distances.
• Choose from different cart and shopping bag icon variations.
• Customize colors and hover color for the cart button.

Search Button:

• Position the search button on the left or right, with fine-tuned control over top and side distances.
• Select from regular and thin search button variations.
• Optionally flip the search button for additional styles.
• Customize colors and hover color.
• Add a label to the search button with full control over text, position, font size, letter spacing, and font selection.
• If the search button is hidden, the label remains visible and can activate the search function.
• Customize label colors for normal and hover states.
• Optionally hide the search button and its function.

Search Function:

• Set the appearance animation speed.
• Customize the search field, including placeholder text, height, text alignment for RTL support, and the option to hide the ‘clear field’ button.
• Adjust font size, letter spacing, and font selection for labels.
• Customize search field background opacity and colors for background, placeholder, search text, close, and ‘clear field’ buttons.
• Set background overlay opacity and color.

Header:

• Show or hide the header.
• Set a custom header height.
• Change the header background color and opacity.
• Add a shadow to the header background and control its strength.

Menu Container, Menu, Widgets, etc.: General:

• Choose to display the menu fly-out as full-screen or set a custom width and height.
• Define menu appearance animations (fade in or slide from left, right, top, or bottom) and their speed.
• Show submenus when the current menu item is selected.
• Optionally close the menu after clicking on a menu item.
• Align menu contents left, center, or right, as well as top, middle, or bottom.
• Set maximum width for content inside the menu container.
• Customize padding for the menu container.
• Use the ESC button to close the menu on desktop.
• Modify the menu background overlay color and opacity.

Background:

• Add background images or patterns.
• Adjust corner roundness and distance from screen edges.
• Set background image positioning and opacity.
• Customize background color and its opacity.
• Create animated, pulsating, or gradient color backgrounds with adjustable animation speed.
• Add heading and subheading texts with font, size, letter spacing, line height, and link options.
• Add heading images with maximum size, margin settings, and the ability to turn them into links.
• Build multi-level accordion menus with descriptions for single-level menu items.
• Customize vertical spacing between menu items and menu descriptions.
• Choose fonts, font sizes, letter spacing, line heights, and colors for headings, subheadings, and descriptions.
• Add icons to menu items with a selection of over 600 icons, controlling size and color.
• Customize the scrollbar’s appearance, including colors, thickness, distance from the sides, and corner roundness. The scrollbar is displayed on desktop only when enabled.
• Apply content animation effects when the menu opens or closes, including scaling, movement, opacity, and blur.
• Place widgets above or below the menu, with options to customize fonts, font sizes, letter spacing, line heights, and colors for titles, content, and links.

Miscellaneous:

• Show or hide elements at specified resolutions, making it easy to tailor your menu for different devices.
• Hide the menu entirely on specified posts or pages.
• Enable the ‘Smart header’ option, which hides header elements when the site is scrolled down and brings them back when scrolled up.
• Hide theme elements like the menu and logo when TapTap is active, based on class/ID settings.
• Optionally lock body scroll when the menu is opened.
• Access a selection of carefully chosen font variations or use your theme fonts.
• Choose whether submenus open from an arrow indicator or the full top-level menu item.
• Set TapTap to open by default on the front page.
• Toggle the menu using a custom element or activator class.
• Display an alternate close menu button with various positioning options, fixed or absolute positioning, hover animation, and customization of color and thickness.
• Enjoy RTL support.
• Compatible with WordPress multisite.
• Absolute and fixed positioning options.
• Configure the placement of the logo, search, and header above or below the menu.
• Optionally disable the loading of Font Awesome and/or Line Awesome icon sets.
• Optionally disable retina support if you don’t use image possibilities in the plugin.

Horizontal Menu:

• The horizontal menu comes with its own set of independent settings.
• Add section titles.
• Adjust font and icon sizes.
• Customize colors for various elements.