Member Avatar for OsaMasw

hey guys , I'd like to add a fancy navigation menu for users like this example
http://tympanus.net/Development/SelectInspiration/index8.html
but this is a select input not a link, I need a tutorial to achive something like that using jquery and css,
so I put a link image when press on it a circular menu appears and user click on one of them,
could anyone point me to any tutorial ?

  • 1 Contributor
  • 1 Reply
  • 258 Views
  • 4 Minutes Discussion Span
  • Latest Post Latest Post by OsaMasw

Dani AI

Generated

— the pie/select demo you found can be adapted into a clickable image + link-based circular menu by centering an absolutely positioned UL over the trigger and using CSS transforms (rotate + translate + counter-rotate) for placement. The pattern below is compact, accessible-friendly, and tuned for smooth animations on modern browsers.

Recommended markup and basic CSS:

<div class="pie-trigger" role="menu" aria-expanded="false">
  <img src="trigger.png" alt="open menu" class="trigger">
  <ul class="pie-menu" aria-hidden="true">
    <li role="menuitem"><a href="/page1">Page 1</a></li>
    <li role="menuitem"><a href="/page2">Page 2</a></li>
    <li role="menuitem"><a href="/page3">Page 3</a></li>
  </ul>
</div>
.pie-trigger { position: relative; display: inline-block; }
.pie-menu { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); list-style:none; margin:0; padding:0; }
.pie-menu li { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); transition: transform .22s ease, opacity .18s ease; opacity:0; pointer-events:none; }
.pie-menu.open li { opacity:1; pointer-events:auto; }

Core jQuery to spread items around a circle and toggle the menu:

$('.trigger').on('click', function(e){
  e.preventDefault();
  var $wrap = $(this).closest('.pie-trigger');
  var $menu = $wrap.find('.pie-menu');
  var $items = $menu.find('li');
  var radius = 80; // px
  $menu.toggleClass('open').attr('aria-hidden', function(i,v){ return v==='true' ? 'false' : 'true'; });
  $wrap.attr('aria-expanded', $menu.hasClass('open'));
  var center = 'translate(-50%,-50%)';
  $items.each(function(i){
    var angleDeg = (i / $items.length) * 360 - 90; // start at top
    var openTransform = center + ' rotate(' + angleDeg + 'deg) translate(' + radius + 'px) rotate(-' + angleDeg + 'deg)';
    $(this).css('transform', $menu.hasClass('open') ? openTransform : center);
  });
});

Troubleshooting and quick tips:

  • Ensure .pie-trigger is position:relative so the menu centers on the trigger.
  • Animate only transform/opacity for best performance; avoid top/left.
  • Add keyboard handling (arrow keys, Escape) and set focusable links/tabindex for accessibility.
  • For touch, listen to pointerdown/touchstart to avoid click delays.
  • If items look off, check that each LI starts centered (left:50%, top:50%) and that percent-based transforms are not overridden by other styles.

This pattern turns a select-like demo into a production-friendly circular nav while keeping anchors, keyboard access, and smooth GPU-accelerated animation.

Member Avatar for OsaMasw

sorry for this, but after I wrote this post , I realized I didn't write the right term in searching :P, I've found
https://github.com/Nikesh/Pie-Menu
and its what I need .

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.