TapTap: A Super Customizable WordPress Mobile Menu

With TapTap, we got down to create an easy-to-customize, responsive, mobile-first, off-canvas menu plugin for WordPress that will be versatile sufficient for use on actually any web site.

Be it a artistic’s portfolio or a company website, mixing and matching fonts, font sizes, icons, letter spacing, colours, button and emblem positions, backgrounds, alignments, animation speeds and many others. permit you to rapidly create a responsive menu that’s uniquely yours. Forget pre-determined layouts and construct the cellular menu you need. Preview any adjustments you make in real-time and customise your new menu sooner and simpler than ever.

To get the total lowdown on TapTap, please have a learn on the options record beneath and do take a look on the dwell examples on the demo site here.

PS! TapTap is offered at a reduction within the WordPress Mobile Menu Bundle.

TapTap full options record:

TapTap is wildly customizable and by far probably the most versatile WordPress cellular menu obtainable anyplace. To get acquainted with every little thing you may edit, add and customise, please take a look on the full particulars on TapTap’s near-endless prospects beneath.

Menu Button

Position menu button left or proper, then fine-tune high/aspect distance with per-pixel accuracy
Open menu by click on/faucet or by mouseover
6 completely different menu button types
- Each model has common and skinny variations (12 designs complete)
- Each button has two completely different animations (or no animation in any respect)
- Set customized animation velocity
- Set button opacity
- Customize shade, hover shade (+ colours when menu energetic)
Add label to menu button
- Enter customized label textual content
- Position label anyplace across the button with per-pixel accuracy
- Set customized font measurement
- Set customized letter spacing
- Select label font (12 choices obtainable, or use a theme font)
- If menu button is hidden, label will stay seen (if one is entered) and can be utilized to activate the menu
- Customize label shade, hover shade
Optionally conceal menu button (helpful should you’d like to make use of a customized ingredient to activate the menu)

Logo Placement

Position emblem left, heart or proper, then fine-tune high/aspect distance with per-pixel accuracy
If emblem entered as textual content:
- Set customized font measurement
- Set customized letter spacing
- Select emblem font (12 choices obtainable, or use a theme font)
- Customize shade, hover shade
If emblem entered as a picture:
- Set customized emblem picture measurement
Optionally conceal emblem placement

WooCommerce Cart Button

Position WooCommerce button left or proper, then fine-tune high/aspect distance with per-pixel accuracy
Cart and procuring bag icon variations
Customize colours, hover shade

Search Button

Position search button left or proper, then fine-tune high/aspect distance with per-pixel accuracy
Regular and skinny search button variations
Optionally flip search button for added variations
Customize shade, hover shade
Add label to go looking button
- Enter customized label textual content
- Position label anyplace across the button with per-pixel accuracy
- Set customized font measurement
- Set customized letter spacing
- Select label font (12 choices obtainable, or use a theme font)
- If search button is hidden, label will stay seen (if one is entered) and can be utilized to activate the search operate
- Customize label shade, hover shade
Optionally conceal search button (and the operate together with it)

Search Function

Set customized look animation velocity
Seach discipline:
- Set customized searchfield placeholder textual content
- Customize search discipline peak
- For RTL help, align searchfield textual content to the suitable
- Hide ‘clear discipline’ possibility
- Set customized font measurement
- Set customized letter spacing
- Select label font (12 choices obtainable, or use a theme font)
- Change search discipline background opacity
- Customize colours of search discipline background, placeholder and search textual content, shut and ‘clear discipline’ buttons
Set background overlay opacity and shade

Header

Show/conceal header
Set customized header peak
Change header background shade
Change header background opacity
Change header background blur (quantity freely controllable)
Show/conceal header background shadow (+ set shadow power)
Add header background picture

