OneHtmlNav

這是基于小呆導(dǎo)航的超級精簡版本，之所以投入了不少精力折騰這個(gè)導(dǎo)航，是之前自己網(wǎng)站的導(dǎo)航有點(diǎn)功能不足，看到了小呆導(dǎo)航有我需要的功能，但是確是基于CMS的，有點(diǎn)復(fù)雜我又不想再搭建一個(gè)平臺，所以就打算去除掉一些不需要的功能，只實(shí)現(xiàn)網(wǎng)址導(dǎo)航這個(gè)功能，所以就拿過來精簡了，由于定的是這個(gè)目標(biāo)所以界面美化什么的就不要追求了，我前端代碼能勉強(qiáng)看懂就不錯(cuò)了，所以各位如果有精力可以自己琢磨或者參考官網(wǎng)美化一下

訪問小呆導(dǎo)航源項(xiàng)目: github

這是導(dǎo)航界面

主要修改點(diǎn)

去掉了源代碼關(guān)于CMS的部分，只保留了前端的部分代碼

去除了大部分和導(dǎo)航無關(guān)或者定制化的代碼，只保留了導(dǎo)航的主要功能，也就是搜索和網(wǎng)址推薦

精簡了HTML中的各種文件依賴，改為標(biāo)準(zhǔn)庫引用網(wǎng)絡(luò)，非標(biāo)準(zhǔn)的精簡去冗余后合并到HTML文件中

去掉了網(wǎng)址和搜索引擎的圖片，全部改為文字展示，搜索引擎由img的hover改為button的hover,同時(shí)選擇后修改button中的文字，顯示為對應(yīng)的引擎名字

更改了引擎列表的數(shù)據(jù)結(jié)構(gòu)，去掉了圖片的鏈接部分

背景原先是白色的，還可以，不過由于我去掉了所有icon圖片，就有點(diǎn)不美觀了，就重新通過repeat方式生成了一個(gè)帶顏色的背景，采用的是base64處理后的圖片，就是為了不引入圖片文件，但是字符比較多，建議打開文件的時(shí)候使用notepad++之類的支持代碼折疊和換行的軟件進(jìn)行查看

去除了自帶的百度搜索聯(lián)想功能，有啥各位直接打字就好了，猜詞什么的感覺沒很么必要去掉了

去掉了搜索詞后的刪除圖標(biāo)，因此就沒有了原先的一鍵清除輸入內(nèi)容的功能，也是為了不引入圖標(biāo)，以及感覺不是很必要

代碼優(yōu)點(diǎn):

單文件，簡單無文件依賴，就一個(gè)html,除了公共的一個(gè)css和jquery庫，js和css都內(nèi)嵌在html中了

代碼1K行，自注釋，想要按需修改的自己看中文注釋，寫的比較清晰

代碼整潔，已經(jīng)通過工具美化過了，換行什么的都OK，沒有做壓縮處理，主要是為了給人看，有啥都好改

環(huán)境無依賴，電腦直接當(dāng)網(wǎng)頁打開也可，放在服務(wù)器目錄下直接作為HTML或者添加為php都可以

支持搜索引擎的修改，可以自己添加合適的搜索引擎，這點(diǎn)才是我想要的，大多數(shù)導(dǎo)航不是下拉就是點(diǎn)擊勾選的有點(diǎn)不給力，這個(gè)代碼懸浮彈出點(diǎn)擊選擇的形式很不錯(cuò)

代碼基本無冗余，無效的js和css都被我手動一行行清理掉了，廢了老大勁了

PC端和手機(jī)端都支持，大部分效果和樣式我都測試了，沒啥問題

程序缺點(diǎn):

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

功能部分是按照我自己的想法來的，如果裁剪過度，建議參考原先項(xiàng)目和網(wǎng)頁界面進(jìn)行修改添加

建議和改進(jìn)

捐助

為了修改這份代碼我也是花費(fèi)了近一個(gè)星期才搞定，很是用心，如果你覺得代碼對你有用就拿去用吧，愿意贊助一點(diǎn)的我表示開心，或者分享出去讓更多的人使用也是好的

方式一: 支付寶捐助

方式二: 微信捐助

license

這是基于小呆導(dǎo)航MIT協(xié)議的代碼進(jìn)行開發(fā)的，為了遵守協(xié)議規(guī)定，license文件和界面聲明我都保留了，使用的時(shí)候建議大家也遵守協(xié)議規(guī)定

總結(jié)

以上是生活随笔為你收集整理的html文件打开是搜索导航,GitHub - bituplink/OneHtmlNav: 单文件html的网络导航页面，简约并不简单...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。