Member Avatar for Latrell_vie

Urgently need a menu dropdown WITH IMAGES for a restaurant website for its food menu. Looked for jquery on the internet,couldnt find one, only complete wordpress themes or some without images , but i'm looking for javascript or jquery or anything else to implement since the website is not on wordpress.

Help !!!!! Thx !!!!!

  • 2 Contributors
  • 2 Replies
  • 275 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Latrell_vie

Dani AI

Generated

For : building an image-enabled dropdown without WordPress is straightforward—most standard dropdown patterns just need the menu items to include an <img> (or a background image) and a small amount of JS to handle hover/click and ARIA toggles. is correct that an existing dropdown can be adapted; below is a minimal, practical pattern and the common fixes that solve the typical problems seen in restaurant menus.

Minimal structure and behavior (HTML + jQuery example):

<nav class="menu" role="navigation">
  <ul class="menu-root" role="menubar">
    <li class="menu-item" role="none">
      <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false">Pizzas</a>
      <ul class="submenu" role="menu" aria-label="Pizzas">
        <li role="none">
          <a href="/menu/margherita" role="menuitem">
            <img class="thumb" src="images/margherita-thumb.jpg" alt="Margherita" loading="lazy" width="80" height="60" />
            Margherita
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Simple jQuery toggle:

$('.menu-root > .menu-item > a').on('click', function(e){
  e.preventDefault();
  var $li = $(this).closest('.menu-item');
  var open = $li.toggleClass('open').hasClass('open');
  $(this).attr('aria-expanded', open);
  $li.siblings().removeClass('open').find('> a').attr('aria-expanded', 'false');
});

Practical tips and troubleshooting

  • Mobile vs desktop: avoid hover-only menus. Use click/tap toggles and a CSS media-query breakpoint that switches the submenu to static/accordion layout.
  • Layout and z-index: make the top LI position:relative and the .submenu position:absolute; ensure ancestor containers do not have overflow:hidden.
  • Performance: use small thumbnails, add width/height attributes to avoid layout shift, enable loading="lazy", and serve compressed images (thumbnails for menus, larger images only on demand).
  • Accessibility: keep role/aria attributes, update aria-expanded on toggle, and add keyboard handlers for Enter/Space/Escape and arrow navigation.
  • Common fixes for posted code samples: if dropdowns are clipped, check ancestor overflow and stacking context; if images break layout, check missing size attributes or object-fit; if nothing opens on touch, replace mouseenter with click handlers.

This pattern adapts to most existing nav scripts and keeps the menu fast, accessible, and mobile-friendly for restaurant sites.

Recommended Answers

All 2 Replies

Member Avatar for Member #120589

Urgent = for you, not us.

Do you have aa sample screenshot of what you'd like it to look like?
I don't see why you need a specific script for this - most dropdown menus could be adapted - but depends on what you want - and as you haven't specified - we're in the dark.

Member Avatar for Latrell_vie

i put up another post with code sample

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.