Let’s create an Apple Dock Navigation Bar using HTML, CSS, and JavaScript! This project will replicate the iconic Apple Dock with smooth animations and interactivity for a sleek user experience.
We’ll use HTML for the dock structure, CSS for styling and animations, and JavaScript to add dynamic scaling effects when hovering over the icons.
Let’s get started with the Apple Dock Navigation Bar. This project is perfect for learning how to build interactive navigation elements that are both functional and visually appealing. Let’s bring that Apple-inspired design to life!
HTML :
This HTML code creates an interactive navigation bar styled like the Apple Dock. Each navigation item displays an app icon and a tooltip with the app name on hover. The design uses a list structure (<ul> with <li> items), where each item contains an icon image and a tooltip. External CSS (style.css) defines the appearance and hover effects, while the JavaScript file (script.js) likely adds interactivity. The gsap library is also included for advanced animations. This design is clean, modern, and visually engaging, ideal for showcasing apps or tools.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Apple Dock Navigation Bar | codingstella</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<section class="cloneable">
<div class="nav-wrap">
<nav class="nav-bar">
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/notion.png" loading="eager" alt="Notion app icon" class="image"></a>
<div class="nav-item__tooltip">
<div>Notion</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/vs-code.png" loading="eager" alt="VS code icon" class="image"></a>
<div class="nav-item__tooltip">
<div>VS Code</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/slack.png" loading="eager" alt="Slack icon" class="image"></a>
<div class="nav-item__tooltip">
<div>Slack</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/loom.png" loading="eager" alt="Loom icon" class="image"></a>
<div class="nav-item__tooltip">
<div>Loom</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/spotify.png" loading="eager" alt="Spotify icon" class="image"></a>
<div class="nav-item__tooltip">
<div>Spotify</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/app-store.png" loading="eager" alt="App store icon" class="image"></a>
<div class="nav-item__tooltip">
<div>App Store</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/canva.png" loading="eager" alt="Canva icon" class="image"></a>
<div class="nav-item__tooltip">
<div>Canva</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/adobe-illustrator.png" loading="eager" alt="Adobe Illustrator icon" class="image"></a>
<div class="nav-item__tooltip">
<div>Adobe Illustrator</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/figma.png" loading="eager" alt="figma icon" class="image"></a>
<div class="nav-item__tooltip">
<div>Figma</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/adobe-photoshop.png" loading="eager" alt="Photoshop icon" class="image"></a>
<div class="nav-item__tooltip">
<div>Photoshop</div>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-item__link"><img src="/Images/adobe-premierepro.png" loading="eager" alt="Premiere Pro icon" class="image"></a>
<div class="nav-item__tooltip">
<div>Premiere Pro</div>
</div>
</li>
</ul>
</nav>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="./script.js"></script>
</body>
</html>CSS :
This CSS defines a responsive, visually appealing navigation bar and general site styling. It sets up custom properties (CSS variables) for consistent colors, animations, and spacing, with responsive adjustments for different screen sizes. The navigation items expand on hover, affecting neighboring items for a smooth interaction. It also includes global resets, hides scrollbars for a clean look, and styles tooltips with animations for better user experience.
:root {
--color-light: var(--color-neutral-200);
--color-dark: var(--color-neutral-800);
--color-primary: #ff4c24;
--color-neutral-100: #ffffff;
--color-neutral-200: #efeeec;
--color-neutral-300: #e3e1de;
--color-neutral-400: #cbc8c5;
--color-neutral-500: #818180;
--color-neutral-600: #2c2c2c;
--color-neutral-700: #1f1f1f;
--color-neutral-800: #131313;
--color-neutral-900: #000000;
--color-white: var(--color-neutral-100);
--color-black: var(--color-neutral-900);
--color-error: var(--color-primary);
--color-success: #0ba954;
--cubic-default: cubic-bezier(0.65, 0.05, 0, 1);
--duration-default: 0.735s;
--animation-default: var(--duration-default) var(--cubic-default);
--gap: 2em;
--section-padding: calc(3.5em + (var(--gap) * 2));
--container-padding: 2em;
--header-height: calc(1.5em + (var(--gap) * 2));
--footer-height: calc(2.785em + (var(--gap) * 2));
}
/* Tablet */
@media screen and (max-width: 991px) {
:root {
--container-padding: 1.5em;
}
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
:root {
--container-padding: 1em;
}
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
:root {}
}
/* Desktop */
:root {
--size-unit: 16; /* body font-size in design - no px */
--size-container-ideal: 1440; /* screen-size in design - no px */
--size-container-min: 992px;
--size-container-max: 1920px;
--size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
--size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}
/* Tablet */
@media screen and (max-width: 991px) {
:root {
--size-container-ideal: 834; /* screen-size in design - no px */
--size-container-min: 768px;
--size-container-max: 991px;
}
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
:root {
--size-container-ideal: 390; /* screen-size in design - no px */
--size-container-min: 480px;
--size-container-max: 767px;
}
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
:root {
--size-container-ideal: 390; /* screen-size in design - no px */
--size-container-min: 320px;
--size-container-max: 479px;
}
}
/* ------------------------- Hide Scrollbar -------------------------------------------------- */
body ::-webkit-scrollbar,
body::-webkit-scrollbar {display: none;}
body {-ms-overflow-style: none;}
html {scrollbar-width: none;}
/* ------------------------- Reset -------------------------------------------------- */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
scroll-behavior: initial;
}
html,
body {
-webkit-font-smoothing: antialiased;
}
svg {
max-width: none;
height: auto;
box-sizing: border-box;
vertical-align: middle;
}
a {
color: inherit;
}
/* Selection */
::selection {
background-color: var(--color-primary);
color: var(--color-dark);
text-shadow: none;
}
::-moz-selection {
background-color: var(--color-primary);
color: var(--color-dark);
text-shadow: none;
}
/* Additional Styling */
body {
background-color: var(--color-neutral-300);
color: var(--color-dark);
font-size: var(--size-font);
font-family: Arial, sans-serif;
}
.cloneable {
padding: var(--container-padding);
justify-content: center;
align-items: center;
min-height: 100vh;
display: flex;
position: relative;
}
.nav-wrap {
z-index: 100;
pointer-events: none;
justify-content: center;
align-items: flex-end;
display: flex;
position: fixed;
inset: 0 0 10vh;
}
.nav-list {
flex-flow: row;
justify-content: center;
align-items: flex-end;
margin-bottom: 0;
padding-left: 0;
display: flex;
font-size: 1.4vw;
}
.nav-item {
justify-content: center;
align-items: center;
width: 5em;
transition: width .5s cubic-bezier(.16, 1, .3, 1);
display: flex;
position: relative;
}
.nav-item.hover {
width: 8em;
}
.nav-item.sibling-close {
width: 7em;
}
.nav-item.sibling-far {
width: 6em;
}
.nav-item__link {
z-index: 1;
pointer-events: auto;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding-left: .5em;
padding-right: .5em;
display: flex;
position: relative;
}
.image {
object-fit: contain;
width: 100%;
}
.nav-item__tooltip {
z-index: 0;
background-color: var(--color-neutral-100);
opacity: 0;
white-space: nowrap;
border-radius: .25em;
padding: .4em .5em;
font-size: 1em;
transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .5s cubic-bezier(.16, 1, .3, 1);
position: absolute;
top: 0;
transform: translate(0, -80%);
font-weight: 400;
}
.nav-item:hover .nav-item__tooltip {
opacity: 1;
transform: translate(0px, -140%);
}
JavaScript:
This code listens for the page to fully load and then adds hover effects to elements with the .nav-item class. When an item is hovered, it highlights itself (hover class) and nearby siblings using custom classes (sibling-close and sibling-far) based on their distance. These classes are added or removed dynamically to create interactive hover effects, making the navigation visually engaging.
document.addEventListener("DOMContentLoaded", () => {
// Select all .nav-item elements
const navItems = document.querySelectorAll('.nav-item');
// Helper function to add/remove a class to a sibling at a given offset
const toggleSiblingClass = (items, index, offset, className, add) => {
const sibling = items[index + offset];
if (sibling) {
sibling.classList.toggle(className, add);
}
};
// Event listeners to toggle classes on hover
navItems.forEach((item, index) => {
item.addEventListener('mouseenter', () => {
item.classList.add('hover'); // Add .hover to current item
// Toggle classes for siblings
toggleSiblingClass(navItems, index, -1, 'sibling-close', true); // Previous sibling
toggleSiblingClass(navItems, index, 1, 'sibling-close', true); // Next sibling
toggleSiblingClass(navItems, index, -2, 'sibling-far', true); // Previous-previous sibling
toggleSiblingClass(navItems, index, 2, 'sibling-far', true); // Next-next sibling
});
item.addEventListener('mouseleave', () => {
item.classList.remove('hover'); // Remove .hover from current item
// Toggle classes for siblings
toggleSiblingClass(navItems, index, -1, 'sibling-close', false); // Previous sibling
toggleSiblingClass(navItems, index, 1, 'sibling-close', false); // Next sibling
toggleSiblingClass(navItems, index, -2, 'sibling-far', false); // Previous-previous sibling
toggleSiblingClass(navItems, index, 2, 'sibling-far', false); // Next-next sibling
});
});
});In conclusion, creating a New Year Animation using HTML, CSS, and JavaScript has been a fun and creative project. By combining HTML for structure, CSS for styling and festive animations, and JavaScript for dynamic effects, we’ve crafted a lively and interactive way to celebrate the New Year. This project is perfect for learning new techniques while spreading holiday cheer.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
