Evanto

TapTap: A Tremendous Customizable WordPress Cellular Menu

LIVE PREVIEWBUY FOR $26

Wauki

TapTap 5

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

Be it a inventive’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 so on. assist you to shortly create a menu that’s uniquely yours. Overlook pre-determined layouts and construct the cell menu you need. Preview any adjustments you make in real-time and customise your new menu quicker and simpler than ever.

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

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

TapTap full options listing:

TapTap is wildly customizable and by far probably the most versatile WordPress cell menu obtainable wherever. To get acquainted with all the things you possibly can edit, add and customise, please take a look on the full particulars on TapTap’s near-endless prospects under.

Menu Button
  • Place menu button left or proper, then fine-tune prime/aspect distance with per-pixel accuracy
  • 6 completely different menu button kinds
    • Every type has common and skinny variations (12 designs complete)
    • Every button has two completely different animations (or no animation in any respect)
    • Set customized animation velocity
    • Set button opacity
    • Customise colour, hover colour (+ colours when menu energetic)
  • Add label to menu button
    • Enter customized label textual content
    • Place label wherever across the button with per-pixel accuracy
    • Set customized font measurement
    • Set customized letter spacing
    • Choose 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
    • Customise label colour, hover colour
  • Optionally conceal menu button (helpful when you’d like to make use of a customized aspect to activate the menu)
Brand Placement
  • Place brand left, middle or proper, then fine-tune prime/aspect distance with per-pixel accuracy
  • If brand entered as textual content:
    • Set customized font measurement
    • Set customized letter spacing
    • Choose brand font (12 choices obtainable, or use a theme font)
    • Customise colour, hover colour
  • If brand entered as a picture:
    • Set customized brand picture measurement
  • Optionally conceal brand placement
WooCommerce Cart Button
  • Place WooCommerce button left or proper, then fine-tune prime/aspect distance with per-pixel accuracy
  • Cart and procuring bag icon variations
  • Customise colours, hover colour
Search Button
  • Place search button left or proper, then fine-tune prime/aspect distance with per-pixel accuracy
  • Common and skinny search button variations
  • Optionally flip search button for extra variations
  • Customise colour, hover colour
  • Add label to go looking button
    • Enter customized label textual content
    • Place label wherever across the button with per-pixel accuracy
    • Set customized font measurement
    • Set customized letter spacing
    • Choose 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
    • Customise label colour, hover colour
  • Optionally conceal search button (and the operate together with it)
Search Operate
  • Set customized look animation velocity
  • Seach discipline:
    • Set customized searchfield placeholder textual content
    • Customise search discipline peak
    • For RTL assist, align searchfield textual content to the precise
    • Cover ‘clear discipline’ choice
    • Set customized font measurement
    • Set customized letter spacing
    • Choose label font (12 choices obtainable, or use a theme font)
    • Change search discipline background opacity
    • Customise colours of search discipline background, placeholder and search textual content, shut and ‘clear discipline’ buttons
  • Set background overlay opacity and colour
Header
  • Present/conceal header
  • Set customized header peak
  • Change header background colour
  • Change header background opacity
  • Present/conceal header background shadow (+ set shadow energy)
