Member Avatar for j4mes_bond25

Is there any chance I could possibly have this sort of fly-over menu () on my website as well, allowing the menu to STAY APPEARED on the top part of their window, even when they scroll down.

My CSS based website can be seen on:

I want fly-over menu making it possible for BOTH "top menu" and "left menu" always appearing at the top edge of the window regardless of whether user are at top of the page or right at the end of the page.

  • 3 Contributors
  • 4 Replies
  • 623 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

A practical, modern approach is to pin the top bar and the left column with CSS and then tune UX so they do not feel intrusive. is right to warn about annoyance from ever-present chrome; keep pinned areas compact, make the left column optionally collapsible on narrow viewports, and provide a clear way to bypass navigation (skip links). was on the right track thinking about positioning — use position: fixed (or position: sticky for elements that only lock after scrolling) rather than absolute positioning so the menus remain tied to the viewport.

A minimal structure and CSS pattern (desktop-first) that keeps a top menu and a left menu visible while preventing content overlap:

<!-- structure -->
<a class="skip" href="#main">Skip to content</a>

<header class="topnav" role="navigation" aria-label="Main navigation">...</header>
<nav class="leftnav" role="navigation" aria-label="Section navigation">...</nav>
<main id="main">...long content like your "Whisky" page...</main>
.topnav {
  position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index:1000;
}
.leftnav {
  position: fixed; top: 56px; left: 0; bottom: 0; width: 220px; overflow:auto; z-index:900;
}
main { margin-top:56px; margin-left:220px; padding:1rem; }
@media (max-width:800px) {
  .leftnav { position: static; width:auto; height:auto; }
  main { margin-left:0; }
  .topnav { position: sticky; top:0; }
}

Accessibility and UX notes: include a visible "Skip to content" link, use role="navigation" and aria-label, ensure keyboard focus works inside the menus, and keep the header height small. For better UX on long-scroll pages consider a show-on-scroll-up or small autohide header so content is not constantly obscured; a tiny JS pattern can toggle transform: translateY(-100%) on scroll down and restore on scroll up. If supporting very old browsers, provide a graceful fallback (static nav or split pages). Splitting very long content into digestible sections remains a valid, user-friendly option alongside a pinned UI.

Recommended Answers

All 4 Replies

Member Avatar for tgreer

Sure, it's possible, but I strongly recommend against it. Users find such non-intuitive features extremely disagreeable.

If you want to pursue it, research "JavaScript scrolltop" to point you in the right direction.

The issue is this: when thousands of users visit hundreds of thousands of pages, and the vast majority handle navigation a certain way, then, right or wrong, that becomes the expected way. It's called "User Expecatation" or "The User Model". Then, when your site violates that expectation, it creates irritation and annoyance: an unpleasant experience.

The only way to break through this is if your site COMPLETELY breaks the User Model - nothing is as expected, and the user is forced to "start over" and explore the new model. Some good examples are Flash sites:

So unless you want a completely avant-garde site, avoid scrolling menus!

Member Avatar for j4mes_bond25

Sure, it's possible, but I strongly recommend against it. Users find such non-intuitive features extremely disagreeable.

If you want to pursue it, research "JavaScript scrolltop" to point you in the right direction.

The issue is this: when thousands of users visit hundreds of thousands of pages, and the vast majority handle navigation a certain way, then, right or wrong, that becomes the expected way. It's called "User Expecatation" or "The User Model". Then, when your site violates that expectation, it creates irritation and annoyance: an unpleasant experience.

The only way to break through this is if your site COMPLETELY breaks the User Model - nothing is as expected, and the user is forced to "start over" and explore the new model. Some good examples are Flash sites:

So unless you want a completely avant-garde site, avoid scrolling menus!

Guess, I'll bear in mind your suggestion in that case.

In fact, the reason, I thought of doing so, was cos of having a rather LONG page (such as "Whisky"), so in order to visit to different page, the user would've to scroll all the way up, which some might find little annoying.

However, in order to get rid of this frustration, I'll simply "split" such long pages into different pages, so user can access the sub-section through the "sub-menus" (as is the case, presently).

Member Avatar for Dani

I'm thinking (theoretically) you could accomplish this using only CSS (no JavaScript) by encasing the menu in a <div> and absolutely positioning relative to the top left coordinate of the browser window? Not entirely sure if it will scroll with you this way though ... I guess you would need to introduce DHTML or JavaScript or such.

Member Avatar for tgreer

The "conventional" method is to split the pages into separate pages, or to provide a "back to top" anchor at the end of each section. You can also investigate "frames", but they don't work well with drop-down or pop-out menus.

Dani: nope, it won't scroll. That's why sites that implement these awful scrolling menus always have a "delayed reaction". The user scrolls, and then the menu catches up. It's event-driven, and requires Javascript. I think it's tacky in the extreme. I find myself trying to read the content, and then the menu appears over it, so I scroll a bit, the menu jumps around... bad.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.