Creating An OS X-Like Dock Menu with jQuery

With the help of jQuery resizeOnApproach.js, we can transform a set of images into an OS X-like dock menu with icons that expand on hover.

See aslo:

• jQuery Mac-like Dock Menu Plugin - jqdock
• Mac-Like CSS Dock Menu with jQuery

How to use it:

1. Insert a set of images using Html list into your web page.

<div class="dock-menu">
  <ul class="dock-menu-list">
    <li><img src="1.png" alt="" title=""></li>
    <li><img src="2.png" alt="" title=""></li>
    <li><img src="3.png" alt="" title=""></li>
    ...
  </ul>
</div>

2. Include the necessary jQuery library and the jQuery resizeOnApproach.js at the end of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.resizeOnApproach.1.0.min.js"></script>

3. A little CSS to style the dock menu.

.dock-menu {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 0;
}

.dock-menu-list {
  display: inline-block;
  padding: 0;
  list-style: none;
}

.dock-menu-list li {
  display: inline-block;
  margin: 0;
  padding: 0;
  min-width: 50px;
  min-height: 50px;
}

.dock-menu-list li img {
  display: inline-block;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

4. Enable the dock menu with customization options.

$(document).ready(function(){
  $('.dock-menu-list img').resizeOnApproach({
    elementDefault: 50,
    elementClosest: 120,
    triggerDistance: 300,
    setWidthAndHeight: false
  });
});

---

This awesome jQuery plugin is developed by adrianparr. For more Advanced Usages, please check the demo page or visit the official website.