Menu Container, Menu, Widgets and so on.
  • Normal:
    • Show menu fly-out as full-screen or set customized width/peak
      • Peak is relevant when menu is ready to animate from prime/backside.
      • Width is relevant when menu is ready to animate from left/proper.
    • Set menu to look by fading in or sliding from left, proper, prime 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/middle/proper and prime/center/backside
    • Give content material contained in the menu container most width
    • Alter menu contents’ scaling animation (any scaling degree, optimistic or unfavorable, or disable altogether).
    • Set customized left, proper, prime and backside padding menu container
    • If on desktop, urgent the ESC button closes the menu and search
    • Change menu background overlay colour and opacity
  • Background:
    • Add background picture or sample
    • Change background picture positioning
    • Change background picture opacity
    • Change background colour
    • Change background colour opacity
    • Create animated, pulsating colour 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
    • Flip heading texts into hyperlinks
  • Add heading picture:
    • Set most measurement
    • Flip heading picture right into a hyperlink
    • Set prime 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 obtainable, or use a theme font)
    • Change font sizes
    • Change letter spacings
    • Change line heights
    • Change all colours
    • All font choices will 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 colour (individually for top-level and submenu objects)
  • Customizable styled scrollbar:
    • Customise scrollbar colours
    • Customise scrollbar thickness
    • Customise scrollbar distance from the perimeters
    • Customise scrollbar nook roundness
    • Present the scrollbar all the time or solely on mouseover
    • If styled scrollbar is enabled, it will likely be displayed on desktop solely. On cell, the machine’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 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
  • Present/conceal at specified resolutions (present on cell and conceal on desktop, or vice versa)
  • Cover utterly on specified posts/pages
  • ‘Good header’ choice (header components slide out of view when website scrolled down, slide again into view when scrolled up).
  • Cover theme menu, brand and so on. when TapTap is energetic, by the category/ID of the theme components
  • 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 by way of a customized aspect, by way of an activator class
  • Show alternate shut menu button. Obtainable choices embrace left/proper positioning and place fine-tuning, fastened or absolute positioning, an non-obligatory hover animation, colour and thickness settings.
  • RTL assist
  • WordPress multisite appropriate
  • Absolute/fastened positioning
  • Have the brand, search and header seem above or under menu
  • Optionally don’t load FontAwesome icon set (helpful when 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 assist (in case you don’t make use of the picture prospects within the plugin)
Experimental Picture-based Menu

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

  • Change all colours
  • Change nook roundness
  • Helps as much as 9 top-level objects and limitless submenus
  • Add fundamental pictures and alter different settings within the “Picture-based Menu” part

Changelog

Replace 5.2
- Added customizable WooCommerce cart icon to the header

Replace 5.1
- Added alternate menu button label choice (might be proven when menu is opened)
- Added choice to use menu content material scaling animation to the menu background as nicely
- Menu merchandise descriptions can now be displayed both above or under menu objects
- Added look animation origin/opacity and spacing choices to new experimental format

Replace 5.0
- Added new experimental image-based menu design which can be utilized as a substitute of or along with the primary 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 non-obligatory 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 would like to point out a light-weight 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 choice 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 (executed by way of CSS3, will be disabled for non-touch gadgets as a consequence of doable rendering points in some variations of Chrome)
- Added choice to lock physique scroll when menu is opened.
- TapTap is not only a full-screen menu; width and peak of the menu fly-out can now be custom-made.
- Added non-obligatory 'good header' choice. When enabled, header components will slide out of view when scrolled down and slide again into view when scrolled up (see instance #6 on demo website).
- Added choice to cover TapTap on specified posts/pages
- Added choice for pulsating background colour (view instance #5 on demo website)
- Added choice to alter pulsating background colour animation velocity
- Added choice to alter heading picture most width
- Up to date icon set to newest model
- Added non-obligatory, closely customizable styled scrollbar (If enabled, displayed on desktop solely. On cell, the machine's native scroll conduct is used)
--- Customise scrollbar colours
--- Customise scrollbar thickness
--- Customise scrollbar distance from the perimeters
--- 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 degree of scaling you would like or disable the scaling animation altogether
- It's now doable to toggle the menu by way of a customized aspect, by way of an activator class (particulars within the documentation)
- Mounted search overlay problem which appeared on tremendous excessive resolutions
- Now you can preview any adjustments 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 format you would like
- Now you can set customized peak for the header
- Expanded upon the brand 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 wherever 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 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 kinds
--- Every type has common and skinny choices (12 designs complete)
--- Every button type 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 will be flipped for extra variations
- Rebuilt the search operate
--- Added 'clear discipline' choice to go looking discipline (will be disabled)
--- Peak of search discipline can now be custom-made
--- Look velocity of search discipline is now customizable
--- Opacity of search discipline is now customizable
--- For RTL assist, search discipline textual content will 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 colour, 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 snug use
- Up to date retina.js
--- The inclusion now particularly solely targets the brand and heading pictures
--- Added choice to disable retina picture assist
- Added choice 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 regulate menu look velocity
- Added background overlay with customizable colour and opacity
- Added choices to set prime 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 prime 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 routinely relying on whether or not the "Alternate submenu activation" choice 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 choice to point out shadow behind header (+ choice to customise the shadow energy)
- 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 kinds
- customers can now management menu button animation velocity
- added choice 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 choice 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 choice to alter menu contents' prime distance
- up to date icon set to newest model
- the default "sort search time period.." textual content can now be custom-made
- added superior function: theme menu can now be hidden when TapTap is energetic, provided that the consumer is aware of the category/ID of the theme menu
- eliminated empty area from backside of the display screen that would momentarily seem when scrolling on sure contact machine browsers
- altering vertical align for sub-menus now performs with backside margin as a substitute of prime 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 type (static SVG)
- 500+ icons can now be added to menu (colours+measurement changes additionally obtainable)
- Added choice 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 colour 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 type (a extra conventional, three-bar hamburger menu)
- Added choice to alter energetic menu button colour
- 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 (non-obligatory)
- Added positioning choices for background picture
- menu can now be closed by urgent the ESC key


Source

You might also like