TapTap: A Super Customizable WordPress Mobile Menu

LIVE PREVIEW DOWNLOAD

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 brand positions, backgrounds, alignments, animation speeds and many others. let you rapidly create a responsive menu that’s uniquely yours. Neglect pre-determined layouts and construct the cellular menu you need. Preview any modifications you make in real-time and customise your new menu quicker and simpler than ever.

To get the total lowdown on TapTap, please have a learn on the options checklist under and do take a look on the reside examples on the demo site here.

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

TapTap full options checklist:

TapTap is wildly customizable and by far essentially the most versatile WordPress cellular menu accessible anyplace. To get acquainted with all the things you may edit, add and customise, please take a look on the full particulars on TapTap’s near-endless potentialities under.

Menu Button

Place menu button left or proper, then fine-tune high/facet distance with per-pixel accuracy
Open menu by click on/faucet or by mouseover
6 completely different menu button types
- Every model has common and skinny variations (12 designs whole)
- Every button has two completely different animations (or no animation in any respect)
- Set customized animation velocity
- Set button opacity
- Customise shade, hover shade (+ colours when menu energetic)
Add label to menu button
- Enter customized label textual content
- Place label anyplace across the button with per-pixel accuracy
- Set customized font measurement
- Set customized letter spacing
- Choose label font (12 choices accessible, 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
- Customise label shade, hover shade
Optionally disguise menu button (helpful if you happen to’d like to make use of a customized aspect to activate the menu)

Brand Placement

Place brand left, heart or proper, then fine-tune high/facet distance with per-pixel accuracy
If brand entered as textual content:
- Set customized font measurement
- Set customized letter spacing
- Choose brand font (12 choices accessible, or use a theme font)
- Customise shade, hover shade
If brand entered as a picture:
- Set customized brand picture measurement
Optionally disguise brand placement

WooCommerce Cart Button

Place WooCommerce button left or proper, then fine-tune high/facet distance with per-pixel accuracy
Cart and purchasing bag icon variations
Customise colours, hover shade

Search Button

Place search button left or proper, then fine-tune high/facet distance with per-pixel accuracy
Common and skinny search button variations
Optionally flip search button for added variations
Customise shade, hover shade
Add label to look button
- Enter customized label textual content
- Place label anyplace across the button with per-pixel accuracy
- Set customized font measurement
- Set customized letter spacing
- Choose label font (12 choices accessible, 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
- Customise label shade, hover shade
Optionally disguise search button (and the operate together with it)

Search Operate

Set customized look animation velocity
Seach area:
- Set customized searchfield placeholder textual content
- Customise search area top
- For RTL assist, align searchfield textual content to the fitting
- Cover ‘clear area’ possibility
- Set customized font measurement
- Set customized letter spacing
- Choose label font (12 choices accessible, or use a theme font)
- Change search area background opacity
- Customise colours of search area background, placeholder and search textual content, shut and ‘clear area’ buttons
Set background overlay opacity and shade

Header

Present/disguise header
Set customized header top
Change header background shade
Change header background opacity
Present/disguise header background shadow (+ set shadow power)

Basic:
- Show menu fly-out as full-screen or set customized width/top
- Set menu to look 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 damaging, 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
- Management 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 accessible, or use a theme font)
- Change font sizes
- Change letter spacings
- Change line heights
- Flip heading texts into hyperlinks
Add heading picture:
- Set most measurement
- Flip heading picture right into a hyperlink
- Set high and backside margins
Accordion menu:
- Construct 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 accessible, 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 accessible
  - Change icon measurement (individually for top-level and submenu objects)
  - Change icon shade (individually for top-level and submenu objects)
Customizable styled scrollbar:
- Customise scrollbar colours
- Customise scrollbar thickness
- Customise scrollbar distance from the edges
- Customise scrollbar nook roundness
- Present the scrollbar all the time or solely on mouseover
- If styled scrollbar is enabled, will probably be displayed on desktop solely. On cellular, the gadget’s native scroll conduct is used.
Content material animation results (utilized to chose content material when menu opens/closes):
- Scaling
- Opacity
- Blur
Widget places:
- Widget places above in addition to under the menu
- Textual content widget accepts shortcodes
- Choose fonts (12 choices accessible, 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

Present/disguise at specified resolutions (present on cellular and conceal on desktop, or vice versa)
Cover fully on specified posts/pages
‘Sensible header’ possibility (header parts slide out of view when website scrolled down, slide again into view when scrolled up).
Cover theme menu, brand and many others. when TapTap is energetic, by the category/ID of the theme parts
Optionally lock physique scroll when menu opened
A dozen rigorously 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 aspect, through an activator class
Show alternate shut menu button. Accessible choices embrace left/proper positioning and place fine-tuning, fastened or absolute positioning, an elective hover animation, shade and thickness settings.
RTL assist
WordPress multisite suitable
Absolute/fastened positioning
Have the emblem, search and header seem above or under menu
Optionally don’t load Font Superior and/or Line Superior icon units (helpful if you happen to don’t use icons in your menu or if one thing in your set up already masses this extensively used icon set)
Optionally disable retina assist (in case you don’t make use of the picture potentialities within the plugin)

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

Add part titles
Change font/icon sizes
Change all colours

Please be aware: When made use of, the image-based menu structure can be utilized each as a substitute 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
Helps as much as 9 top-level objects and limitless submenus
Add foremost photographs and alter different settings within the “Picture-based Menu” part

Changelog

Replace 5.5
- Added a brand new horizontally opening menu model (please see demo website #9 for a reside demo)
- Added a model new icon set (Line Superior) to simply construct your menus with
- Up to date Font Superior to newest model !!! PLEASE NOTE !!! Font Superior v6 icons are entered a bit in another way than within the earlier variations. Please test the included TapTap documentation for up to date directions on learn how to enter icons. Or take a look at 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)
- Keep tuned for extra nice updates to TapTap!

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

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

Replace 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.

Replace 5.2
- Added customizable WooCommerce cart icon to the header

Replace 5.1
- Added alternate menu button label possibility (can 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 under menu objects
- Added look animation origin/opacity and spacing choices to new experimental structure

Replace 5.0
- Added new experimental image-based menu design which can be utilized as a substitute of or along with the principle dropdown menu. The brand new menu has its personal menu location (TapTap: Picture-Primarily based Menu) and customization part within the Customizer (TapTap Plugin > Picture-based Menu)
- Added elective stand-alone shut button (helpful in instances the place a customized aspect is used to activate the menu whereas TapTap's personal menu button is hidden)

Earlier updates

- added choices to use extra look animation to menu objects
- added choice to show secondary brand when menu is opened (helpful if for instance you need to point out a lightweight brand 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 under 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 regulate the next animation results for specified website content material:
- Scaling
- Opacity
- Blur (executed through CSS3, might be disabled for non-touch units attributable to 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 top of the menu fly-out can now be personalized.
- Added elective 'sensible 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
- Up to date icon set to newest model
- Added elective, closely customizable styled scrollbar (If enabled, displayed on desktop solely. On cellular, the gadget's native scroll conduct is used)
--- Customise scrollbar colours
--- Customise scrollbar thickness
--- Customise scrollbar distance from the edges
--- Customise scrollbar nook roundness
--- Present the scrollbar all the time or solely on mouseover
- Added scaling choices to menu look. Now you can enter any stage of scaling you need or disable the scaling animation altogether
- It's now doable to toggle the menu through a customized aspect, through an activator class (particulars within the documentation)
- Fastened search overlay situation which appeared on tremendous excessive resolutions
- Now you can preview any modifications you make in real-time (settings are underneath "Look → Customise → TapTap Plugin")  
- The menu button, brand and search button can now every be individually positioned, permitting you to create any header structure you need
- Now you can set customized top for the header
- Expanded upon the emblem space
--- Customise brand picture measurement
--- If brand is entered as textual content, choose from completely different fonts (or use a font included in your theme), change font measurement and letter spacing
- Now you can add absolutely customizable labels to the menu and search buttons
--- Place label anyplace across the button
--- It is also doable to cover both button (label will stay seen if one has been entered)
--- Choose label font (or use a theme font), font measurement, letter spacing
--- Customise colours
--- Optionally disguise 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
--- Every model has common and skinny choices (12 designs whole)
--- Every 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 area' possibility to look area (might be disabled)
--- Top of search area can now be personalized
--- Look velocity of search area is now customizable
--- Opacity of search area is now customizable
--- For RTL assist, search area textual content might be aligned proper
--- Change the search area's font (or use a theme font), font measurement and letter spacing
--- Added overlay when search area open (change shade, opacity)
- Rebuilt the submenu indicator arrow
--- As a substitute 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
- Up to date retina.js
--- The inclusion now particularly solely targets the emblem and heading photographs
--- Added choice to disable retina picture assist
- Added possibility to point out 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 a substitute of inheriting it from top-level menu objects)
- Widened font choice to a dozen
- Urgent ESC button now additionally closes search
- The submenu indicator arrow divider is now proven and hidden mechanically relying on whether or not the "Alternate submenu activation" possibility is energetic or not (this setting chooses if a submenu is triggered by the whole menu merchandise or the arrow indicator solely)
- Up to date how GoogleFonts are enqueued
- Up to date FontAwesome icon set to newest model
- Up to date retina.js inclusion
- added retina brand assist
- added possibility to point out shadow behind header (+ choice to customise the shadow power)
- added new menu button, search button and brand positioning choices (Upon buyer requests, brand 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 a substitute 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 personalized
- added superior function: 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 might momentarily seem when scrolling on sure contact gadget browsers
- altering vertical align for sub-menus now performs with backside margin as a substitute 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 personalized
- Added a 3rd menu button model (static SVG)
- 500+ icons can now be added to menu (colours+measurement changes additionally accessible)
- 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 a substitute 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 strains)
- 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
- Now you can 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 function (elective)
- Added positioning choices for background picture
- menu can now be closed by urgent the ESC key