General:
- Display menu fly-out as full-screen or set customized width/peak
- Set menu to seem by fading in or sliding from left, proper, high or backside
- Set customized menu look velocity
- Optionally present submenu when present (have menus open when on present menu merchandise)
- Optionally shut menu after clicking on menu merchandise (helpful on one-page web sites)
- Align menu contents left/heart/proper and high/center/backside
- Give content material contained in the menu container most width
- Alter menu contents’ scaling animation (any scaling stage, optimistic or destructive, or disable altogether).
- Set customized left, proper, high and backside padding menu container
- If on desktop, urgent the ESC button closes the menu and search
- Change menu background overlay shade and opacity
Background:
- Add background picture or sample
- Control nook roundness and distance from display edges
- Change background picture positioning
- Change background picture opacity
- Change background shade
- Change background shade opacity
- Create animated, pulsating or gradient shade backgrounds (+ change animation velocity)
Add heading, subheading texts:
- Change fonts (12 choices obtainable, or use a theme font)
- Change font sizes
- Change letter spacings
- Change line heights
- Turn heading texts into hyperlinks
Add heading picture:
- Set most measurement
- Turn heading picture right into a hyperlink
- Set high and backside margins
Accordion menu:
- Build a multi-level menu (no depth restrict)
- Add descriptions to single-level menu objects
- Set vertical spacing between menu objects and menu descriptions
- Change fonts (12 choices obtainable, or use a theme font)
- Change font sizes
- Change letter spacings
- Change line heights
- Change all colours
- All font choices might be set individually for top-level and sublevel objects in addition to menu descriptions
- Add icons to menu objects:
  - 600+ icons obtainable
  - Change icon measurement (individually for top-level and submenu objects)
  - Change icon shade (individually for top-level and submenu objects)
Customizable styled scrollbar:
- Customize scrollbar colours
- Customize scrollbar thickness
- Customize scrollbar distance from the edges
- Customize scrollbar nook roundness
- Show the scrollbar at all times or solely on mouseover
- If styled scrollbar is enabled, will probably be displayed on desktop solely. On cellular, the system’s native scroll habits is used.
Content animation results (utilized to chose content material when menu opens/closes):
- Scaling
- Horizontal/vertical motion
- Opacity
- Blur
Widget areas:
- Widget areas above in addition to beneath the menu
- Text widget accepts shortcodes
- Select fonts (12 choices obtainable, or use a theme font)
- Set customized font sizes
- Set customized letter spacing
- Set customized line heights
- Change colours (titles, content material, hyperlinks)
- Set font settings individually for widget titles and content material

Misc

Show/conceal at specified resolutions (present on cellular and conceal on desktop, or vice versa)
Hide utterly on specified posts/pages
‘Smart header’ possibility (header parts slide out of view when website scrolled down, slide again into view when scrolled up).
Hide theme menu, emblem and many others. when TapTap is energetic, by the category/ID of the theme parts
Optionally lock physique scroll when menu opened
A dozen fastidiously chosen font variations included (or use your theme fonts)
Open submenus from arrow indicator or full top-level menu merchandise
Optionally have TapTap open by default on the entrance web page
Toggle the menu through a customized ingredient, through an activator class
Display alternate shut menu button. Available choices embrace left/proper positioning and place fine-tuning, fastened or absolute positioning, an non-obligatory hover animation, shade and thickness settings.
RTL help
WordPress multisite suitable
Absolute/fastened positioning
Have the emblem, search and header seem above or beneath menu
Optionally don’t load Font Awesome and/or Line Awesome icon units (helpful should you don’t use icons in your menu or if one thing in your set up already hundreds this broadly used icon set)
Optionally disable retina help (in case you don’t make use of the picture prospects within the plugin)

The horizontal menu has its personal set of settings that will probably be developed independently.

Add part titles
Change font/icon sizes
Change all colours

Please word: When made use of, the image-based menu format can be utilized each as an alternative of and along with the principle menu. The image-based menu has its personal set of settings that don’t apply to the principle menu and vice versa.

Change all colours
Change nook roundness
Supports as much as 9 top-level objects and limitless submenus
Upload essential photos and alter different settings within the “Image-based Menu” part

Changelog

