SmartNavigation.js

<script src="path/to/smartNavigation.js"></script>

// Initialize with default options
const nav = new Navigation('#navigation');

// Or with custom options
const nav = new Navigation('#navigation', {
    accordion: true,
    slideUpSpeed: 300,
    slideDownSpeed: 300,
    debug: false,
    maxDepth: 10
});

<nav id="navigation">
    <ul>
        <li>
            <a href="#">Parent Item</a>
            <ul>
                <li><a href="page1.html">Child Item 1</a></li>
                <li><a href="page2.html">Child Item 2</a></li>
                <li>
                    <a href="#">Child Item 3</a>
                    <ul>
                        <li><a href="subpage1.html">Grandchild Item 1</a></li>
                        <li><a href="subpage2.html">Grandchild Item 2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

const nav = new Navigation('#navigation', {
    accordion: true,
    slideUpSpeed: 300,
    slideDownSpeed: 300,
    closedSign: '<i class="fa fa-plus"></i>',
    openedSign: '<i class="fa fa-minus"></i>',
    initClass: 'nav-initialized',
    debug: true,
    instanceId: 'main-navigation',
    maxDepth: 5,
    sanitize: true,
    animationTiming: 'ease-in-out',
    debounceTime: 100,
    onError: function(error) {
        console.error('Navigation error:', error);
    },
    showMore: {
        enabled: true,
        itemsToShow: 5,
        minItemsForToggle: 3,
        moreText: 'View {count} more items',
        lessText: 'Collapse items'
    }
});

// Get an existing navigation instance
const nav = Navigation.getInstance('#navigation');

// Initialize multiple navigation elements at once
const navs = Navigation.initAll('.navigation', options);

// Initialize navigation on DOM content loaded
Navigation.initOnLoad(options);

// Destroy all navigation instances
Navigation.destroyAll();

// Create a new menu item
const parentItem = nav.createMenuItem({
    text: 'Parent Menu',
    url: '#',
    hasSubmenu: true
});

// Create a child menu item
const childItem = nav.createMenuItem({
    text: 'Child Menu',
    url: 'https://example.com',
    parent: parentItem
});

// Update an existing menu item
nav.updateMenuItem(childItem, {
    text: 'Updated Text',
    url: 'https://newurl.com'
});

// Move a menu item to a new parent
nav.moveMenuItem(childItem, anotherParent);

// Remove a menu item
nav.removeMenuItem(childItem);

// Toggle all submenus open or closed
nav.toggleAll(true);  // Open all
nav.toggleAll(false); // Close all

// Close all open submenus
nav.closeAllSubmenus();

// Focus a specific menu item
nav.focusItem(menuItem);

// Destroy the navigation instance
nav.destroy();

// Keyboard navigation support
// Enter/Space: Toggle submenu
// Escape: Close submenu and return focus to parent
// Arrow Down/Up: Navigate between menu items
// Tab: Navigate through focusable elements

// Sanitizes HTML content to prevent XSS attacks
const sanitizedHTML = Navigation.sanitizeHTML(htmlString);

// Removes potentially dangerous attributes and scripts
// Strips event handlers (onclick, onmouseover, etc.)
// Prevents script injection

// Validates URLs to prevent javascript: protocol and other unsafe URLs
const isValid = Navigation.isValidUrl(url);

// Checks for:
// - Valid URL format
// - Prevents javascript: URLs
// - Prevents data: URLs
// - Prevents other potentially dangerous protocols

// Configure the Show More feature
const nav = new Navigation('#navigation', {
    showMore: {
        enabled: true,           // Enable the feature
        itemsToShow: 4,          // Show first 4 items
        minItemsForToggle: 2,    // Only show toggle if at least 2 items are hidden
        moreText: 'Show {count} more items',  // Text for the toggle (expanded)
        lessText: 'Show fewer items'          // Text when collapsed
    }
});

// Click event handling
element.addEventListener('mousedown', nav.handleClick, { passive: true });

// Keyboard event handling
element.addEventListener('keydown', nav.handleKeydown);

// Debounced event handling to prevent rapid repeated clicks
const debouncedHandler = nav.debounce(function() {
    // Handler code
}, 100);

// Animate height of an element
nav.animateHeight(element, 'down', callback);  // Expand
nav.animateHeight(element, 'up', callback);    // Collapse

// Animation options
const nav = new Navigation('#navigation', {
    slideUpSpeed: 300,           // Collapse animation duration
    slideDownSpeed: 300,         // Expand animation duration
    animationTiming: 'ease-in-out'  // CSS timing function
});