Member Avatar for crazynp

can anybody guide me to make windows.com style upper horizontal menu bar.
thanks in advance!

  • 3 Contributors
  • 3 Replies
  • 132 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #114696

Dani AI

Generated

— and pointed you toward Flash and JS. Flash was a common choice back then but is no longer a viable platform (Adobe ended Flash Player support). A durable, accessible approach now is semantic HTML for the structure, CSS (flexbox and transforms) for layout and smooth animation, and a small JS layer only for keyboard/touch behavior and state (aria-* attributes).

Start with simple, semantic markup and ARIA roles so the menu works without JS and can be enhanced:

<nav class="topnav" aria-label="Main">
  <ul role="menubar" class="menu">
    <li role="none">
      <a role="menuitem" href="#">Products</a>
      <ul role="menu" class="submenu">
        <li role="none"><a role="menuitem" href="#">Windows</a></li>
      </ul>
    </li>
    <li role="none"><a role="menuitem" href="#">Support</a></li>
  </ul>
</nav>

CSS should handle the horizontal layout and the show/hide animation. Use flexbox for the top row, and animate transform and opacity (not height) for best performance:

.topnav { display:flex; gap:1rem; }
.submenu { position:absolute; transform:translateY(-6px) scaleY(.98); opacity:0; pointer-events:none; transition:transform .18s, opacity .18s; }
li:focus-within > .submenu,
li:hover > .submenu { transform:translateY(0) scaleY(1); opacity:1; pointer-events:auto; }

Add a small JS layer to manage keyboard navigation (arrow keys, Esc), toggle aria-expanded for touch, and move focus into submenus. Follow the WAI-ARIA menubar pattern and test with a screen reader and on touch devices. Useful references: WAI-ARIA Authoring Practices menubar examples (WAI-ARIA APG) and MDN docs on HTML navigation and flexbox (nav element, Flexbox basics).

Recommended Answers

All 3 Replies

Member Avatar for Member #46692

You got two options.

Javascript or flash.

Flash is definitely more flexible.

Member Avatar for crazynp

You got two options.

Javascript or flash.

Flash is definitely more flexible.

Thanks
Will you plz guide me to some reference material. As I have nothing done with flash except some minor animations.

Member Avatar for Member #114696

Thanks
Will you plz guide me to some reference material. As I have nothing done with flash except some minor animations.

Well, the process is quite simple. Not much experience required. Even simple gotoAndPlay(), gotoAndStop(), stop() functions could help you to make it. Here's a primer that will teach you to make a simple drop-down. http://www.kirupa.com/developer/mx/dropdownmenu.htm.

You could modify it your own way and get what you want.

Of course if you have a little more experience with flash and actionscript, you could make flexible and reusable menu with better features, that could be better animations or importing menu items from XML.

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.