Menu Generator

🧰 Use Case: Menu Generator

Purpose:
The Menu Generator helps creators, especially IMVU homepage designers, easily build fully customized CSS-based navigation menus with submenus — visually and without writing code. You can design horizontal pop-out or vertical accordion-style menus with rich styling options and export clean, ready-to-use HTML/CSS code.

Audience:
Perfect for creators on platforms like IMVU, personal bloggers, web designers, and anyone who needs custom-styled navigation menus but doesn’t want to manually code them.

Key Features:

• Visual menu item builder (main items & submenus)
• Full color control, padding/margin/border sliders
• Horizontal or vertical menu mode
• Custom hover styles and submenu offsets
• Optional “Powered by NekyPop!” link
• Live code preview panel
• Export clean HTML + CSS for copy-paste

---

🪄 How to Use the Menu Generator

1. 🧭 Choose Menu Orientation

Go to Global Menu Styles > Orientation and select:

• Horizontal for a typical top bar with dropdowns
• Vertical for sidebar accordion-style menus

2. ➕ Add Menu Items

• Click “Add Main Menu Item”
• Each main item can include:
  • Label
  • Link URL
  • Submenu toggle
  • Reorder buttons
  • Submenu items (click “Add Submenu Item”)

You can collapse/expand each item to keep your workspace organized.

3. 🎨 Style the Menu

Under Global Menu Styles:

• Choose the menu width (auto, 100%, or 200px, etc.)
• Set background, padding, borders, and shadow
• Customize the container for both the menu and submenus

4. ✏️ Style Main Items

In Main Item Styles:

• Pick font, size, color
• Set background color and hover effects
• Adjust individual padding, margin, borders
• Optional: Add a custom class name for manual styling

5. 🧩 Style Submenu Items

In Submenu Item Styles:

• Same full control over fonts, colors, hover, and spacing
• Use this to differentiate submenu appearance from main menu

6. 🎯 Live Preview

• Scroll to the Preview Canvas on the right to see your menu take shape
• Toggle dark/light mode (if implemented)
• Real-time updates apply as you tweak settings

7. 💾 Copy the Code

• Scroll to the Code Output section
• Copy the generated HTML & CSS and paste it into your website or homepage
• You can paste this into IMVU homepage HTML boxes or personal websites directly

8. 🌸 (Optional) NekyPop Support

• Enable a “Powered by NekyPop!” footer link
• Customize its appearance just like a menu item