Member Avatar for fishky

Hello guys. I'm new to making web pages. I'm using Web page maker v 3.0.3 for building a page. I want my navigation bar butons to have dropdown menus on click or mouseover (graphical) but i cant figure out how to make it (something like daniweb navigation bar). I couldnt find a built in feature. I'm not very good in HTML code or Java Script. I'll really appreciate any suggestions how the problem can be solved. Thanks in advance.

  • 3 Contributors
  • 3 Replies
  • 384 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fishky

Dani AI

Generated

A short, practical companion to this thread: rightly pointed out ready-made menu scripts and reported that a commercial menu (Milonic) solved the immediate need. Those work well, but the thread didn’t show a small, accessible pattern you can drop into a page yourself. Below is a minimal, modern approach that covers mouseover, keyboard focus, and click/tap for touch devices — useful if your WYSIWYG (Web Page Maker v3.x) can’t produce the markup you need.

Basic HTML structure (semantic, keyboard-friendly):

<nav>
  <ul class="menu">
    <li>
      <a href="#" aria-haspopup="true" aria-expanded="false">Products</a>
      <ul class="submenu">
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

Simple CSS to show on hover or keyboard focus:

.menu, .menu ul { list-style:none; margin:0; padding:0; }
.menu > li { position:relative; display:inline-block; }
.menu a { display:block; padding:8px 12px; text-decoration:none; }
.submenu { position:absolute; left:0; top:100%; display:none; min-width:160px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.menu li:hover > .submenu, .menu li:focus-within > .submenu { display:block; }

Tiny JavaScript to enable click/tap toggles and maintain ARIA state:

document.querySelectorAll('.menu > li > a[aria-haspopup="true"]').forEach(function(btn){
  btn.addEventListener('click', function(e){
    var li = this.parentElement;
    var open = li.classList.toggle('open');
    this.setAttribute('aria-expanded', open ? 'true' : 'false');
    e.preventDefault();
  });
});

Troubleshooting and notes: ensure parent <li> is position:relative so absolute submenu positions work; check ancestor overflow (overflow:hidden will clip menus); use sufficient z-index for floating panels; avoid hover-only menus on touch devices — the JS toggle covers that; add Escape/arrow-key handlers if full keyboard navigation is required. If Web Page Maker injects inline styles, export the HTML and edit the markup/CSS directly or use its custom HTML widget to insert this pattern. This approach keeps things lightweight and accessible while still allowing you to switch to a polished third‑party script (as suggested earlier in the thread) if you need advanced effects.

Recommended Answers

All 3 Replies

Member Avatar for ccube921

If you post the code I can make it, otherwise, it might get a little complicated.

Member Avatar for fishky

Thanks for your help guys. I really appreciate it. I think I've solved my problem. http://www.milonic.com was very useful for me. Thanks again and good luck !

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.