Member Avatar for reen.blom

With kind help of Robothy, I managed to slice up my site design to redo it in CSS.
Before:

After:

Now I got my final headache. The drop down menu. The old one is done in JavaScript, and one my friend complained that it did not work on her computer ( I suspect that she might have JavsScript disabled). Now is that accessebility issue?

I found plenty CSS menu templates, BUT my oh my after 2 weeks, I still cant get them working!!!


Actually at the moment I only need it for one button EVENTS (might need one for DANCERS later) and I heard an opinion that because only one button has a drop down menu it is confusing????

In the menu I want to put Events 2007, 2008 and 2009. Every year I will have to add one.

The question is, should I keep on struggling with drop down menu or should I make a "useless" Events page just with links to different years?

Do you guys think that Having a drop down menu just on one button is confusing?

Thanks!
reen.blom

  • 2 Contributors
  • 2 Replies
  • 288 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by reen.blom

Dani AI

Generated

Short answer: a JavaScript-only flyout can be an accessibility problem if some visitors have scripts disabled or rely on keyboard/screen-reader access. A few practical, low-effort options are: keep a plain Events index page (good fallback and perfectly acceptable for one-item subnav), use a CSS/:focus-based solution, or use the semantic HTML <details> disclosure for a no-JS toggle. These approaches preserve navigation for users who have JS off and make keyboard navigation straightforward. (w3.org)

A minimal, semantic pattern that works without extra scripting is a <details>/<summary> wrapper around a list of links. It degrades gracefully, is keyboard-operable, and can be styled with CSS. Example structure:

<nav>
  <details>
    <summary>Events v</summary>
    <ul>
      <li><a href="/events/2007">2007</a></li>
      <li><a href="/events/2008">2008</a></li>
      <li><a href="/events/2009">2009</a></li>
    </ul>
  </details>
</nav>

Use visible focus styles and test opening/closing with Tab, Enter/Space, and Esc keys. For fuller ARIA-driven menus (keyboard focus management, aria-expanded, aria-haspopup) follow the WAI-ARIA patterns and test with assistive tech. (developer.mozilla.org)

Context for this thread: ’s Dreamweaver tip is practical for rapid JS-based menus, but that generates script-dependent behavior which you were rightly avoiding. ’s decision to postpone the dropdown is a valid, user-friendly choice — many sites favor a simple Events landing page and add a dropdown later when richer interaction is needed. If you do add a single dropdown, make its affordance obvious (an arrow or “v”), keep the items as real links, ensure keyboard visibility/focus, and test with JS turned off and with a keyboard.

Recommended Answers

All 2 Replies

Member Avatar for sreein1986

OK
It is simple in dreamweaver software. first download and install Dreamweaver software in you computer.

first remove your javascript in html code and put all images in your site using dremaweaver
In dreamweaver first select Image and go to window menu > Behaviors
press Plus(+) mark and select show pop-Up menu and add your events what you want

Dreamweaver write remaining javascript and every thing seperate files

Member Avatar for reen.blom

Thank you for advice Sreein! I think I am going to try that with my next project!

With this one I wanted to avoid JavaScript. Finally I decided to avoid menues for now.

Will definitly use the dreamweaver technique in the future!

*hug*

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.