html文件打开是搜索导航,GitHub - bituplink/OneHtmlNav: 单文件html的网络导航页面,简约并不简单...

本文分享了一款基于小呆导航的精简版网址导航代码,名为OneHtmlNav。作者因原有导航功能不足,从CMS剥离出核心的网址导航功能,去除多余元素,仅保留搜索和网址推荐。代码简洁,单文件无依赖,支持自定义搜索引擎,适用于PC和手机端。虽然界面朴素,但适合前端开发者进一步美化。代码遵循MIT协议,作者接受捐助并欢迎改进建议。
摘要由CSDN通过智能技术生成

OneHtmlNav

这是基于小呆导航的超级精简版本,之所以投入了不少精力折腾这个导航,是之前自己网站的导航有点功能不足,看到了小呆导航有我需要的功能,但是确是基于CMS的,有点复杂我又不想再搭建一个平台,所以就打算去除掉一些不需要的功能,只实现网址导航这个功能,所以就拿过来精简了,由于定的是这个目标所以界面美化什么的就不要追求了,我前端代码能勉强看懂就不错了,所以各位如果有精力可以自己琢磨或者参考官网美化一下

访问小呆导航源项目: github

这是导航界面

687474703a2f2f7777772e62697475706c696e6b2e636f6d2f77702d636f6e74656e742f75706c6f6164732f3335633132373561656661656364302e706e67

主要修改点

去掉了源代码关于CMS的部分,只保留了前端的部分代码

去除了大部分和导航无关或者定制化的代码,只保留了导航的主要功能,也就是搜索和网址推荐

精简了HTML中的各种文件依赖,改为标准库引用网络,非标准的精简去冗余后合并到HTML文件中

去掉了网址和搜索引擎的图片,全部改为文字展示,搜索引擎由img的hover改为button的hover,同时选择后修改button中的文字,显示为对应的引擎名字

更改了引擎列表的数据结构,去掉了图片的链接部分

背景原先是白色的,还可以,不过由于我去掉了所有icon图片,就有点不美观了,就重新通过repeat方式生成了一个带颜色的背景,采用的是base64处理后的图片,就是为了不引入图片文件,但是字符比较多,建议打开文件的时候使用notepad++之类的支持代码折叠和换行的软件进行查看

去除了自带的百度搜索联想功能,有啥各位直接打字就好了,猜词什么的感觉没很么必要去掉了

去掉了搜索词后的删除图标,因此就没有了原先的一键清除输入内容的功能,也是为了不引入图标,以及感觉不是很必要

代码优点:

单文件,简单无文件依赖,就一个html,除了公共的一个css和jquery库,js和css都内嵌在html中了

代码1K行,自注释,想要按需修改的自己看中文注释,写的比较清晰

代码整洁,已经通过工具美化过了,换行什么的都OK,没有做压缩处理,主要是为了给人看,有啥都好改

环境无依赖,电脑直接当网页打开也可,放在服务器目录下直接作为HTML或者添加为php都可以

支持搜索引擎的修改,可以自己添加合适的搜索引擎,这点才是我想要的,大多数导航不是下拉就是点击勾选的有点不给力,这个代码悬浮弹出点击选择的形式很不错

代码基本无冗余,无效的js和css都被我手动一行行清理掉了,废了老大劲了

PC端和手机端都支持,大部分效果和样式我都测试了,没啥问题

程序缺点:

界面略朴素,各位有前端能力的自己修改吧

功能部分是按照我自己的想法来的,如果裁剪过度,建议参考原先项目和网页界面进行修改添加

建议和改进

捐助

为了修改这份代码我也是花费了近一个星期才搞定,很是用心,如果你觉得代码对你有用就拿去用吧,愿意赞助一点的我表示开心,或者分享出去让更多的人使用也是好的

方式一: 支付宝捐助

687474703a2f2f7777772e62697475706c696e6b2e636f6d2f77702d636f6e74656e742f75706c6f6164732f616c697061792e706e67

方式二: 微信捐助

687474703a2f2f7777772e62697475706c696e6b2e636f6d2f77702d636f6e74656e742f75706c6f6164732f77787061792e706e67

license

这是基于小呆导航MIT协议的代码进行开发的,为了遵守协议规定,license文件和界面声明我都保留了,使用的时候建议大家也遵守协议规定

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值