Skip to content

Latest commit

 

History

History
52 lines (39 loc) · 1.33 KB

README.md

File metadata and controls

52 lines (39 loc) · 1.33 KB
Raw

jQuery.overflowMenu

The jQuery overflow menu plugin creates a drop down menu to prevent the menu to overflow to the next line or when the number of menu items exceeds the given maximum. Check the demo for more information.

Example

HTML

<html>
	<body>
		<nav class="menu">
			<ul>
				<li>Home</li>
				<li>About</li>
				<li>Contact</li>
			</ul>
		</nav>
	</body>
</html>

CSS

<link rel="stylesheet" href="assets/css/jquery.overflowmenu.css" />

Javascript

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.overflowmenu.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
	$('.menu').overflowMenu();
});
</script>

Options

$('.menu').overflowMenu({
	// The maximum numbers of items before the menu will overflow. When the value is 0, the drop down menu will only show if the items overflow the menu.
	maximumItems: 0,

	// Outer element
	element: 'div',

	// Class and data- name
	class: 'overflow-menu',

	// Insert content before the menu
	insertBefore: '',

	// Insert content after the menu
	insertAfter: ''
});