网站美化 新增一个Dock导航栏(同时适配大部分网站)

大海 闲谈灌水 239

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

更多美化内容可以关注我的网站:https://navw.cn/(欢迎大家申请友联)

1742451568-67d699c500b94

<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://vip.lzzcc.cn/" target="_blank">
<img src="https://vip.lzzcc.cn/favicon.ico"
alt="大海资源库">
<span class="docktooltip">大海资源库</span>
<!-- 添加标题元素 -->
</a>
</li>

<li class="dock-icon" title="花瓣">
<a href="https://huaban.com/follow" target="_blank">
<img src="https://navw.cn/dahai/img/huaban.png" alt="花瓣">
<span class="docktooltip">花瓣</span>
</a>
</li>

<li class="dock-icon" title="可画设计">
<a href="https://www.canva.cn/" target="_blank">
<img src="https://navw.cn/dahai/img/canva.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/explore" 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>

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

 

 

回复

共3条回复 我来回复
  • 技术宅
    技术宅 评论

    哈哈哈感谢分享 ,已使用

    1周前 0条评论
  • 幻导航-hdhhh.com
    幻导航-hdhhh.com 评论

    谢谢分享已经用上了

     

    6天前 0条评论
  • 幻导航-hdhhh.com
    幻导航-hdhhh.com 评论

    为毛我的不能折叠添加应用

    6天前 0条评论
One Nav 导航主题