/OpenSource

jQuery Overflow Menu


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: ''
});

Statistieken

2 0 5 0

Laatst bijgewerkt

12 December 2018

Talen

Labels

, ,