Users often want to replicate the sleek and functional interface of a macOS environment on their web pages. This tutorial provides a clear guide on how to create a visually appealing and interactive macOS Dock in HTML and CSS, along with a touch of JavaScript for dynamic effects. By following these steps, you can create a captivating dock that enhances the user experience of your website.
How to Create a macOS Dock in HTML and CSS
Include Header Assets
First, you need to add external assets. Place the following link inside the <head> tag of your HTML document. This link imports Font Awesome icons.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
Build the HTML Structure
Next, create the main HTML structure for both the menu bar and the dock. This setup includes all the icons and menu items you will style.
<div class="menu-bar">
<div class="left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Apple_logo_white.svg/1010px-Apple_logo_white.svg.png" class="apple-logo" alt="">
<span class="menus active">Finder</span>
<span class="menus">File</span>
<span class="menus">Edit</span>
<span class="menus">View</span>
<span class="menus">Go</span>
<span class="menus">Window</span>
<span class="menus">Help</span>
</div>
<div class="right">
<div class="menu-ico">
<img src="https://freepngimg.com/download/united_states/76187-sound-information-united-business-states-address-email.png" alt="" class="vol">
</div>
<div class="menu-ico">
<i class="fab fa-bluetooth-b"></i>
</div>
<div class="menu-ico">
<i class="fas fa-battery-half"></i>
</div>
<div class="menu-ico">
<i class="fas fa-wifi"></i>
</div>
<div class="menu-ico">
<i class="fas fa-search"></i>
</div>
<div class="menu-ico">
<img src="https://eshop.macsales.com/blog/wp-content/uploads/2021/03/control-center-icon.png" alt="" class="control-center">
</div>
<div class="menu-ico">
<img src="https://upload.wikimedia.org/wikipedia/en/8/8e/AppleSiriIcon2017.png" alt="" class="siri">
</div>
<div class="menu-time">
Mon 31 May 05:30
</div>
</div>
</div>
<div class="dock">
<div class="dock-container">
<li class="li-1">
<div class="name">Finder</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853981255cc36b3a37af_finder.png" alt="">
</li>
<li class="li-2">
<div class="name">Siri</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853ff3bafbac60495771_siri.png" alt="">
</li>
<li class="li-3">
<div class="name">LaunchPad</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853943597517f128b9b4_launchpad.png" alt="">
</li>
<li class="li-4">
<div class="name">Contacts</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853743597518c528b9b3_contacts.png" alt="">
</li>
<li class="li-5">
<div class="name">Notes</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853c849ec3735b52cef9_notes.png" alt="">
</li>
<li class="li-6">
<div class="name">Reminders</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853d44d99641ce69afeb_reminders.png" alt="">
</li>
<li class="li-7">
<div class="name">Photos</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853c55558a2e1192ee09_photos.png" alt="">
</li>
<li class="li-8">
<div class="name">Messages</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853a55558a68e192ee08_messages.png" alt="">
</li>
<li class="li-9">
<div class="name">FaceTime</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f708537f18e2cb27247c904_facetime.png" alt="">
</li>
<li class="li-10">
<div class="name">Music</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853ba0782d6ff2aca6b3_music.png" alt="">
</li>
<li class="li-11">
<div class="name">Podcasts</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853cc718ba9ede6888f9_podcasts.png" alt="">
</li>
<li class="li-12">
<div class="name">TV</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f708540dd82638d7b8eda70_tv.png" alt="">
</li>
<li class="li-12">
<div class="name">App Store</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853270b5e2ccfd795b49_appstore.png" alt="">
</li>
<li class="li-14">
<div class="name">Safari</div>
<img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853ddd826358438eda6d_safari.png" alt="">
</li>
<li class="li-bin li-15">
<div class="name">Bin</div>
<img class="ico ico-bin" src="https://findicons.com/files/icons/569/longhorn_objects/128/trash.png" alt="">
</li>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'></script><script src="./script.js"></script>
Apply CSS Styles
Now, style your menu bar and dock using CSS. This code defines the layout, appearance, and animations to mimic the macOS look. Add these styles to your stylesheet.
*,
html,
body {
margin: 0;
padding: 0;
height: 100%;
font-family: "San Francisco";
}
@font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
@font-face {
font-family: "San Francisco";
font-weight: 800;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff");
}
body {
background: url(https://4kwallpapers.com/images/wallpapers/macos-big-sur-apple-layers-fluidic-colorful-wwdc-stock-2880x1800-1455.jpg);
background-size: cover;
}
.menu-bar {
width: 100%;
height: 30px;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(83, 83, 83, 0.4);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
}
.menu-bar .left {
display: flex;
align-items: center;
justify-content: space-evenly;
width: auto;
margin-left: 20px;
}
.menu-bar .left .apple-logo {
transform: scale(0.6);
}
.menu-bar .left .menus {
height: 100%;
display: flex;
align-items: center;
margin-left: 20px;
color: rgba(255, 255, 255, 0.95);
font-size: 14px;
}
.menu-bar .left .active {
font-weight: bold;
color: #fff !important;
}
.menu-bar .right {
display: flex;
align-items: center;
justify-content: space-evenly;
width: 380px;
margin-right: 20px;
}
.menu-bar .right .vol {
transform: scale(0.6);
margin-right: -10px;
}
.menu-bar .right .menu-time {
height: 100%;
width: auto;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.menu-bar .right .menu-ico {
height: 100%;
width: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-bar .right .menu-ico .control-center {
-webkit-filter: invert(100%);
filter: invert(100%);
transform: scale(0.5);
}
.menu-bar .right .menu-ico .siri {
transform: scale(0.7);
object-fit: fill;
}
.menu-bar .right .menu-ico i {
display: contents;
font-size: 16px;
color: #fff;
}
.dock {
width: auto;
height: 60px;
border-radius: 16px;
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.dock .dock-container {
padding: 3px;
width: auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: rgba(83, 83, 83, 0.25);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.dock .dock-container .li-bin {
margin-left: 20px;
border-left: 1.5px solid rgba(255, 255, 255, 0.4);
padding: 0px 10px;
}
.dock .dock-container .li-1::after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
content: "";
bottom: 2px;
}
.dock .dock-container li {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
vertical-align: bottom;
transition: 0.2s;
transform-origin: 50% 100%;
}
.dock .dock-container li:hover {
margin: 0px 13px 0px 13px;
}
.dock .dock-container li .name {
position: absolute;
top: -70px;
background: rgba(0, 0, 0, 0.5);
color: rgba(255, 255, 255, 0.9);
height: 10px;
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
visibility: hidden;
}
.dock .dock-container li .name::after {
content: "";
position: absolute;
bottom: -10px;
width: 0;
height: 0;
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0, 0, 0, 0.5);
}
.dock .dock-container li .ico {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.2s;
display: inline-block;
transition: transform 0.3s ease;
}
.dock .dock-container li .ico-bin {
width: 94% !important;
height: 94% !important;
object-fit: cover;
transition: 0.2s;
}
.dock .dock-container li .ico-bin:hover {
margin-left: 10px;
}
.li-1:hover .name {
visibility: visible !important;
}
.li-2:hover .name {
visibility: visible !important;
}
.li-3:hover .name {
visibility: visible !important;
}
.li-4:hover .name {
visibility: visible !important;
}
.li-5:hover .name {
visibility: visible !important;
}
.li-6:hover .name {
visibility: visible !important;
}
.li-7:hover .name {
visibility: visible !important;
}
.li-8:hover .name {
visibility: visible !important;
}
.li-9:hover .name {
visibility: visible !important;
}
.li-10:hover .name {
visibility: visible !important;
}
.li-11:hover .name {
visibility: visible !important;
}
.li-12:hover .name {
visibility: visible !important;
}
.li-13:hover .name {
visibility: visible !important;
}
.li-14:hover .name {
visibility: visible !important;
}
.li-15:hover .name {
visibility: visible !important;
}
Add JavaScript for Interactivity
Finally, implement JavaScript to add dynamic hover effects to the dock icons. This script makes icons enlarge when the mouse hovers over them, similar to a real macOS dock.
const icons = document.querySelectorAll(".ico");
const resetIcons = () => {
icons.forEach((item) => {
item.style.transform = "scale(1) translateY(0px)";
});
};
icons.forEach((item, index) => {
item.addEventListener("mouseover", () => focus(index));
item.addEventListener("mouseleave", resetIcons);
});
const focus = (index) => {
resetIcons();
const transformations = [
{ idx: index - 2, scale: 1.1, translateY: 0 },
{ idx: index - 1, scale: 1.2, translateY: -6 },
{ idx: index, scale: 1.5, translateY: -10 },
{ idx: index + 1, scale: 1.2, translateY: -6 },
{ idx: index + 2, scale: 1.1, translateY: 0 }
];
transformations.forEach(({ idx, scale, translateY }) => {
if (icons[idx]) {
console.log(scale);
icons[
idx
].style.transform = `scale(${scale}) translateY(${translateY}px)`;
}
});
};
Include Footer Assets
To support the JavaScript functionality, include the following scripts before the closing </body> tag. These links provide the necessary libraries.
That’s all! You have now successfully created a macOS Dock in HTML and CSS with interactive effects.
