Member Avatar for Arch

Hello everyone, I'm new and this looks like a great place ... I was wondering where I could find some Menu Fly Outs on the site as I have looked in the Code Snippets and Website Design areas but didn't find anything. Thanks for you help. Arch

  • 3 Contributors
  • 7 Replies
  • 186 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by zippee

Dani AI

Generated

— what you want is a standard nested “flyout” menu. As mentioned, it’s done with CSS/DHTML, and is right that starting with CSS keeps things clean. Below is a compact, practical pattern: semantic nested UL/LI markup, CSS to position the submenu, and a tiny bit of JavaScript to make it work on touch and for keyboard users. If you’re using FrontPage, edit the HTML/CSS by hand rather than relying on the WYSIWYG output — it usually makes the markup harder to maintain.

HTML + CSS (desktop-first, progressive enhancement)

<ul class="menu">
  <li>
    <a href="/categories" class="has-sub" aria-haspopup="true" aria-expanded="false">Categories</a>
    <ul class="submenu">
      <li><a href="/cat1">Cat 1</a></li>
      <li><a href="/cat2">Cat 2</a></li>
    </ul>
  </li>
</ul>

.menu, .submenu { list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; display: inline-block; }
.submenu { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; }
.menu > li:hover > .submenu,
.menu > li:focus-within > .submenu,
.menu > li.open > .submenu { display: block; }

Small JS for touch and toggle + ARIA

document.querySelectorAll('.has-sub').forEach(link => {
  link.addEventListener('click', e => {
    const li = link.parentElement;
    li.classList.toggle('open');
    link.setAttribute('aria-expanded', li.classList.contains('open'));
    e.preventDefault();
  });
});
document.addEventListener('click', e => {
  if (!e.target.closest('.menu')) {
    document.querySelectorAll('.menu .open').forEach(li => {
      li.classList.remove('open');
      li.querySelector('.has-sub').setAttribute('aria-expanded', 'false');
    });
  }
});

Quick troubleshooting and tips

  • If a submenu won’t appear, check ancestor elements for overflow: hidden or missing position: relative on the parent <li>.
  • Add a small show/hide delay (setTimeout) if the menu flickers as the mouse moves.
  • For accessibility, add keyboard handlers for Esc and arrow navigation, and use aria-expanded updates as shown.
  • On small screens prefer a click-to-open accordion or off-canvas menu rather than hover.

This gives you a robust, accessible flyout that degrades gracefully and is easy to maintain once you move away from pure WYSIWYG editing.

Recommended Answers

All 7 Replies

Member Avatar for nominator

Dunno what you mean =\
Is it something like a ToolTip?

Member Avatar for Arch

Thanks for the interest ... what I mean is this ...

For Example:
on my website
I'm trying to make it so that when visitors move the mouse over the "Categories" link a drop down menu comes out for them to choose from further options (Links) ... and then when they move the mouse off the "Categories" link it disappears again ... I believe they are called Fly Outs or Menu Fly Outs or something like that ... I'm not the best with my nemenclature so that is probably where I am losing you ... Any help would be greatly appreciated. Thanks everyone! Great site!

P.S. I just noticed that if you click on your user name on this site out comes a 'fly out' menu of additional options (Links)...this is what I am referring too ... Thanks again in advance!

Arch

Member Avatar for nominator

You will need to use DHTML or CSS to code that i think. There are a lot of tutorials just search. www.tutorialized.com might help.

Member Avatar for Arch

Thanks ... I am using Frontpage 2003 ... what is DHTML or CSS code? Thanks Arch

Member Avatar for nominator

I dont use front page but as far as i know its not possible to do with any WYSIWYG editors.

Member Avatar for Arch

Thanks ... I know it's easy to do when you know how to do it ... it's nothing that hard ... anyone else know? Thanks Arch

Member Avatar for zippee

I suppose you like to do something like in this website (top navigation menu)

The best way to do it is using CSS. You may want to download the CSS of this website to do some homework on it. Once you master CSS, it should be fairly straightforward with careful planning.

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.