Attachment menu

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attachment Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="attachment-menu">
        <h1>Attachments Menu</h1>
        <ul>
            <li><button onclick="showSubMenu('attachFile')">Attach File</button></li>
            <ul id="attachFile" class="submenu">
                <li><button>Browse Files</button></li>
                <li><button>Drag and Drop</button></li>
                <li><button>Recent Files</button></li>
                <li><button>From Cloud Storage</button></li>
            </ul>
            <li><button onclick="showSubMenu('manageAttachments')">Manage Attachments</button></li>
            <ul id="manageAttachments" class="submenu">
                <li><button>View Attached Files</button></li>
                <li><button>Remove Selected</button></li>
                <li><button>Rename File</button></li>
                <li><button>Preview File</button></li>
            </ul>
            <li><button onclick="showSubMenu('fileOptions')">File Options</button></li>
            <ul id="fileOptions" class="submenu">
                <li><button>Compress Before Sending</button></li>
                <li><button>Encrypt File</button></li>
                <li><button>Convert to PDF</button></li>
                <li><button>Add Password Protection</button></li>
            </ul>
            <li><button onclick="showSubMenu('attachmentSettings')">Attachment Settings</button></li>
            <ul id="attachmentSettings" class="submenu">
                <li><button>Max File Size Limit</button></li>
                <li><button>File Type Restrictions</button></li>
                <li><button>Auto Compress Large Files</button></li>
                <li><button>Notify if File Exceeds Size Limit</button></li>
            </ul>
            <li><button...

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.attachment-menu {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    padding: 20px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul > li {
    margin-bottom: 10px;
}

button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

.submenu {
    display: none;
    margin-left: 20px;
}

.submenu li {
    margin-bottom: 5px;
}

.submenu button {
    background-color: #6c757d;
}

.submenu button:hover {
    background-color: #5a6268;
}

JavaScript

function createAttachmentMenu() {
    const modalDiv = document.getElementById('modalDiv');
    
    const menuDiv = document.createElement('div');
    menuDiv.className = 'attachment-menu';
    
    const menuItems = ['Attach File', 'Manage Attachments', 'File Options', 'Attachment Settings', 'Additional Options', 'Help and Support'];
    
    menuItems.forEach(item => {
        const button = document.createElement('button');
        button.textContent = item;
        menuDiv.appendChild(button);
    });

    modalDiv.appendChild(menuDiv);
}

createAttachmentMenu();



document.addEventListener('DOMContentLoaded', () => {
    createAttachmentMenu();
});

function createAttachmentMenu() {
    const modalDiv = document.getElementById('modalDiv');
    const menuDiv = document.createElement('div');
    menuDiv.className = 'attachment-menu';

    const menuItems = [
        { name: 'Attach File', submenu: ['Browse Files', 'Drag and Drop', 'Recent Files', 'From Cloud Storage'] },
        { name: 'Manage Attachments', submenu: ['View Attached Files', 'Remove Selected', 'Rename File', 'Preview File'] },
        { name: 'File Options', submenu: ['Compress Before Sending', 'Encrypt File', 'Convert to PDF', 'Add Password Protection'] },
        { name: 'Attachment Settings', submenu: ['Max File Size Limit', 'File Type Restrictions', 'Auto Compress Large Files', 'Notify if File Exceeds Size Limit'] },
        { name: 'Additional Options', submenu: ['Insert Link Instead of File', 'Attach as a Zip Archive', 'Include File Metadata', 'Set Expiry Date for File Access'] },
        { name: 'Help and Support', submenu: ['How to Attach Files', 'Supported File Types', 'Troubleshooting Attachment Issues', 'Contact Support'] }
    ];

    const fragment = document.createDocumentFragment();

    menuItems.forEach(item => {
        const button = document.createElement('button');
        button.textContent = item.name;
        button.className = 'menu-button';
        button.onclick =...