Mac OS Dock Menu with CSS3

Mac OS Dock Menu with pure css3 and HTML? Possible? We have seen different types of menu in web applications. Different styles, different animations, different colors etc are used for menus. If you are familiar with Mac os, you must be knowing how the docker menu is. The Docker is the bar of icons that sits at the bottom of your screen. It provides easy access to some of the Apple applications on your Mac.

Mac Style Doc Menu with pure CSS3

Today, we will see how to create Mac style Dock Menu with CSS3. A menu which looks similar to mac os docker menu only using CSS3 and HTML. As we know, the css3 properties will help us to add some animation effects and reflection effects to the icons. The mouse over animations will be added only with CSS3 transitions, without the help of any JavaScript.

HTML FOR Mac OS Dock Menu

<div id="dock-container">
 <div id="dock">
   <ul>
      <li>
        <span>Address Book</span>
        <a href="#"><img src="icon-1.png"/></a>
      </li>
      <li>
        <span>App Store</span>
        <a href="#"><img src="icon-2.png"/></a>
      </li>
      <li>
         <span>Chrome</span>
         <a href="#"><img src="icon-3.png"/></a>
      </li>
      <li>
         <span>Firefox</span>
         <a href="#"><img src="icon-4.png"/></a>
      </li>
   </ul>
 </div>
</div>

Here, we have added a list inside a wrapper. Just for showing the html structure, I have added 4 list items. In each list item, there is a span, a tag and img tag. Use your own images for the items. A span is added with the item name. We will make this text visisble only when we hover over the icon. The mark up is ready. Now we need to style the elements to look like a mac os dock menu.

CSS FOR Mac OS Dock Menu

The first part of styling is for the main wrapper and list.

      #dock-container {
            position: fixed;
            bottom: 0;
            text-align: center;
            right: 20%;
            left: 20%;
            width: 60%;
            background: rgba(255,255,255,0.2);
            border-radius: 10px 10px 0 0;
        }
        #dock-container li {
            list-style-type: none;
            display: inline-block;
            position: relative;
        }

A container with id ‘dock-container’ is added. We are adding the position to fixed and make bottom to ‘0’. Now it be attached to the bottom part of the window. Remove the default bullet style from the li and make it display inline-block. Also add position to relative, since we have to position the span inside the ‘li’ to absolute.

Our container and li is ready. Now we need to style the image and reflection for the image as we can see on mac os dock menu.

   #dock-container li img {
          width: 64px;
          height: 64px;
          -webkit-box-reflect: below 2px
                    -webkit-gradient(linear, left top, left bottom, from(transparent),
                    color-stop(0.7, transparent), to(rgba(255,255,255,.5)));
          -webkit-transition: all 0.3s;
          -webkit-transform-origin: 50% 100%;
        }

Here I am using “box-reflect”. Remember, box-reflect is supported by webkit only.

CSS for adding animation for the Mac os dock menu on hover

     #dock-container li:hover img { 
          -webkit-transform: scale(2);
          margin: 0 2em;
        }
        #dock-container li:hover + li img,
        #dock-container li.prev img {
          -webkit-transform: scale(1.5);
          margin: 0 1.5em;
        }

On hover of the image, we are making the transform: scale to 2, to show the zoom effect. The second part of the above css is to zoom or magnify the icon at the right hand side of the hovered icon , all you need to do is define the scale with using a CSS adjacent-sibling selector. Now the zooming part of the mac os dock menu is ready. Now we need to style the span, which will be showing the text related to the menu item. Initially, it will be hidden and when we hover over the icon, we make the span visible.

     #dock-container li span {
            display: none;
            position: absolute;
            bottom: 140px;
            left: 0;
            width: 100%;
            background-color: rgba(0,0,0,0.75);
            padding: 4px 0;
            border-radius: 12px;
        }
        #dock-container li:hover span {
            display: block;
            color: #fff;
        }

Position the span absolutely to display above the icon on hover. Yes, now the mac dock menu with css3 is ready. See the live demo.

Demo for Mac OS dock menu with css3

Mac OS Dock Menu with css3 Demo

label, , , , , ,

About the author