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

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文件和界面声明我都保留了,使用的时候建议大家也遵守协议规定

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/567129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab中结束脚本运行_MATLAB脱单指南

之前发过一篇文章,是关于2019年的小目标,“打浦桥锦鲤”。有留言说,发paper的……有留言说,学习python的……居然还有好多人留言说,要!脱!单!公众号的关注者,女生比例只有…

安卓手机可以改鸿蒙吗,华为鸿蒙2.0可以替代安卓吗,华为鸿蒙2.0优势在哪

在华为开发者大会上,华为消费业务CEO 余承东,正式发布鸿蒙OS2.0,并宣布华为鸿蒙OS将全面启用全场景生态,并将于2020年12月发布手机版。余承东还表示,明年,华为的智能手机将全面升级,以支持鸿蒙操…

怎样把电脑恢复出厂设置_数据蛙:苹果恢复出厂设置,彻底释放手机内存

点击蓝字关注我们苹果手机有时候用久了出现卡顿的现象,这个时候我们可以通过苹果恢复出厂设置,以让手机彻底释放内存。恢复出厂设置在哪里?恢复出厂设置后会怎样?如果您还不知道的话,在本文中数据蛙就告诉您答案&#…

html图片怎么设置行高,html行高怎么设置

html设置行高的方法:首先创建一个HTML示例文件;然后在body中通过p标签创建几行文本内容;最后通过给文本添加“line-height:20px;”样式来设置行高即可。本文操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑…

怎么从某个div跳转到另一个_另一个伊甸伊丝卡怎么样 伊丝卡使用攻略_

另一个伊甸中,伊丝卡是游戏中的四星角色之一,那么伊丝卡怎么样,下面一起来看看伊丝卡使用攻略吧。 【人物攻略】伊丝卡 LV1 - 【团队合作很重要呢】 给予敌方全体力量下降10%智慧下降10%(1回合) LV2 - 【让我来稳定战局】 给予敌方全体力量下…

html如何添加文档,如何在HTML中添加行

如何在HTML中添加行在HTML中,我们可以使用以下不同方式轻松地在文档中添加横线:使用HTML标签使用内部CSS使用HTML如果要使用Html标签在Html文档中添加水平线,则必须遵循以下步骤。使用这些步骤,我们可以轻松地添加以下行&#xff…

ffmpeg-win32-v3.2.4 下载_iTOP-4412开发板android4.4代码下载和编译

基于迅为iTOP4412开发板Android 源码可以从光盘,网盘获取稳定版本,也可以从 GitHub 下载我们的开发版本。GitHub 仅提供源码下载,不提供二进制下载,二进制文件存放在光盘和网盘中。6.3.2.1 repo 下载android 代码管理不同于 uboot…

九宫怎么排列和使用_什么是九宫飞星,九宫飞星在生活中的应用

什么是九宫飞星?如何看九宫飞星?如果您能配合老黄历的每日忌宜、时辰忌宜、时辰吉凶、五行旺衰、今日卦象、三煞七煞等资料综合应用,那么您就可以随时随地趋吉避凶、心想事成了。九星即为一白、二黑、三碧、四绿、五黄、六白、七赤、八白及九…

qt html导pdf 页眉,如何使用wkhtmltopdf unpatched qt在每个页面上添加页眉和页脚?

