Accordion As Multi Menu?

[boatkinson]

(Tastefully imperfect is fine for my application & this is not for impact sales).

Keeping a menu simple, why not use an accordion? What could go wrong?

Create an accordion — Sparkle advanced

Could an accordion box be used for say 7 lines of text, and then link most of those lines, each to a regular page, and thus serve as a “menu in itself” (of sub menus), where each image will have a name for a webpage under it …

Each of the links would look that way – Image over the linked name-title.

If any problem is seen with this plan. please advise.

I’ve been building 33 pages by trial and error, and the errors are time consuming, hence please suggest what could go wrong.

[primo]

If i understood correctly on what you want to do, doing the pop-up route is a lot better. You create a row of buttons, each button opens their specific pop-up. You create and design the pop-ups as the “mega menus” you’d want. Much easier and more manageable long-term.

[FlaminFig]

For me I would keep the User in mind…
Whether it is main navigation or sub navigation, I try to keep the navigation very obvious with no unnecessary extra clicking to find it.

An accordion on mobile is fiddly enough let alone it being used for page navigation.

[boatkinson]

Very well, then which is the documentation page you started with, on this specifically.

Or video on the direct actions to take.

Text lines used to serve as links to each of say a half-dozen sub-menus.

Mega menus like Sitley’s also lack specific instructions in documentation.

The sub menus would be regular pages with graphics,

(and as a separate page which remains open per panel check box).

[boatkinson]

That is good to hear about mobile. Thanks, I haven’t used mobil in over a decade, but certainly aim to handle that. Minimal text lines, even to fit a portrait-phone view is indeed an objective.

[Stephie]

The documentation page for layout blocks and mega menus is at Layout Blocks | Sitely Documentation
And the page for popups is at Popups | Sitely Documentation

[boatkinson]

@Stephie

Popups | Sitely Documentation

Yes these pages cover a wide range of possible uses.

Wide usage options runs into ambiguity for a specific use.

Asking clarifies that trial and error of each doc statement is the recommendation.

Thank you.

(Thirty years of 3d CAD user-forum typically shared app files as examples of specifics. Variables were that numerous, that eventually specific objects in themselves were then almost called tools.)

[primo]

Could you give us a real use example of the mega menu you’re wanting to achieve?

I’ll give you an example below of what I believe is what you’re asking for

If its this, then its pretty simple and you dont need the “CAD mindset”, it is exactly as easy as you think of it logically. You’ll set up your menu as the element “Button”. Then you will create, design and position your “Pop-Up” element wherever you want it to appear. Then, you set that “On Hover” of the “Button” element to open the “Pop-Up” you have designed. Thats the mechanical logic of it, the design part or how it looks is up to you.

Would you have a real use example so we can see if thats what you want? Then I can replicate it into a file so you can see how it is

[Birdy]

I like this navigation very much… can I please have a sample-document, how it is made?

[boatkinson]

Primo, that looks great for marketing and ‘buy now’. The horizontal and vertical scrolling looks very responsive. Yet something even simpler is my goal. It is clear that Sitely is a great app with people getting a lot of good results. Then there are things we can’t see coming.

Accordion looked fast – tried and true on the vid, and we can learn by asking off beat questions.

A famous saying was “dare to be naïve”. This brings more results faster. Everything is an experiment.

Last few work days dove into simple popups to grow branches off initial linked-buttons, a self made super-simple menu idea without the default Menu thing. It was working just fine until one wrong move was made… Crash . Waiting for analysis.

Besides my menu errors leading to corruption, everything is super stable in Sitely. In the CAD world we’d just delete a system/library file to restore the app. We’d do that repeatedly for betas, and think nothing of it. The corporate world pushes small apps around, as seen for decades with perfectly good OS suddenly changing, and expiring good apps.

Feb 12: Got my Sitely App working again thanks to Duncan and team for fixing it all, and thanks everyone for your helpfulness.

[boatkinson]

Yes, in the CAD world we’d post super simple file examples to show how tools were used, but not priceless master files, (taking days and days of work).

Mostly we’d share precise steps:

1] …
2] …
3] …

No further comment, just the steps. But there are too many variables with menus, apparently.

Do any options to the Sitely default menu exist? Then mistaken moves might be avoided.

[Stephie]

Website Navigation in Sitely

Understanding Your Navigation Options and When to Use Each One

When building a website in Sitely, navigation is not just about adding a menu - it’s about choosing the right structural method for how your site behaves.

Sitely offers three main navigation approaches:
1. The Built-In Menu element
2. Block Visibility navigation
3. Popup-Based navigation (Modal, Fixed in Window, Fixed on Canvas)

With the exception of the Built-In Menu and simple block visibility toggling, most advanced navigation systems in Sitely are created using the Popup tool.

Understanding when to use each method is key to building reliable and professional navigation.

⸻

1. The Built-In Menu Element

Best for Automatic, Structured Navigation

The Built-In Menu automatically creates menu items based on the Pages panel.

By default:
• Each page becomes a menu item.
• Menu order follows the page order.
• Changes in the Pages panel update the menu automatically.

This makes it the easiest and most maintainable navigation system in Sitely.

⸻

Customising the Built-In Menu

