1000013836.png

介绍

这是一套不挑程序、不挑主题的通用底部导航栏代码，无论是博客、企业站、个人主页还是导航站，只要是网页都能直接用，代码自带图标、自适应布局、深色模式适配，PC 端自动隐藏、移动端固定显示，不用改核心文件，粘贴就能生效。

特点

  • 全平台通用：HTML + CSS + JS，支持所有网站系统​
  • 响应式：仅在手机显示，电脑端自动隐藏​
  • 自带图标：内置 Font Awesome 图标，不乱码、不缺失​
  • 深色模式：自动跟随网站暗黑模式切换​
  • 当前页高亮：打开哪个页面，导航自动高亮​
  • 美观圆角：现代简约底部圆角设计，不突
<style>
.footer-wap.fixed-bottom {
    display: none;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #ffffff !important;
    border-top: 1px solid #f0f0f0;
    z-index: 9999 !important;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.05) !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden;
    padding-top: 4px;
}

@media (max-width: 768px) {
    .footer.pc {
        display: none !important;
    }
    .footer-wap.fixed-bottom {
        display: block;
    }
    .wap-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 56px;
        padding: 0 8px;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .wap-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        color: #666666;
        font-size: 11px;
        font-weight: 500;
        gap: 3px;
        flex: 1;
        text-align: center;
        transition: all 0.25s ease;
        border-radius: 12px;
        padding: 6px 4px;
    }
    .wap-item i {
        font-size: 18px;
        transition: transform 0.25s ease;
    }
    .wap-item.active {
        color: #0088ff !important;
    }
    .wap-item.active i {
        transform: scale(1.1);
    }
    .wap-item:hover {
        color: #0066cc !important;
    }
    body {
        padding-bottom: 62px !important;
    }
}

@media (min-width: 769px) {
    .footer-wap.fixed-bottom {
        display: none !important;
    }
}

body.dark .footer-wap.fixed-bottom,
html[data-theme="dark"] .footer-wap.fixed-bottom {
    background-color: #1e1e1e !important;
    border-top: 1px solid #2d2d2d !important;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.2) !important;
}
body.dark .wap-item,
html[data-theme="dark"] .wap-item {
    color: #a0a0a0 !important;
}
body.dark .wap-item.active,
html[data-theme="dark"] .wap-item.active {
    color: #409eff !important;
}
body.dark .wap-item:hover,
html[data-theme="dark"] .wap-item:hover {
    color: #66a3ff !important;
}
</style>

<script>
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css';
document.head.appendChild(link);
document.body.insertAdjacentHTML('beforeend', `
<div class="footer-wap fixed-bottom">
    <div class="wap-nav">
        <a href="/" class="wap-item">
            <i class="fa-solid fa-house"></i>
            <span>首页</span>
        </a>
        <a href="/archives.html" class="wap-item">
            <i class="fa-solid fa-folder"></i>
            <span>归档</span>
        </a>
        <a href="/wallpaper.html" class="wap-item">
            <i class="fa-solid fa-image"></i>
            <span>相册</span>
        </a>
        <a href="/links.html" class="wap-item">
            <i class="fa-solid fa-link"></i>
            <span>友链</span>
        </a>
        <a href="/message.html" class="wap-item">
            <i class="fa-solid fa-comment"></i>
            <span>留言</span>
        </a>
    </div>
</div>
`);

document.addEventListener('DOMContentLoaded', function() {
    const currentPath = window.location.pathname;
    const navItems = document.querySelectorAll('.wap-item');

    // 路径高亮
    navItems.forEach(item => {
        const itemHref = item.getAttribute('href');
        if (currentPath === itemHref) {
            item.classList.add('active');
        }
    });

    // 黑夜模式同步
    function syncNavTheme() {
        const html = document.documentElement;
        const body = document.body;
        const isDark = html.getAttribute('data-theme') === 'dark';
        body.classList.toggle('dark', isDark);
    }
    syncNavTheme();

    const observer = new MutationObserver(mutations => {
        mutations.forEach(mut => {
            if (mut.attributeName === 'data-theme') syncNavTheme();
        });
    });
    observer.observe(document.documentElement, { attributes: true });
});
</script>

使用方法

  • 1. 把 CSS 代码放到网站头部​
  • 2. 把 JS 代码放到网站页脚​
  • 3. 保存并刷新页面，就会出现导航栏

修改说明

  • 修改跳转链接：修改  href="/"  里的地址​
  • 修改名称：修改span里的文字​
  • 修改图标：替换  fa-solid fa-xxx  图标类名​
  • 修改大小：在 CSS 里调整  font-size  数值

适用范围

  • Typecho / WordPress / Zblog 等博客系统、企业官网、个人主页、静态网页、几乎支持所有自定义 HTML/CSS/JS 的网站