With TapTap, we got down to create an easy-to-customize, responsive, mobile-first, off-canvas menu plugin for WordPress that may be versatile sufficient for use on actually any web site.
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 many others. help you shortly create a responsive menu that’s uniquely yours. Overlook pre-determined layouts and construct the cellular 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 record beneath and do take a look on the stay examples on the demo site here.
PS! TapTap is accessible 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 accessible wherever. To get acquainted with every thing you may edit, add and customise, please take a look on the full particulars on TapTap’s near-endless prospects beneath.
Menu Button
- Place menu button left or proper, then fine-tune prime/aspect distance with per-pixel accuracy
- Open menu by click on/faucet or by mouseover
- 6 totally different menu button types
- Every model has common and skinny variations (12 designs whole)
- Every button has two totally 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 wherever 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 when you’d like to make use of a customized ingredient to activate the menu)
Brand Placement
- Place brand left, heart 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 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 prime/aspect distance with per-pixel accuracy
- Cart and procuring bag icon variations
- Customise colours, hover shade
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 added variations
- Customise shade, hover shade
- Add label to look 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 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 perform
- Customise label shade, hover shade
- Optionally disguise search button (and the perform together with it)
Search Operate
- Set customized look animation velocity
- Seach subject:
- Set customized searchfield placeholder textual content
- Customise search subject peak
- For RTL help, align searchfield textual content to the fitting
- Disguise ‘clear subject’ possibility
- Set customized font measurement
- Set customized letter spacing
- Choose label font (12 choices accessible, or use a theme font)
- Change search subject background opacity
- Customise colours of search subject background, placeholder and search textual content, shut and ‘clear subject’ buttons
- Set background overlay opacity and shade
Header
- Present/disguise header
- Set customized header peak
- Change header background shade
- Change header background opacity
- Change header background blur (quantity freely controllable)
- Present/disguise header background shadow (+ set shadow energy)
- Add header background picture
Menu Container, Menu, Widgets and many others.
- Common:
- Show menu fly-out as full-screen or set customized width/peak
- Peak is relevant when menu is about to animate from prime/backside.
- Width is relevant when menu is about to animate from left/proper.
- Set menu to seem 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/heart/proper and prime/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, prime 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 screen 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 prime and backside margins
- Accordion menu:
- Construct a multi-level menu (no depth restrict)
- Add descriptions to single-level menu gadgets
- Set vertical spacing between menu gadgets 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 may be set individually for top-level and sublevel gadgets in addition to menu descriptions
- Add icons to menu gadgets:
- 600+ icons accessible
- Change icon measurement (individually for top-level and submenu gadgets)
- Change icon shade (individually for top-level and submenu gadgets)
- Customizable styled scrollbar:
- Customise scrollbar colours
- Customise scrollbar thickness
- Customise scrollbar distance from the edges
- Customise scrollbar nook roundness
- Present the scrollbar at all times 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
- Horizontal/vertical motion
- Opacity
- Blur
- Widget areas:
- Widget areas above in addition to beneath 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)
- Disguise utterly on specified posts/pages
- ‘Good header’ possibility (header components slide out of view when website scrolled down, slide again into view when scrolled up).
- Disguise theme menu, brand and many others. when TapTap is energetic, by the category/ID of the theme components
- 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 by way of a customized ingredient, by way of an activator class
- Show alternate shut menu button. Accessible choices embrace left/proper positioning and place fine-tuning, fastened or absolute positioning, an non-compulsory hover animation, shade and thickness settings.
- RTL help
- WordPress multisite appropriate
- Absolute/fastened positioning
- Have the brand, search and header seem above or beneath menu
- Optionally don’t load Font Superior and/or Line Superior icon units (helpful when you don’t use icons in your menu or if one thing in your set up already masses this broadly used icon set)
- Optionally disable retina help (in case you don’t make use of the picture prospects within the plugin)
Horizontal Menu
The horizontal menu has its personal set of settings that can be developed independently.
- Add part titles
- Change font/icon sizes
- Change all colours
Experimental Picture-based Menu
Please observe: When made use of, the image-based menu format 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 gadgets and limitless submenus
- Add major pictures and alter different settings within the “Picture-based Menu” part
Changelog
Replace 5.7 - added choice to blur the content material that scrolls beneath the header (see demo #6 for instance, blur quantity is freely controllable) Replace (no model change) - Horizontal menu now accepts menu merchandise descriptions Replace 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 - Keep tuned for extra nice updates to TapTap! Replace 5.5 - Added a brand new horizontally opening menu model (please see demo website #9 for a stay 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 a different way than within the earlier variations. Please test the included TapTap documentation for up to date directions on how one can enter icons. Or try and check out 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)
Fast replace (no model change)
- Some JS script and translation string updates
Replace 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).
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 nicely
- Menu merchandise descriptions can now be displayed both above or beneath menu gadgets
- 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 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 non-compulsory stand-alone shut button (helpful in instances the place a customized ingredient is used to activate the menu whereas TapTap's personal menu button is hidden)
Earlier updates
- added choices to use further look animation to menu gadgets - added choice to show secondary brand when menu is opened (helpful if for instance you want to indicate 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 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 modify the next animation results for specified website content material: - Scaling - Opacity - Blur (accomplished by way of CSS3, may be disabled for non-touch units resulting from 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 personalized. - Added non-compulsory 'sensible header' possibility. 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 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 non-compulsory, 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 at all times or solely on mouseover - Added scaling choices to menu look. Now you can enter any stage of scaling you want or disable the scaling animation altogether - It's now doable to toggle the menu by way of a customized ingredient, by way of an activator class (particulars within the documentation) - Mounted search overlay difficulty which appeared on tremendous excessive resolutions - Now you can preview any adjustments you make in real-time (settings are beneath "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 want - 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 totally 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 disguise menu label when menu is opened - Redesigned menu buttons and re-did button animations --- There at the moment are 6 totally different menu button types --- Every model has common and skinny choices (12 designs whole) --- Every button model has 2 totally different animation choices (or no animation in any respect) - Redesigned search icon --- Search icon now has skinny and common variations --- Search icon may be flipped for added variations - Rebuilt the search perform --- Added 'clear subject' possibility to look subject (may be disabled) --- Peak of search subject can now be personalized --- Look velocity of search subject is now customizable --- Opacity of search subject is now customizable --- For RTL help, search subject textual content may be aligned proper --- Change the search subject's font (or use a theme font), font measurement and letter spacing --- Added overlay when search subject 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 brand and heading pictures --- 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 regulate menu look velocity - Added background overlay with customizable shade 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 gadgets and menu descriptions now have their very own letter spacing choices (as a substitute of inheriting it from top-level menu gadgets) - 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" possibility is energetic or not (this setting chooses if a submenu is triggered by your complete 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 help - added possibility to indicate 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 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' prime distance - up to date icon set to newest model - the default "kind search time period.." textual content can now be personalized - 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 area from backside of the display screen that would momentarily seem when scrolling on sure contact gadget 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 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 latest pages). - Added choice to customise menu button hover shade when menu is energetic - Heading and sub-heading texts can now optionally be was 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 gadgets (documentation up to date accordingly) - Added fast hyperlinks to settings web page for simpler navigation - Added search characteristic (non-compulsory) - Added positioning choices for background picture - menu can now be closed by urgent the ESC key
