簡介
在今天的教程中，我們將逐步創(chuàng)建一個具有時尚設(shè)計、動態(tài)動畫和現(xiàn)代效果的超優(yōu)質(zhì)可擴展導(dǎo)航欄。此高級導(dǎo)航欄具有以下功能：
高端美感的動畫粒子背景。
具有懸停效果的發(fā)光圖標(biāo)。
突出顯示活動部分的動態(tài)選擇指示器。
流暢的動畫和過渡，打造專業(yè)的外觀。
該導(dǎo)航欄采用 HTML、CSS 和 JavaScript 構(gòu)建，非常適合高質(zhì)量 Web 界面并增強用戶體驗，使其成為任何項目的絕佳補充，包括《角斗士之戰(zhàn)》等互動游戲。讓我們開始吧！
第 1 步：設(shè)置 HTML 結(jié)構(gòu)
我們的可擴展導(dǎo)航欄使用 Font Awesome 圖標(biāo)、切換按鈕和自定義數(shù)據(jù)工具提示屬性來為每個圖標(biāo)提供描述。這種標(biāo)記為我們提供了一個靈活的構(gòu)建結(jié)構(gòu)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expandable Premium Navbar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Particle Background -->
<div>
<p>Key HTML Elements<br>
Particle Background: Provides a subtle, animated effect behind the navbar for a high-end look.<br>
Toggle Button: Allows users to expand or collapse the navbar.<br>
Nav Items: Each item includes a tooltip, an icon, and some have notification badges.<br>
Selection Indicator: Highlights the active section with a glowing effect.<br>
Step 2: Styling the Navbar with CSS<br>
Our CSS will focus on creating a luxurious, modern design with animated background particles, hover effects, and tooltip displays. Let’s go through each part.</p>
<p>Base Styles and Background Setup<br>
</p>
<pre class="brush:php;toolbar:false">body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background: radial-gradient(circle, #1b1b2f, #121212);
font-family: Arial, sans-serif;
overflow: hidden;
position: relative;
}
/* Particle Background */
#particle-background {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
background: url('https://www.transparenttextures.com/patterns/dark-matter.png');
animation: particleAnimation 30s linear infinite;
opacity: 0.3;
}
@keyframes particleAnimation {
0% { background-position: 0 0; }
100% { background-position: 1000px 1000px; }
}
Navbar Styling
The navbar includes a semi-transparent background with a subtle blur effect to achieve a glassy look, which expands and collapses smoothly.
css
Copier le code
.navbar {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 40px;
backdrop-filter: blur(15px);
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.6);
transition: width 0.4s ease, padding 0.4s ease;
gap: 15px;
width: 60px;
overflow: hidden;
position: relative;
z-index: 1;
}
.navbar.expanded {
width: 360px;
padding: 15px 20px;
justify-content: flex-start;
}
切換按鈕
切換按鈕可展開和折疊導(dǎo)航欄，并在懸停時顯示旋轉(zhuǎn)動畫。
.toggle-button {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #ffffff;
cursor: pointer;
transition: transform 0.3s ease, color 0.3s ease;
}
.toggle-button:hover {
color: #ff00cc;
transform: rotate(90deg);
}
導(dǎo)航項和工具提示效果
每個導(dǎo)航項都有一個帶有漸變和發(fā)光背景的懸停效果。工具提示以柔和的陰影效果出現(xiàn)以引導(dǎo)用戶。
.nav-item {
position: relative;
padding: 12px;
font-size: 24px;
color: #ffffff;
cursor: pointer;
border-radius: 15px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.nav-item:hover {
background: linear-gradient(135deg, rgba(255, 0, 204, 0.4), rgba(51, 51, 255, 0.4));
transform: translateY(-5px) scale(1.05);
}
.nav-item::before {
content: attr(data-tooltip);
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #ffffff;
background: rgba(30, 30, 30, 0.85);
padding: 8px 12px;
border-radius: 8px;
opacity: 0;
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
backdrop-filter: blur(8px);
}
.nav-item:hover::before {
opacity: 1;
transform: translateY(-8px);
}
選擇指示器和通知徽章
.selection-indicator {
position: absolute;
bottom: 10px;
height: 4px;
width: 30px;
background: linear-gradient(90deg, #ff00cc, #3333ff);
border-radius: 2px;
transition: transform 0.3s ease, width 0.3s ease;
z-index: -1;
}
/* Notification Badge */
.notification-badge {
position: absolute;
top: 5px;
right: 5px;
background: linear-gradient(45deg, #ff0000, #ff4d4d);
color: #ffffff;
border-radius: 50%;
padding: 4px 7px;
font-size: 12px;
font-weight: bold;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
animation: pulse 1.8s infinite ease-in-out;
}
第 3 步：添加 JavaScript 以實現(xiàn)交互
JavaScript 控制導(dǎo)航欄的可展開狀態(tài)、活動項目和選擇指示器。它還可以在調(diào)整大小時使指示器與所選項目保持對齊。
const toggleButton = document.querySelector('.toggle-button');
const navbar = document.querySelector('.navbar');
const navItems = document.querySelectorAll('.nav-item');
const selectionIndicator = document.querySelector('.selection-indicator');
// Toggle the expanded state of the navbar
toggleButton.addEventListener('click', () => {
navbar.classList.toggle('expanded');
toggleButton.querySelector('i').classList.toggle('fa-bars');
toggleButton.querySelector('i').classList.toggle('fa-times');
});
// Update selection indicator position
function updateSelectionIndicator(activeItem) {
const itemRect = activeItem.getBoundingClientRect();
const navbarRect = navbar.getBoundingClientRect();
const offsetX = itemRect.left - navbarRect.left + navbar.scrollLeft;
selectionIndicator.style.transform = `translateX(${offsetX}px)`;
selectionIndicator.style.width = `${itemRect.width}px`;
}
// Handle nav item selection
navItems.forEach((item) => {
item.addEventListener('click', () => {
navItems.forEach(nav => nav.classList.remove('active'));
item.classList.add('active');
updateSelectionIndicator(item);
});
});
// Initialize the position of the selection indicator on page load
document.addEventListener('DOMContentLoaded', () => {
const activeItem = document.querySelector('.nav-item.active');
if (activeItem) {
updateSelectionIndicator(activeItem);
}
});
結(jié)論
創(chuàng)建具有動態(tài)動畫和直觀界面的優(yōu)質(zhì)可擴展導(dǎo)航欄可以提升任何 Web 項目的水平。通過用于設(shè)計的 CSS 和用于交互的 JavaScript，我們構(gòu)建了一個靈活的組件，非常適合 Gladiators Battle 等高端應(yīng)用程序。該導(dǎo)航欄的平滑過渡、發(fā)光效果和可擴展功能提供了專業(yè)且現(xiàn)代的用戶體驗。
？發(fā)現(xiàn)更多：
探索角斗士之戰(zhàn)：潛入古代武士的世界，體驗戰(zhàn)略游戲玩法，網(wǎng)址為 https://gladiatorsbattle.com
查看我們的 GitHub：查看代碼示例和文檔：https://github.com/HanGPIErr/Gladiators-Battle-Documentation
在 LinkedIn 上聯(lián)系：在 https://www.linkedin.com/in/pierre-romain-lopez/
上關(guān)注我
關(guān)注 X：在 https://x.com/GladiatorsBT
上了解設(shè)計和游戲項目的最新動態(tài)
請繼續(xù)關(guān)注有關(guān)使用 HTML、CSS 和 JavaScript 創(chuàng)建高級 Web 組件的更多教程！
以上是如何創(chuàng)建具有動態(tài)效果和選擇指示器的超高級可擴展導(dǎo)航欄的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
垃圾收集如何在JavaScript中起作用？
Jul 04, 2025 am 12:42 AM
JavaScript的垃圾回收機制通過標(biāo)記-清除算法自動管理內(nèi)存，以減少內(nèi)存泄漏風(fēng)險。引擎從根對象出發(fā)遍歷并標(biāo)記活躍對象，未被標(biāo)記的則被視為垃圾并被清除。例如，當(dāng)對象不再被引用（如將變量設(shè)為null），它將在下一輪回收中被釋放。常見的內(nèi)存泄漏原因包括：①未清除的定時器或事件監(jiān)聽器；②閉包中對外部變量的引用；③全局變量持續(xù)持有大量數(shù)據(jù)。V8引擎通過分代回收、增量標(biāo)記、并行/并發(fā)回收等策略優(yōu)化回收效率，降低主線程阻塞時間。開發(fā)時應(yīng)避免不必要的全局引用、及時解除對象關(guān)聯(lián)，以提升性能與穩(wěn)定性。
如何在node.js中提出HTTP請求？
Jul 13, 2025 am 02:18 AM
在Node.js中發(fā)起HTTP請求有三種常用方式：使用內(nèi)置模塊、axios和node-fetch。1.使用內(nèi)置的http/https模塊無需依賴，適合基礎(chǔ)場景，但需手動處理數(shù)據(jù)拼接和錯誤監(jiān)聽，例如用https.get()獲取數(shù)據(jù)或通過.write()發(fā)送POST請求；2.axios是基于Promise的第三方庫，語法簡潔且功能強大，支持async/await、自動JSON轉(zhuǎn)換、攔截器等，推薦用于簡化異步請求操作；3.node-fetch提供類似瀏覽器fetch的風(fēng)格，基于Promise且語法簡單
JavaScript數(shù)據(jù)類型：原始與參考
Jul 13, 2025 am 02:43 AM
JavaScript的數(shù)據(jù)類型分為原始類型和引用類型。原始類型包括string、number、boolean、null、undefined和symbol，其值不可變且賦值時復(fù)制副本，因此互不影響；引用類型如對象、數(shù)組和函數(shù)存儲的是內(nèi)存地址，指向同一對象的變量會相互影響。判斷類型可用typeof和instanceof，但需注意typeofnull的歷史問題。理解這兩類差異有助于編寫更穩(wěn)定可靠的代碼。
JavaScript時間對象，某人構(gòu)建了一個eactexe，在Google Chrome上更快的網(wǎng)站等等
Jul 08, 2025 pm 02:27 PM
JavaScript開發(fā)者們，大家好！歡迎閱讀本周的JavaScript新聞！本周我們將重點關(guān)注：Oracle與Deno的商標(biāo)糾紛、新的JavaScript時間對象獲得瀏覽器支持、GoogleChrome的更新以及一些強大的開發(fā)者工具。讓我們開始吧！Oracle與Deno的商標(biāo)之爭Oracle試圖注冊“JavaScript”商標(biāo)的舉動引發(fā)爭議。Node.js和Deno的創(chuàng)建者RyanDahl已提交請愿書，要求取消該商標(biāo)，他認為JavaScript是一個開放標(biāo)準(zhǔn)，不應(yīng)由Oracle
React與Angular vs Vue：哪個JS框架最好？
Jul 05, 2025 am 02:24 AM
選哪個JavaScript框架最好？答案是根據(jù)需求選擇最適合的。1.React靈活自由，適合需要高度定制、團隊有架構(gòu)能力的中大型項目；2.Angular提供完整解決方案，適合企業(yè)級應(yīng)用和長期維護的大項目；3.Vue上手簡單，適合中小型項目或快速開發(fā)。此外，是否已有技術(shù)棧、團隊規(guī)模、項目生命周期及是否需要SSR也都是選擇框架的重要因素?？傊?，沒有絕對最好的框架，適合自己需求的就是最佳選擇。
立即在JavaScript中立即調(diào)用功能表達式（IIFE）
Jul 04, 2025 am 02:42 AM
IIFE（ImmediatelyInvokedFunctionExpression）是一種在定義后立即執(zhí)行的函數(shù)表達式，用于變量隔離和避免污染全局作用域。它通過將函數(shù)包裹在括號中使其成為表達式，并緊隨其后的一對括號來調(diào)用，如(function(){/code/})();。其核心用途包括：1.避免變量沖突，防止多個腳本間的命名重復(fù)；2.創(chuàng)建私有作用域，使函數(shù)內(nèi)部變量不可見；3.模塊化代碼，便于初始化工作而不暴露過多變量。常見寫法包括帶參數(shù)傳遞的版本和ES6箭頭函數(shù)版本，但需注意：必須使用表達式、結(jié)
什么是緩存API？如何與服務(wù)人員使用？
Jul 08, 2025 am 02:43 AM
CacheAPI是瀏覽器提供的一種緩存網(wǎng)絡(luò)請求的工具，常與ServiceWorker配合使用，以提升網(wǎng)站性能和離線體驗。1.它允許開發(fā)者手動存儲如腳本、樣式表、圖片等資源；2.可根據(jù)請求匹配緩存響應(yīng)；3.支持刪除特定緩存或清空整個緩存；4.通過ServiceWorker監(jiān)聽fetch事件實現(xiàn)緩存優(yōu)先或網(wǎng)絡(luò)優(yōu)先等策略；5.常用于離線支持、加快重復(fù)訪問速度、預(yù)加載關(guān)鍵資源及后臺更新內(nèi)容；6.使用時需注意緩存版本控制、存儲限制及與HTTP緩存機制的區(qū)別。
處理諾言：鏈接，錯誤處理和承諾在JavaScript中
Jul 08, 2025 am 02:40 AM
Promise是JavaScript中處理異步操作的核心機制，理解鏈?zhǔn)秸{(diào)用、錯誤處理和組合器是掌握其應(yīng)用的關(guān)鍵。1.鏈?zhǔn)秸{(diào)用通過.then()返回新Promise實現(xiàn)異步流程串聯(lián)，每個.then()接收上一步結(jié)果并可返回值或Promise；2.錯誤處理應(yīng)統(tǒng)一使用.catch()捕獲異常，避免靜默失敗，并可在catch中返回默認值繼續(xù)流程；3.組合器如Promise.all()（全成功才成功）、Promise.race()（首個完成即返回）和Promise.allSettled()（等待所有完成）
