Member Avatar for cynch

I have already built a site and need to make some changes to the menu. At the moment the menu just has a rollover but now I want to have an image pop out onto the side when you roller over the button. Can anyone help?

Cynch

  • 2 Contributors
  • 1 Reply
  • 194 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

asked for a menu item that shows an image “popping out” to the side on rollover; noted premade scripts are an option. Below is a modern, lightweight pattern that prefers CSS (fast, keyboard-friendly) and adds a tiny JS fallback for touch devices. The code keeps the popout out of normal layout, uses :focus-within for keyboard access, and includes a small toggle for devices without hover.

HTML + CSS (core)

<ul class="menu">
  <li class="menu-item">
    <a href="#">Products</a>
    <img class="popout" src="product-preview.jpg" alt="Product preview">
  </li>
</ul>
.menu { list-style:none; margin:0; padding:0; display:flex; gap:12px; }
.menu-item { position:relative; }
.menu-item .popout {
  position:absolute;
  left:100%;
  top:50%;
  transform:translateY(-50%) translateX(8px) scale(.98);
  opacity:0;
  pointer-events:none;
  width:220px;
  transition:transform .18s ease, opacity .18s ease;
  z-index:50;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  background:#fff;
}
.menu-item:hover .popout,
.menu-item:focus-within .popout,
.menu-item.open .popout {
  transform:translateY(-50%) translateX(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
@media (prefers-reduced-motion:reduce) {
  .menu-item .popout { transition:none; }
}

Tiny JS for touch (toggle behavior)

(function(){
  if (window.matchMedia('(hover: hover)').matches) return;
  document.querySelectorAll('.menu-item > a').forEach(a=>{
    a.addEventListener('click', function(e){
      var li = this.parentElement;
      if (!li.classList.contains('open')) {
        e.preventDefault();
        document.querySelectorAll('.menu-item.open').forEach(x=>x.classList.remove('open'));
        li.classList.add('open');
      }
    });
  });
  document.addEventListener('click', function(e){
    if (!e.target.closest('.menu-item')) document.querySelectorAll('.menu-item.open').forEach(x=>x.classList.remove('open'));
  });
})();

Quick troubleshooting and best practices

  • If the popout is clipped, check parent elements for overflow:hidden; the menu container should allow visible overflow.
  • Use appropriate alt text (empty alt="" if purely decorative).
  • Preload or inline small preview images to avoid flicker for the first hover.
  • Flip the popout to the left when near the viewport edge (add a data-side="left" attribute and switch left/right in CSS, or detect with a small script).
  • Keep images small (width ~200–300px) and test keyboard navigation and screen-reader behavior.

This pattern is lightweight, accessible, and easy to adapt for premade menu libraries if a drop-in solution is preferred.

Member Avatar for tgreer

If you have a programming question, I could probably help. If you want a premade menu script, there are lots of them out there. The Google Ads associated with this thread might be a good place to start.

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.