sunqiangde / h5-floating-menu

通用悬浮菜单（an independent floating menu using native h5, support for drag and configuration.）

English | 简体中文

Intro

A common floating H5 menu, independent of any third-part libraries, compatibility with PC Web, showing the text and icon of menu items in a no-blocked way based on the location of the menu, support for drag and configuration.

Usage

Download or install via npm (npm install h5-floating-menu)

// initialization, set the configuration
import H5FloatingMenu from 'h5-floating-menu';
new H5FloatingMenu([_menuConfig_]);

Or import via script element:

<script src="_path/to/h5-floating-menu.min.js_"></script>
<script>
// initialization, set the configuration
new H5FloatingMenu([_menuConfig_]);
</script>

the configuration properties are as follows：

property	description	type	default
zIndex	'z-index' property in css	number	11
landscopeMode	whether 'landscope' mode	boolean	false
initialLeft	initial location of the menu, 'left'property in css	number or string	'50%'
initialTop	initial location of the menu, 'top'property in css	number or string	'50%'
menuItemSize	size of the menu item	string	'50px'
menuItemGap	gap size of the menu item	string	'6px'
menuItemBackgroundColor	background color of the menu item	string	'#fcfcfd'
menuItemTextColor	font color of the menu item	string	'#eaffee'
menuItemTextFontSize	font size of of the menu item	string	'14px'
mainIconClose	main icon of the menu when the menu is folded	string	'<svg ...omitted.../svg>'
mainIconOpen	main icon of the menu when the menu is unfolded	string	'<svg ...omitted.../svg>'
menuItems	menu items	object array	[{...properties of each object is blow...}]

properties of the menuItems is as follows：

property	description	type
icon	icon of the menu item	string
text	text of the menu item	string
callback	callback js script of the menu item after clicking	string. e.g, `console.log('customer service');`

Function

hideWhole()

hide the whole menu.

showWhole()

show the whole menu.