天TJ君要給大家分享一個開源的、可自行調節布置的高顏值頁面導航項目，Dashy

Dashy可以為用戶量身打造各種效果，其中包括頁面上的狀態檢查、各種小部件、主題、圖標包、用戶界面編輯器等等等。

Dashy提供的功能包括有：

• 支持多個頁面
• 實時監控每個應用程序/鏈接
• 使用小部件顯示信息和動態內容
• 可按名稱、域或標簽進行即時搜索+自定義熱鍵和鍵盤快捷鍵
• 自帶許多內置的顏色主題，具有UI顏色編輯器和對自定義CSS的支持
• 超棒的字體，主頁圖標，自動獲取的圖像，表情符號等。
• 具有多用戶訪問、可配置權限和SSO支持的可選身份驗證
• 多語言支持，10多種人工翻譯語言，以及更多即將推出的語言
• 可選、加密、免費的異地云備份和恢復功能可用
• 工作區視圖，可輕松同時在多個應用程序之間切換
• 最小視圖，可快速加載瀏覽器開始頁
• 選擇應用程序啟動方法：新選項卡、相同選項卡、剪貼板、彈出模式或在工作區視圖中打開
• 可自定義的布局、大小、文本、組件可見性、排序順序、行為等。
• 全屏背景圖像、自定義導航欄鏈接、HTML頁腳、標題等選項。
• 易于使用Docker或一鍵式云部署進行設置
• 基于YAML的簡單單文件配置，以及通過UI配置應用程序的選項
• 定期進行改進和添加新功能
• 100%免費和開源
• 高度關注隱私

那先看幾個Dashy演示的例子：

怎么樣？再看看更多可實現的效果：

是不是有點迫不及待想自己試試了？想運行Dashy的話，最常見的方法是使用Docker本地安裝部署。

docker run -d \
  -p 8080:8080 \
  -v ~/my-conf.yml:/app/user-data/conf.yml \
  --name my-dashboard \
  --restart=always \
  lissy93/dashy:latest

默認的登錄頁面是http://localhost:8080

Dashy的主要配置文件是按照YAML格式進行編寫，其中包含了三個主要屬性，分別是pageInfo、appConfig、sections

其中，pageInfo設置元數據，例如標題、說明、導航欄鏈接和頁腳文本等；

appConfig是面板設置，包括頁面主題、身份驗證、語言控制等；

sections是數組控制組件。

配置文件的默認地址在：./host-system/my-local-conf.yml:/app/user-data/conf.yml

除了本地部署，Dashy也支持各種云平臺的一鍵式部署，例如：

感興趣的小伙伴趕緊來試試吧。

下載地址：

GitHub地址：

https://github.com/Lissy93/dashy

天的目標是這部分二級彈出導航，思路是：鼠標經過時導航出現，移開后導航隱藏。

·在橫向導航后面添加一個大盒子，寫上基本樣式、寬高背景顏色，看下效果。

·現在寫上絕對定位，讓它脫離外層盒子的限制。同時是相對頂部的盒子定位，需要寫上相對定位代碼：border-bottom-left-radiu，左邊距離0，上面距離140像素，看下效果。

·接下來給盒子里添加內容，跟橫向導航差不多，呦愛哦列表基本格式，再加上一張圖片、兩行文字，內容快速添加，看下效果。

·從外到內依次寫css樣式，給優愛哦添加寬度，左右自動居中，默認的黑點去掉，看下效果。

·見左浮動，從縱向排列變成橫向，給a標簽寫css樣式之前先寫上這句代碼，默認下劃線去掉，顏色設置為黑色，字體大小12像素，文字水平居中，看下效果。

·然后給a標簽加上外邊距，讓它們增加一點距離。

·最后一行文字單獨設置顏色，并把大盒子的背景顏色去掉，看下效果。

·最后讓二級導航的金子先隱藏，給橫向導航增加一個hover類，讓二級導航顯示即可。

到此，今天的學習完成。