Admin BeliScript 3 months ago

admin #coding-tutorial

CODE Dynamic Fluid Navigation Menu (Gratis)

Apa itu Dynamic Fluid Navigation Menu?

💧 CODE Dynamic Fluid Navigation Menu (Gratis)

Ingin tampilan navigasi website kamu terlihat modern, dinamis, dan menarik perhatian pengunjung? Di artikel ini, BeliScript.com menghadirkan Dynamic Fluid Navigation Menu – sebuah menu interaktif dengan efek animasi fluid (cair) yang elegan dan responsif.

✨ Apa itu Dynamic Fluid Navigation Menu?

Dynamic Fluid Navigation Menu adalah menu navigasi dengan efek animasi lembut saat kamu mengarahkan kursor ke item menu. Efek ini membuat navigasi terasa "hidup" dan lebih menarik untuk pengguna. Cocok banget digunakan di:

Website portofolio pribadi
Landing page startup
UI demo atau website eksperimen kreatif
Website toko digital

🧩 Fitur Unggulan:

Desain responsif – tampil bagus di semua ukuran layar
Animasi fluid interaktif – efek hover yang mulus dan elegan
Tanpa framework – cukup HTML, CSS, dan JavaScript
100% Gratis – bisa kamu pakai untuk proyek pribadi atau komersial

🚀 Cara Menggunakan

Download file berisi index.html, style.css, dan script.js
Upload ke folder proyek kamu
Buka index.html di browser, dan lihat efek fluid yang keren saat kamu hover menu

Sangat cocok untuk kamu yang ingin tampil beda dan membuat navigasi website lebih interaktif!

💡 Tips dari BeliScript.com

Gunakan warna menu yang sesuai dengan tema brand kamu
Gabungkan dengan animasi scroll atau background parallax untuk tampilan lebih profesional
Kompatibel dengan template HTML apapun

📥 Download Sekarang!

📁 File lengkap tersedia GRATIS di halaman unduhan kami.

index.html :

<!DOCTYPE html>

<head>

<title>Animated gooey menu bar</title>

</head>

<body>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

<defs>

</filter>

</filter>

</defs>

</svg>

</body>

</html>

script.js

const selected = document.getElementById("selected");

const notsvg = document.getElementById("notificationsvg").firstElementChild;

const homesvg = document.getElementById("homesvg").firstElementChild;

const settingsvg = document.getElementById("settingsvg").firstElementChild;

const profilesvg = document.getElementById("profilesvg").firstElementChild;

function notificationfn() {

selected.classList.add("notification");

selected.classList.remove("setting");

selected.classList.remove("profile");

selected.classList.remove("home");

notsvg.style.fill = "#03254c";

homesvg.style.fill = "#d0efff";

settingsvg.style.fill = "#d0efff";

profilesvg.style.fill = "#d0efff";

var action = gsap.timeline();

action

.to("#notificationsvg", { duration: 0.2, rotation: 10 })

.to("#notificationsvg", { duration: 0.2, rotation: -30 })

.to("#notificationsvg", { duration: 0.2, rotation: 30 })

.to("#notificationsvg", { duration: 0.2, rotation: 0 });

}

function setting() {

notsvg.style.fill = "#d0efff";

homesvg.style.fill = "#d0efff";

settingsvg.style.fill = "#03254c";

profilesvg.style.fill = "#d0efff";

var action = gsap.timeline();

action

.to("#settingsvg", { duration: 0.4, rotation: 600 })

.to("#settingsvg", { duration: 0.4, rotation: 0 });

selected.classList.remove("notification");

selected.classList.add("setting");

selected.classList.remove("profile");

selected.classList.remove("home");

}

function profile() {

notsvg.style.fill = "#d0efff";

homesvg.style.fill = "#d0efff";

settingsvg.style.fill = "#d0efff";

profilesvg.style.fill = "#03254c";

var action = gsap.timeline();

action

.to("#profilesvg", { duration: 0.4, y: -8 })

.to("#profilesvg", { duration: 0.4, y: 0 });

selected.classList.remove("notification");

selected.classList.remove("setting");

selected.classList.add("profile");

selected.classList.remove("home");

}

function home() {

notsvg.style.fill = "#d0efff";

homesvg.style.fill = "#03254c";

settingsvg.style.fill = "#d0efff";

profilesvg.style.fill = "#d0efff";

var action = gsap.timeline();

action

.to("#homesvg", { duration: 0.4, x: 6 })

.to("#homesvg", { duration: 0.4, x: 0 });

selected.classList.remove("notification");

selected.classList.remove("setting");

selected.classList.remove("profile");

selected.classList.add("home");

}

style.css

body {

filter: url("#goo");

background-color: #03254c;

background: linear-gradient(#03254c, black);

}

.menu-bar {

position: relative;

display: flex

;

background-color: #1167b1;

background

Shorthand property for setting most background properties at the same place in the style sheet.

Learn more

Don't show

: linear-gradient(#02457a, #0fece8);

box-shadow: 1px 1px 5px #21cdfc;

max-width: max-content;

margin: 45vh auto;

border-radius: 20px;

padding: 20px;

}

.menu-bar div {

cursor: pointer;

z-index: 1;

padding-right: 40px;

}

.menu-bar div:last-of-type {

padding-right: 0px;

}

.selected {

position: absolute;

width: 18px;

height: 55px;

border-radius: 50%;

background-color: #d0efff;

background: linear-gradient(rgb(223, 88, 88), #0fece8);

z-index: 0;

left: 14px;

top: 17px;

}

.notification {

animation: notification 1s;

left: 100px;

transition: left 1.5s;

}

.profile {

animation: profile 1s;

left: 182px;

transition: left 1.5s;

}

.setting {

animation: setting 1s;

left: 268px;

transition: left 1.5s;

}

.home {

animation: home 1s;

left: 15px;

transition: left 1.5s;

}

@keyframes profile {

50% {

top: -60px;

}

@keyframes setting {

50% {

top: -60px;

}

@keyframes notification {

50% {

top: -60px;

}

@keyframes home {

50% {

top: -60px;

}

🧠 Butuh Bantuan atau Modifikasi?

Kamu ingin menu ini dipasang langsung ke website kamu atau dimodifikasi sesuai kebutuhan?

📩 Hubungi tim BeliScript.com dan kami siap bantu!

📎 Sumber

Konten eksklusif oleh BeliScript.com
Dibuat untuk kebutuhan developer era digital

Comments 0

Website Landing Page untuk Jasa Kebersihan yang Profesional dan Terjan...

Admin BeliScript

2 months ago

👉 Professional Web Airsoft Pro Rental , tema WordPress khusus yang di...

Admin BeliScript

2 months ago

Bangun Website Politik & Caleg Profesional dengan WordPress — Termasuk...

Admin BeliScript

3 months ago

Jasa Pembuatan Website Perawatan Bayi Dan Taman Kanak-kanak

Admin BeliScript

3 months ago

Jasa Pembuatan Landing Page Profesional - Instalasi CCTV & Penjualan P...

Admin BeliScript

3 months ago