<label id="hxgpy"></label>

CSS3導航欄展開動畫效果

SS3導航欄展開動畫效果,實現不一樣的手風琴菜單展開收縮動畫效果！效果如下：

實現代碼

html：

css：

javascript：

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

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

Dashy提供的功能包括有：

那先看幾個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類，讓二級導航顯示即可。

到此，今天的學習完成。

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。