Create Mac Style Dock Menu – CSS Example.

Home » css examples » Create Mac Style Dock Menu – CSS Example.

mac style dock menu

Create Mac Style Dock Menu – CSS Example.

I have seen a lot of websites trying to mimic MacOS components.

Most of them use jQuery to make Mac docks.

So I was thinking about making one only using transitions and transform elements.

In this live example ill show you the mac style dock menu created with CSS only .

Absolutely no JavaScript used.

Of course it has a bit different look and feel in every browser, but it will help you get the basic idea.

Feel free to Fork it on CodePen and use it as you wish.

Mac Style Dock Menu :

Check out this Pen!


You can check also some cool CSS text animations effects  here


If you liked this article please share it on your social networks.


Nikola fivera Petrovic
Get in Touch

Nikola fivera Petrovic

Hi there. My name is Nikola,
I speak English, Greek and Serbian.
As a Web Producer i can deal with almost anything web design & development related.

Web Design Skills

I have been into web design for the last 10+ years.
After working for various agencies and companies I have decided to take a lone wolf path as a Freelancer but I still actively collaborate with agencies across the globe.
I enjoy building websites on WordPress platform but i can work on any other platforms as well.

SEO Skills

I have spent a last couple of years as an SEO executive and SEO consultant working on 4 continents.
Specialized in on-page SEO I wear a pointy Google-Wizard White-Hat and help various small and medium-sized businesses rank well in the search engines.
I enjoy working with Google and Yahoo SE.
Feel free to request a free meeting bellow.
As a freelancer, I charge only a small portion of the money you would pay to agencies to get your project done.
Nikola fivera Petrovic
Get in Touch

Leave a Reply

1 Comment on "Create Mac Style Dock Menu – CSS Example."

Notify of
Sort by:   newest | oldest | most voted

is there a way i could reposition the dock menu to near the top of my site