我能弄清楚,我工作的解决方案。它非常混乱,但它的工作原理控制器public function printPDF(Request $request){$parts Parts::all();$date $this->getTime();// divide by 36 because I can fit 36 items on each page$totalPages ceil(count($par…

sendencpac文件能删吗_“手机刷短视频”躺赚?安装自动阅读文件,开机就能挣钱?靠谱吗?...

原标题:“手机刷短视频”躺赚?安装自动阅读文件,开机就能挣钱?靠谱吗?我开始一个月赚三五十万的时候,悟出了一个道理,能做大生意千万别做小生意,能做小生意别打工,小财考…

mysql 值为0 但却被认为null_MySQL介于普通读和锁定读的加锁方式

在阅读本文前最好先看过三篇语句加锁分析文章:超全面MySQL语句加锁分析(上篇)(求转)超全面MySQL语句加锁分析(中篇)(求转)超全面MySQL语句加锁分析(下篇)(求转)事前准备为了故事的顺利发展,我们先建一个表,并向表中插入一些记录,下…

html绑定带有形参的函数,C++中函数

参数参数分为形参和实参,形参是在函数定义的形参表中进行定义,是一个变量,其作用域为整个函数。而实参出现在函数调用中,是一个表达式,用传递给函数的实参对形参进行初始化。函数形参表可以为空,但不能省略…

ppt里quicktime不可用_十大好看又实用的PPT网站

现在的社会做PPT差不多快成家常便饭了开题报告、毕业答辩、汇报总结、讲课等等但就是找不到好的模板你知道好看又实用的PPT模板要去哪里找吗下面小编就将为大家呈现几款实用的软件及网站其中海量资源,等你发现请跟着小编向下看Top1.PPT美化大师资源广场这是个小软件…

ae连续流动的线条_贡献 | AE片头制作绝对经验

在视频制作中,AE是必不可少的一款特效制作软件!关于AE片头制作,每个人都有自己的一套经验和方法!在这里E哥就找到了一篇文章!仅供个人制作参考!内容如下:1:闪白:通常我不会直接使用白帧叠化,而且在原素材上…

python打开文件_用Python(in PsychoPy)打开SPSS数据文件

用Python(in PsychoPy)打开SPSS数据文件有时,要访问SPSS的sav文件中的内容,而手里电脑没有SPSS软件,或者需要对SPSS数据文件中的数据进行SPSS支持不够好的操作,如对一组数据反复多次抽样。可以使用Python中的Pandas模块来访问SPSS…

iphone黑屏转圈_iphone8一直在黑屏转圈

iPhone8手机开不了机一直在黑屏转圈现象怎么办?一般情况我们会建议手机进行强制重启,但是手机黑屏转圈不开机的故障原因有很多,我们需要一步一步来分析,最后能更有针对性地去解决问题。下面就来和大家说说iphone8一直在黑屏转圈开…

forager有多少个机器人_诠视科技:VSLAM技术进展让移动机器人自主行驶有了更广阔的空间...

图:诠视科技CEO 林琼在移动机器人领域,2018年最大的技术进展莫过于VSLAM技术在该领域的应用突破了,它将让移动机器人自主行驶有更广阔的空间。目前市面上移动机器人自主行驶都是以激光雷达导航为主,双目视觉只是作为辅助使用&…

买电脑主要看什么配置_买笔记本电脑主要看什么? 配置要什么样的才算好?...

买笔记本电脑主要看CPU、显卡、主板、内存、硬盘等硬件的性能参数,当然最关键的是考虑您的使用用途和准备的预算,尽量在预算允许的范围内针对性的选择,不要造成性能的浪费。以下是详细介绍:1、硬件设备的性能是决定电脑优劣的关键…

继电器触点粘连分析_在我们日常电气维护中如何避免由于继电器触点粘连造成的设备故障...

在我们日常电气维护中常常会遇到由于继电器触点粘连而造成的设备动作异常或误动作的情况,尤其是一些运行时间较长的设备,而继电器在我们日常维护检查中很难提前预判到触点是否粘连,而继电器触点异常就会造成设备的动作异常,极易造…

神舟笔记本风扇控制软件_十代酷睿+RTX2070加持 高性能游戏本首选神舟战神G9CU7PK...

说起最近的真香游戏本产品,我心中立马浮现出神舟战神G9-CU7PK游戏本,这是一款从基础硬件到整体细节都属于一步到位的高端游戏笔记本。神舟战神G9-CU7PK其最大特点是搭载了NVIDIA GeForce RTX 2070独立显卡,其基于NVIDIA Turing GPU架构&#…