Although automatic, it can be customised in several ways.

Editing Menu Labels

You can change how a page name appears in the menu without renaming the page itself.

Useful when:
• Page names are long
• You want marketing-friendly wording
• You need shorter text for spacing

⸻

Adding Manual Links

You can insert menu items that don’t correspond to pages.

Examples:
• External websites
• Booking systems
• Downloadable PDFs
• Page anchors

This creates a hybrid structure (automatic + manual items).

⸻

Creating Submenus

You can create dropdown-style submenus to organise related pages.

Example:
Services
– Consulting
– Training
– Support

Submenus are helpful when:
• You have many sections
• You want clearer hierarchy

Avoid going deeper than two levels - it reduces usability.

⸻

Reordering Menu Items

Items can be moved up or down in the Items list in the Style panel.

Navigation order matters. Place key sections strategically.

⸻

When to Use the Built-In Menu

Use it when:
• You want automatic updates
• The site structure is traditional
• Maintainability is important
• You don’t need complex animation

Avoid it if you need highly custom layouts or advanced animation effects.

⸻

2. Navigation Using Block Visibility

Layout-Dependent Dropdowns and Mega Menus

Block visibility uses layout blocks that are:
• Positioned within the page
• Hidden by default
• Revealed on hover or click

This method is often used for dropdown or mega menus.

⸻

How It Works
1. Create a layout block under the header.
2. Add grouped navigation elements.
3. Set the block to hidden.
4. Reveal it using a hover or click trigger.

The navigation remains part of the page structure.

⸻

Advantages
• Simple setup
• Naturally aligned with header
• Good for traditional dropdown menus

⸻

Important Limitation

Block visibility is tied to layout position.

If the user scrolls down the page and then triggers the navigation, the revealed block may appear off-screen (because it exists near the top of the layout).

⸻

Why This Can Be a Problem with Sticky Headers

If your site uses a sticky (fixed in window) header:
• The header stays visible while scrolling.
• The visibility block does not move with it.
• Triggering the menu further down the page may reveal content that is no longer aligned with the visible navigation.

For sticky navigation layouts, block visibility is often not ideal.

⸻

When to Use Block Visibility

Use it when:
• Pages are short
• The navigation is near the top
• The site does not use sticky headers
• You want a simple dropdown structure

⸻

3. Popup-Based Navigation

The Foundation of Advanced Navigation in Sitely

Most advanced navigation systems in Sitely are created using the Popup tool.

When creating a popup, you can designate it as:
• Modal
• Fixed in Window
• Fixed on Canvas

Each option affects positioning, scrolling behaviour, and animation.

Popup navigation is not tied to layout blocks, making it more flexible and reliable - especially with sticky headers.

⸻

Popup Types Explained

⸻

Modal Popup

Behaviour:
• Appears centered
• Blocks interaction with the background
• Requires closing before continuing

Best for:
• Mobile full-screen menus
• Focused navigation
• Landing pages
• Minimalist designs

Use when you want users to concentrate on navigation.

⸻

Fixed in Window Popup

Behaviour:
• Positioned relative to the browser window
• Remains visible while scrolling

Best for:
• Sticky headers
• Slide-in side menus
• Persistent navigation panels
• Modern mobile navigation

This is often the best choice when using sticky headers.

⸻

Fixed on Canvas Popup

Behaviour:
• Positioned relative to the layout grid
• Scrolls with the page
• Can still be animated

Best for:
• Structured layouts
• Section-based navigation
• Controlled animation within layout

⸻

Popup-Based Mega Menus

Mega menus can also be built using popups instead of block visibility.

Advantages over block visibility:
• Not tied to layout block position
• Works reliably with sticky headers
• Can appear anywhere on screen
• Offers more animation options
• Visible regardless of scroll position

For modern websites with persistent headers, popup-based mega menus are usually the better choice.

⸻

Quick Comparison

Built-In Menu
• Automatic
• Page-structure based
• Low maintenance
• Limited advanced styling

Block Visibility
• Layout-dependent
• Simple dropdowns
• Can fail with sticky headers

Popup-Based Navigation
• Layout-independent
• Scroll-independent (if fixed in window)
• Supports animation
• Most flexible option

⸻

Choosing the Right Navigation Method

Ask yourself:

Do I want automatic page-based navigation?
→ Use Built-In Menu

Does my site use a sticky header?
→ Use Popup-Based Navigation

Do I need animated panels or slide menus?
→ Use Popup-Based Navigation

Is the layout simple and near the top of the page?
→ Block Visibility may be sufficient

⸻

Bottom Line

In Sitely, navigation systems fall into three structural categories:
1. Automatic (Built-In Menu)
2. Layout-dependent (Block Visibility)
3. Layout-independent (Popup-Based Navigation)

The best choice depends on:
• Whether the header is sticky
• Whether animation is required
• Whether the navigation must work independently of scroll position
• The complexity of the site structure

Popup-based navigation provides the greatest flexibility and is generally the preferred solution for modern layouts - especially when sticky headers are used.

Ultimately, it’s not about limiting choices or forcing people into a preferred navigational structure. It’s more about knowing how your users are expecting to interact with your website, and using the most appropriate tools to meet those expectations.