好看的网站底部导航栏代码适配所有网站

今天给大家分享一段亲测好用的全主题适配移动端底部导航代码，不需要修改主题核心文件，一键复制粘贴就能用，解决图标加载、深色模式同步、页面高亮等所有问题，适配Typecho、WordPress等绝大多数独立博客主题，新手也能轻松上手。

效果演示：http://888333.xyz

css代码

<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>

js代码

<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>