One Nav主题美化新增一个Dock导航栏（同时适配大部分网站）

由于我首选是放在一为导航页面，所以HTML代码的话就放在首页内容（自定义）里面；区块也支持自定义，会缓存在本地。请自行内置CSS、JS文件，ico图标。

[hide type=comment]

<div class="ioui-content switch-container home-container sidebar_no container">
<div class="ioui-main">
<div class="content-wrap">
<div class="content-layout">
<div class="dock-container" id="dock-container" style="left: 50%;">
<div class="dock" id="dock">
<ul class="dock-icons">
<!-- 这里添加您的图标 -->
<li class="dock-icon-divider">
<hr class="dock-divider" id="dock-divider" style="display: none">
<!-- 添加分割线 -->
</li>
<li class="dock-icon" title="茉莉小栈">
<a href="https://www.5iml.com/" target="_blank">
<img src="https://www.5iml.com/content/uploadfile/202505/6a6b1746494372.png"
alt="茉莉小栈">
<span class="docktooltip">茉莉小栈</span>
<!-- 添加标题元素 -->
</a>
</li>

<li class="dock-icon" title="慈云数据">
<a href="https://www.zovps.com/aff/EKPEJSHX" target="_blank">
<img src="https://www.9inav.com/wp-content/uploads/2025/05/20250515203823-29049.png" alt="慈云数据">
<span class="docktooltip">慈云数据</span>
</a>
</li>

<li class="dock-icon" title="雨云">
<a href="https://www.rainyun.com/5iml_" target="_blank">
<img src="https://www.9inav.com/wp-content/uploads/2025/05/20250515203914-68546.png"
alt="雨云">
<span class="docktooltip">雨云</span>
</a>
</li>
<li class="dock-icon" title="喜马拉雅">
<a href="https://www.ximalaya.com/" target="_blank">
<img src="https://navw.cn/dahai/img/xima.png"
alt="喜马拉雅">
<span class="docktooltip">喜马拉雅</span>
</a>
</li>
<li class="dock-icon" title="小红书">
<a href="https://www.xiaohongshu.com/" target="_blank">
<img src="https://navw.cn/dahai/img/xiaohongshu.png"
alt="小红书">
<span class="docktooltip">小红书</span>
</a>
</li>
<li class="dock-icon" title="抖音">
<a href="https://www.douyin.com/" target="_blank">
<img src="https://navw.cn/dahai/img/douyin.png"
alt="抖音">
<span class="docktooltip">抖音</span>
</a>
</li>

<!-- 其他应用图标 -->
<li class="dock-icon-divider">
<hr class="dock-divider">
<!-- 添加分割线 -->
</li>
<li class="dock-icon add-app" title="添加应用">
<img src="https://navw.cn/dahai/img/dahai-添加.webp"
alt="添加应用">
<span class="docktooltip">添加应用</span>
</li>
<li class="dock-icon close-dock" title="关闭">
<img src="https://navw.cn/dahai/img/dahai-收起.webp"
alt="关闭">
<span class="docktooltip">折迭dock栏</span>
</li>
<li class="dock-icon" title="网站提交">
<a href="/contribute.html"
target="_blank">
<img src="https://navw.cn/dahai/img/dahai-提交.webp"
alt="网站提交">
<span class="docktooltip">网站提交</span>
</a>
</li>
</ul>
</div>
</div>
<div class="expand-dock" id="expand-dock" title="展开DOCK栏" style="display: none">
<i class="iconfont icon-arrow-r"></i>
</div>
<!-- 添加应用的对话框 -->
<div id="addAppModal" class="modal" style="display: none">
<div class="dockmodal-content">
<span class="close">×</span>
<h2>添加应用</h2>
<h5>添加后右键点击即可删除</h5>
<h2></h2>
<form id="appForm">
<label for="appUrl">网址链接（必填）：</label>
<input type="text" id="appUrl" name="appUrl" required="" placeholder="请填写网址链接"><br><br>
<label for="appName">网站名称（必填）：</label>
<input type="text" id="appName" name="appName" required="" placeholder="请填写网站名称"><br><br>
<label for="appIcon">图标链接（非必填）：</label>
<input type="text" id="appIcon" name="appIcon" placeholder="不填写链接自动获取网址图标"><br><br>
<input type="submit" value="添加">
</form>
</div>
</div>
<!-- 删除应用对话框 -->
<div id="customDialog" class="dialog" style="display: none">
<div class="dialog-content">
<p>确定删除该应用吗？</p>
<button id="confirmDeleteBtn">确定</button>
<button id="cancelDeleteBtn">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>

后台 > 全局功能 > 添加代码 > 顶部(header)自定义 js 代码

<script src="https://navw.cn/dahai/dock.js"></script>
<link rel="stylesheet" href="https://navw.cn/dahai/dock.css">

[/hide]