【CSS】- PIXNET 痞客邦部落格 - 下拉選單
PIXNET要如何使用下拉式選單呢？如果你和我一樣不懂CSS/HTML的程式，那就真的只能拿別人的範例來做修改了。實際範例可以參考以下的連結，裏面有相當清楚的說明。https://www.astralweb.com.tw/pure-css-drop-down-menu/
以下的範例即是從該網站上取得，並稍做修改成自己想要的樣式。
⬛ 執行步驟
①「部落格後台」➨「樣式管理」➨「部落格CSS原始碼」
② 找到「#header」
③ 將「第一段原始碼」貼到#header之前
④「部落格後台」➨「側欄管理」➨「公告版位」➨「設定」
⑤ 將「第二段原始碼」貼進去即可。
以上步驟即可完成所有的設定，部落格的下拉選單已經完成。
⬛ 殘留問題
① 手機版顯示上會有問題。因為其沒有公告的欄位。但若是貼在文章內，也只會顯示成清單的樣式。
② 桌機版在預覽時也是會顯示成清單樣式。但沒有關係，發表公開文章後，你再開啟任何一篇文章，就可發覺已經變成下拉式選單了。
⬛ 已知問題
若全部皆已經按照上述設定完畢，但顯示出來的卻是如下圖的樣子，在每一個選項的前面皆有一個項目的符號。真的是不好看。如何解決？
在原始檔中，找到「list-style」，並把ul li { list-style : disc ....... } 改為 ul li { list-style : none ....... } 即可。
找到你要的答案了嗎？若是，請別急著走，更不要吝嗇你的掌聲，撥個兩秒鐘，幫忙按個「讚」吧。另外，工商服務的視窗也是很精采的，別忘了多留意一下，是否有你需要的資訊。
賈伯斯說：求知若渴，虛懷若愚。處處留心皆學問，說不定這些精采的廣告，還可以讓你的人生旅途更加的豐富、更加的精采。
① 為了讓下一個查詢資料的人，可以更快速的查詢到正確的資料，如您有其它資訊可提供，或發現以上訊息有誤時，煩請留下訊息，我們將立即更正。
⬛ 第一段原始碼
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul.drop-down-menu {
border: #4286F4 1.5px solid; /* #ccc */
display: inline-block;
font-family: 微軟正黑體, Arial, sans-serif;
font-size: 14px;
font-weight: bolder;
}
ul.drop-down-menu li {
position: relative;
white-space: nowrap;
border-right: #4286F4 1.5px solid; /* #ccc */
font-weight: bolder;
}
ul.drop-down-menu > li:last-child {
border-right: none;
}
ul.drop-down-menu > li {
float: left; /* 只有第一層是靠左對齊*/
}
ul.drop-down-menu a {
background-color: #fff;
color: blue; /* 原來#333，此處為字型的顏色*/
display: block;
padding: 0 28px; /上下 左右 */
text-decoration: none;
line-height: 40px;
list-style: none;
}
ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/
background-color: #0081e3; /* 原來#ef5c28 ，改成#0081e3 淡淺藍色*/
color: #fff;
}
ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
background-color: #0081e3; /* 原來#ef5c28 ，改成#0081e3 淡淺藍色*/
color: #fff;
}
ul.drop-down-menu ul {
border: #ccc 1px solid;
position: absolute;
z-index: 99;
left: -1px;
top: 100%;
min-width: 180px;
}
ul.drop-down-menu ul li {
border-bottom: #ccc 1px solid;
}
ul.drop-down-menu ul li:last-child {
border-bottom: none;
}
ul.drop-down-menu ul ul { /*第三層以後的選單出現位置與第二層不同*/
z-index: 999;
top: 10px;
left: 90%;
}
ul.drop-down-menu ul { /*隱藏次選單*/
display: none;
}
ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/
display: block;
}
ul.drop-down-menu ul { /*隱藏次選單*/
left: 99999px;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
ul.drop-down-menu li:hover > ul { /* 滑鼠滑入展開次選單*/
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
left: -1px;
border-right: 5px;
}
ul.drop-down-menu li:hover > ul ul { /* 滑鼠滑入之後、次選單之後的選單依舊隱藏*/
left: 99999px;
}
ul.drop-down-menu ul li:hover > ul { /* 第二層之後的選單展開位置*/
left: 90%;
}
⬛ 第二段原始碼
<ul class="drop-down-menu">
<li><a href="#">活動</a>
<ul>
<li><a href="https://ytliu0.pixnet.net/blog/category/3212366">2018全台活動</a>
</li>
<li><a href="#">2019全台活動</a>
<ul>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215594">基隆活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215597">台北活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215600">新北活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215603">桃園活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215606">新竹活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215609">栗苗活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215612">台中活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215615">彰化活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215618">南投活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215621">雲林活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215624">嘉義活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215627">台南活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215630">高雄活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215633">屏東活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215636">宜蘭活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215639">花蓮活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215642">台東活動</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215648">外島活動</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">旅遊</a>
<ul>
<li><a href="#">懶人包</a>
<ul>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215864">夜市時刻</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215861">觀光工廠</a>
</li>
<li><a href="#">溫泉-Hot Spring</a>
<ul>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215855">桃園溫泉</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215852">新竹溫泉</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215858">苗栗溫泉</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215666">新北旅遊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215657">桃園旅遊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215651">新竹旅遊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215660">苗栗旅遊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215663">台中旅遊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215669">彰化旅遊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215672">雲林旅遊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215654">宜蘭旅遊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3200147">國外旅遊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3197537">大陸記事</a>
</li>
</ul>
</li>
<li><a href="#">程式語言</a>
<ul>
<li><a href="#">DOS-批次檔</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215306">VBA-EXCEL</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215309">PERL</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215312">C語言</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215303">CSS-部落格</a>
</li>
</ul>
</li>
<li><a href="#">運動健身</a>
<ul>
<li><a href="#">健身房</a>
<ul>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215798">基隆健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215771">台北健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215768">新北健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215777">桃園健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215774">新竹健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215795">苗栗健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215789">台中健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215792">彰化健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215801">雲林健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215780">台南健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215783">高雄健身房</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215786">連鎖健身房</a>
</li>
</ul>
</li>
<li><a href="#">游泳池</a>
<ul>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215708">基隆游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215711">台北游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215717">新北游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215723">桃園游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215726">新竹游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215729">苗栗游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215732">台中游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215735">彰化游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215738">南投游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215741">雲林游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215744">嘉義游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215747">台南游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215750">高雄游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215765">屏東游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215753">宜蘭游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215756">花蓮游泳池</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215759">台東游泳池</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">品酩</a>
<ul>
<li><a href="#">清酒</a>
<ul>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215696">清酒小知識</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215699">日本清酒</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215702">台灣清酒</a>
</li>
</ul>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3212405">啤酒</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3195596">綜合</a>
</li>
</ul>
</li>
<li><a href="#">生活綜合</a>
<ul>
<li><a href="https://ytliu0.pixnet.net/blog/category/3185108">日常資訊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3195584">英文學習</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3201422">24H資訊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3203486">優惠票卷</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3203090">醫療保健</a>
</li>
</ul>
</li>
<li><a href="#">數位生活</a>
<ul>
<li><a href="https://ytliu0.pixnet.net/blog/category/3193706">數位資訊</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3212276">文書處理</a>
</li>
<li><a href="https://ytliu0.pixnet.net/blog/category/3215870">部落格管理</a>
</li>
</ul>
</li>
</ul>
延伸閱讀
- 【CSS】- PIXNET 痞客邦部落格文章格式 - 行距|字距|段落間距 - 如何修改？
- 【CSS】- PIXNET 痞客邦部落格版面大小調整
- 【CSS】- PIXNET 痞客邦引用外部相片 - 相簿空間不足時
- 【CSS】- PIXNET 痞客邦部落格 各種格式範例 - 框線
- 【CSS】- PIXNET 痞客邦部落格 - 側欄調整
- 【CSS】- PIXNET 痞客邦部落格 - 繼續閱讀 - 如何修改？
- 【CSS】- PIXNET 痞客邦部落格 - 下拉選單
- 【CSS】- PIXNET 痞客邦部落格 - 各區塊名稱|板面修改
留言列表
2024 活動資訊 (18)