Update 5.7
- added choice to blur the content material that scrolls beneath the header (see demo #6 for instance, blur quantity is freely controllable)

Update (no model change)
- Horizontal menu now accepts menu merchandise descriptions

Update 5.6
- Added new web site content material animation possibility: subsequent to scaling, opacity and blur controls, now you can additionally freely slide your web site content material upon menu open/shut (see demo #9 for instance)
- Added choice to unload Google Fonts
- Stay tuned for extra nice updates to TapTap!

Update 5.5
- Added a brand new horizontally opening menu model (please see demo website #9 for a dwell demo)
- Added a model new icon set (Line Awesome) to simply construct your menus with
- Updated Font Awesome to newest model !!! PLEASE NOTE !!! Font Awesome v6 icons are entered a bit in a different way than within the earlier variations. Please test the included TapTap documentation for up to date directions on easy methods to enter icons. Or try and take a look at the newly included secondary icon set for a recent look! 
- Reorganized settings (the vertical, image-based and horizontal menus now every have their very own part with their very own respective settings)

Quick replace (no model change)
- Some JS script and translation string updates

Update 5.4
- Added choice to open the menu by shifting the mouse over the menu button (on contact units, menu nonetheless opens by tapping the menu button even when this selection is enabled).

Update 5.3
Added choices to:
- freely customise nook roundess
- management menu distance from edges
- apply gradient background animation (as much as 3 colours)
See instance #8 on demo website.

Update 5.2
- Added customizable WooCommerce cart icon to the header

Update 5.1
- Added alternate menu button label possibility (will probably be proven when menu is opened)
- Added possibility to use menu content material scaling animation to the menu background as properly
- Menu merchandise descriptions can now be displayed both above or beneath menu objects
- Added look animation origin/opacity and spacing choices to new experimental format

Update 5.0
- Added new experimental image-based menu design which can be utilized as an alternative of or along with the principle dropdown menu. The new menu has its personal menu location (TapTap: Image-Based Menu) and customization part within the Customizer (TapTap Plugin > Image-based Menu)
- Added non-obligatory stand-alone shut button (helpful in circumstances the place a customized ingredient is used to activate the menu whereas TapTap's personal menu button is hidden)

Previous updates

- added choices to use further look animation to menu objects
- added choice to show secondary emblem when menu is opened (helpful if for instance you would like to indicate a light-weight emblem when the menu is closed however a darkish one when the menu is opened)
- it's now doable so as to add a background picture to the header (both as full picture or sample), in addition to management the background picture opacity for see-through impact
- added one other widget space; there at the moment are widget areas above in addition to beneath the menu
- added possibility to cover menu button label when menu opened
Added content material animation choices. When menu is opened, it's now doable so as to add and freely alter the next animation results for specified website content material:
- Scaling
- Opacity
- Blur (finished through CSS3, might be disabled for non-touch units as a consequence of doable rendering points in some variations of Chrome)
- Added choice to lock physique scroll when menu is opened.
- TapTap is now not only a full-screen menu; width and peak of the menu fly-out can now be custom-made.
- Added non-obligatory 'good header' possibility. When enabled, header parts will slide out of view when scrolled down and slide again into view when scrolled up (see instance #6 on demo website).
- Added possibility to cover TapTap on specified posts/pages
- Added possibility for pulsating background shade (view instance #5 on demo website)
- Added possibility to alter pulsating background shade animation velocity
- Added possibility to alter heading picture most width
- Updated icon set to newest model
- Added non-obligatory, closely customizable styled scrollbar (If enabled, displayed on desktop solely. On cellular, the system's native scroll habits is used)
--- Customize scrollbar colours
--- Customize scrollbar thickness
--- Customize scrollbar distance from the edges
--- Customize scrollbar nook roundness
--- Show the scrollbar at all times or solely on mouseover
- Added scaling choices to menu look. You can now enter any stage of scaling you would like or disable the scaling animation altogether
- It is now doable to toggle the menu through a customized ingredient, through an activator class (particulars within the documentation)
- Fixed search overlay situation which appeared on tremendous excessive resolutions
- You can now preview any adjustments you make in real-time (settings are beneath "Appearance → Customize → TapTap Plugin")  
- The menu button, emblem and search button can now every be individually positioned, permitting you to create any header format you would like
- You can now set customized peak for the header
- Expanded upon the emblem space
--- Customize emblem picture measurement
--- If emblem is entered as textual content, choose from completely different fonts (or use a font included in your theme), change font measurement and letter spacing
- You can now add absolutely customizable labels to the menu and search buttons
--- Position label anyplace across the button
--- It's additionally doable to cover both button (label will stay seen if one has been entered)
--- Select label font (or use a theme font), font measurement, letter spacing
--- Customize colours
--- Optionally conceal menu label when menu is opened
- Redesigned menu buttons and re-did button animations
--- There at the moment are 6 completely different menu button types
--- Each model has common and skinny choices (12 designs complete)
--- Each button model has 2 completely different animation choices (or no animation in any respect)
- Redesigned search icon
--- Search icon now has skinny and common variations
--- Search icon might be flipped for added variations
- Rebuilt the search operate
--- Added 'clear discipline' possibility to go looking discipline (might be disabled)
--- Height of search discipline can now be custom-made
--- Appearance velocity of search discipline is now customizable
--- Opacity of search discipline is now customizable
--- For RTL help, search discipline textual content might be aligned proper
--- Change the search discipline's font (or use a theme font), font measurement and letter spacing
--- Added overlay when search discipline open (change shade, opacity)
- Rebuilt the submenu indicator arrow
--- Instead of simply rotating, the submenu indicator arrow now animates superbly
--- The arrow and its hit space at the moment are bigger for extra comfy use
- Updated retina.js
--- The inclusion now particularly solely targets the emblem and heading photos
--- Added choice to disable retina picture help
- Added possibility to indicate submenu when present (have menus open when on present menu merchandise)
- Added scaling animation to content material contained in the fullscreen menu
- Added setting to manage menu look velocity
- Added background overlay with customizable shade and opacity
- Added choices to set high and backside margin to heading picture
- Added choice to set most width to the content material contained in the menu container
- Added particular person left, proper and backside padding settings to menu container (solely high padding setting existed beforehand)
- Submenu objects and menu descriptions now have their very own letter spacing choices (as an alternative of inheriting it from top-level menu objects)
- Widened font choice to a dozen
- Pressing ESC button now additionally closes search
- The submenu indicator arrow divider is now proven and hidden robotically relying on whether or not the "Alternate submenu activation" possibility is energetic or not (this setting chooses if a submenu is triggered by your entire menu merchandise or the arrow indicator solely)
- Updated how GoogleFonts are enqueued
- Updated FontAwesome icon set to newest model
- Updated retina.js inclusion
- added retina emblem help
- added possibility to indicate shadow behind header (+ choice to customise the shadow power)
- added new menu button, search button and emblem positioning choices (Upon buyer requests, emblem can now be centered and menu and search buttons can individually seem on both left or proper sides)
- added 2 new menu button types
- customers can now management menu button animation velocity
- added possibility to make use of full top-level menu merchandise (textual content + arrow icon) to open sub-menus, as an alternative of simply the arrow icon
- up to date icon set to newest model
- added widget location (with customizable choices+colours, textual content widget accepts shortcodes)
- added possibility to show heading picture right into a hyperlink (+choice to open in new window/tab)
- added choice to show header and search when menu is open (by default they get hidden behind the full-screen menu)
- added possibility to alter menu contents' high distance
- up to date icon set to newest model
- the default "sort search time period.." textual content can now be custom-made
- added superior characteristic: theme menu can now be hidden when TapTap is energetic, on condition that the consumer is aware of the category/ID of the theme menu
- eliminated empty house from backside of the display that would momentarily seem when scrolling on sure contact system browsers
- altering vertical align for sub-menus now performs with backside margin as an alternative of high margin, making for a extra constant general look
- added choice to open the menu by default on the entrance web page
- colours for energetic menu merchandise can now be custom-made
- Added a 3rd menu button model (static SVG)
- 500+ icons can now be added to menu (colours+measurement changes additionally obtainable)
- Added possibility to shut menu when menu merchandise is clicked/tapped (helpful on one-page web sites the place menu hyperlinks result in anchors as an alternative of recent pages).
- Added choice to customise menu button hover shade when menu is energetic
- Heading and sub-heading texts can now optionally be become hyperlinks
- Added choices to customise line heights for heading and sub-heading (helpful when your (sub-)heading textual content spans a number of traces)
- Added second menu button model (a extra conventional, three-bar hamburger menu)
- Added possibility to alter energetic menu button shade
- Menu and sub-menu merchandise font sizes and line heights can now be modified individually
- You can now add customizable descriptions to single-level menu objects (documentation up to date accordingly)
- Added fast hyperlinks to settings web page for simpler navigation
- Added search characteristic (non-obligatory)
- Added positioning choices for background picture
- menu can now be closed by urgent the ESC key