最近在做六角學院jQuery的作業,但遇到了難題,友人是說:「通常下拉式選單在一般電腦網頁不太會用click,反而用hover比較多。」
原先還以為要用jQuery命令式去寫,後來找到一個網頁能夠用純css的方式製造出下拉式選單的效果,原址:https://www.astralweb.com.tw/pure-css-drop-down-menu/,這篇只是用我理解到的方式依樣畫葫蘆地顯示,我們要製造的效果如下(只是要製造效果有些code會省略):
HTML結構長這樣
<ul class="drop-down-menu">
<li><a href="#">關於我們</a></li>
<li><a href="#">Magento</a></li>
<li><a href="#">服務項目</a>
<ul>
<li><a href="#">系統整合</a></li>
<li><a href="#">專業網頁設計</a></li>
<li><a href="#">網路行銷服務</a>
<ul>
<li><a href="#">Amazon亞馬遜網路商城</a></li>
<li><a href="#">社群媒體行銷</a></li>
<li><a href="#">SEO 搜尋引擎優化</a>
<ul>
<li><a href="#">在地SEO</a></li>
<li><a href="#">SEO 搜尋引擎優化</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">網站客製開發</a></li>
</ul>
</ul>
<li><a href="#">關於我們</a></li>
<li><a href="#">Magento</a></li>
<li><a href="#">服務項目</a>
<ul>
<li><a href="#">系統整合</a></li>
<li><a href="#">專業網頁設計</a></li>
<li><a href="#">網路行銷服務</a>
<ul>
<li><a href="#">Amazon亞馬遜網路商城</a></li>
<li><a href="#">社群媒體行銷</a></li>
<li><a href="#">SEO 搜尋引擎優化</a>
<ul>
<li><a href="#">在地SEO</a></li>
<li><a href="#">SEO 搜尋引擎優化</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">網站客製開發</a></li>
</ul>
</ul>
一些CSS拉哩拉雜的設定就讓我們華麗的跳過吧~ 想偷懶的人請自己進去原網址copy
這次主要是因為原文中CSS選擇器的用法是沒教過的,但是基礎概念有教,我這個人啊很奇怪,如果你只告訴我筆是拿來寫字的,那我就只會拿來寫字,但是你告訴我它還可以用來著色,我也會拿去著色甚至我可能還會聯想到拿筆去當螞蟻的橋樑;你只告訴我單一種方法,我只使用那單一種方法,你告訴我有第二、第三種方法,我就會應用第二、第三種方法甚至還會聯想出第四、第五種方法加以運用。
主要CSS:
1.
.drop-down-menu > li {
float: left;
}
.drop-down-menu ul { /*隱藏次選單(沒什麼好說就是把這個區塊關起來)*/
display: none;
}
float: left;
}
.drop-down-menu ul { /*隱藏次選單(沒什麼好說就是把這個區塊關起來)*/
display: none;
}
如果只寫.drop-down-menu li,那就會變成這樣
連同其他下層li也一起吃到了float:left;的效果,border線都跑出來了,看起來有夠蠢的。
.drop-down-menu li:hover > ul { /* 滑鼠滑入上層li時,下一層的ul次選單會展開*/
display: block;
}
display: block;
}
3.
.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
background-color: #ef5c28;
color: #fff;
}
background-color: #ef5c28;
color: #fff;
}
我不知道這樣講別人懂不懂,總之我是懂了那個運作啦,反正這邊也只是我的筆記而已XDDDDD