Blogger 插件 | Blogger加入導覽列

黑修斯 8月 07, 2017
Reference:
PM Linux 好好玩實驗室---在 Google Blogger 中建立下拉式選單


導覽列程式碼---開始
<!-- 導覽列開始 -->
<div id='navMenu'>
<div id='navMenuleft'>
<ul id='nav'>
<!-- 導覽列第一排開始 -->
<li>
<a href='http://hugheschung.blogspot.tw/'>
首頁
</a>
</li>
<!-- 1 -->
<!-- 導覽列第一排END -->
<!-- 導覽列第二排開始 -->
<li>
<a href='#'>
關於...
</a>
<!-- 1 -->
<ul>
<li>
<a href='http://hugheschung.blogspot.tw/p/blog.html'>
這個blog
</a>
</li>
<!-- 2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/p/blog-page_21.html'>
我是誰?
</a>
</li>
<!-- 2-1 -->
<li>
<a href='#'>
專題分享
</a>
</li>
<!-- 2-2 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/%E6%9C%AC%E7%AB%99%E6%8F%92%E4%BB%B6'>
本站插件筆記
</a>
</li>
<!-- 2-1 -->
</ul>
</li>
<!-- 導覽列第二排END -->
<!-- 導覽列第三排開始 -->
<li>
<a>
學習筆記分享區
</a>
<!-- 1 -->
<ul>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/%E5%AF%A6%E9%A9%97%E5%88%86%E4%BA%AB'>
大學機電實驗分享
</a>
</li>
<!-- 2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/%E5%8B%95%E6%89%8BDIY'>
動手DIY
</a>
</li>
<!-- 2-1 -->
<!--大大分界-->
<li>
<a href='#'>
3D印表機專欄
</a>
<!-- 2-2 -->
<ul>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/3D%E5%8D%B0%E8%A1%A8%E6%A9%9F'>
3D印表機學習筆記
</a>
</li>
<!-- 2-2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/3D%E6%A8%A1%E5%9E%8B%E5%88%86%E4%BA%AB'>
3D模型分享
</a>
</li>
<!-- 2-2-2 -->
</ul>
</li>
<!--大大分界-->
<li>
<a href='#'>
各式維修筆記
</a>
<!-- 2-2 -->
<ul>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/%E6%B1%BD%E8%BB%8A%E7%B6%AD%E4%BF%AE'>
汽車維修
</a>
</li>
<!-- 2-2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/%E6%A9%9F%E8%BB%8A%E7%B6%AD%E4%BF%AE'>
機車維修
</a>
</li>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/%E5%AE%B6%E9%9B%BB%E7%B6%AD%E4%BF%AE'>
家電維修
</a>
</li>
<!-- 2-2-2 -->
</ul>
</li>
<!--大大分界-->
<li>
<a href='#'>
CNC學習筆記
</a>
<!-- 2-3 -->
<ul>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/Fusion360_CAM'>
CAM轉換_使用Fusion360
</a>
</li>
<li>
<a href='#'>
上機實務與理論
</a>
</li>
</ul>
</li>
<!--分界-->
<li>
<a href='#'>
機電整合&#12289;PLC
</a>
<!-- 2-2 -->
<ul>
<li>
<a href='#'>
PLC相關
</a>
</li>
<!-- 2-2-1 -->
<li>
<a href='#'>
機電整合
</a>
</li>
<!-- 2-2-1 -->
</ul>
</li>
<!--分界-->
<li>
<a href='#'>
電子電路相關
</a>
<!-- 2-3 -->
<ul>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/arduino'>
Arduino專區
</a>
</li>
<li>
<a href='#'>
8051單晶片相關
</a>
</li>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/%E9%9B%BB%E8%B7%AF%E6%A8%A1%E6%93%AC'>
電路模擬分享
</a>
</li>
</ul>
</li>
<!--分界-->
<li>
<a href='#'>
機械設計相關
</a>
<!-- 2-2 -->
<ul>
<li>
<a href='#'>
新增中
</a>
</li>
<!-- 2-2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/DIY'>
DIY
</a>
</li>
<!-- 2-2-2 -->
</ul>
</li>
<!--分界-->
<li>
<a href='#'>
其他設計類
</a>
<!-- 2-2 -->
<ul>
<li>
<a href='#'>
素描
</a>
</li>
<!-- 2-2-1 -->
<li>
<a href='#'>
DIY
</a>
</li>
<!-- 2-2-2 -->
</ul>
</li>
<!--分界-->
</ul>
</li>
<!-- 導覽列第三排END -->
<!-- 導覽列第四排開始 -->
<li>
<a>
軟體學習相關
</a>
<!-- 1 -->
<ul>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/solidworks'>
Solidworks
</a>
</li>
<!-- 2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/Fusion%20360'>
Fusion360
</a>
</li>
<!-- 2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/Multisim'>
Multisim
</a>
</li>
<!-- 2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/proteus'>
Proteus
</a>
</li>
<!-- 2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/MATLAB'>
MATLAB
</a>
</li>
<!-- 2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/AutoCAD'>
AutoCAD
</a>
</li>
<!-- 2-1 -->
<!--分界-->
<li>
<a href='#'>
3D切層軟體
</a>
<!-- 2-2 -->
<ul>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/cura'>
Cura
</a>
</li>
<!-- 2-2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/KISSlicer'>
KISSlicer
</a>
</li>
<!-- 2-2-1 -->
</ul>
</li>
<!--分界-->
<li>
<a href='#'>
辦公室軟體
</a>
<!-- 2-2 -->
<ul>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/word'>
WORD
</a>
</li>
<!-- 2-2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/excel'>
EXCEL
</a>
</li>
<!-- 2-2-1 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/powerpoint'>
PowerPoint
</a>
</li>
<!-- 2-2-1 -->
</ul>
</li>
<!--分界-->
</ul>
</li>
<!-- 導覽列第四排END -->
<!-- 導覽列第五排開始 -->
<li>
<a>
文思泉湧(科普&#12289;文章&#12289;書籍&#12289;心得)
</a>
<!-- 1 -->
<ul>
<!--分界-->
<li>
<a href='#'>
文章
</a>
<!-- 2-2 -->
<ul>
<li>
<a href='#'>
科普
</a>
</li>
<!-- 2-2-1 -->
<li>
<a href='#'>
理財
</a>
</li>
<!-- 2-2-2 -->
<li>
<a href='http://hugheschung.blogspot.tw/search/label/%E8%82%B2%E5%85%92'>
育兒
</a>
</li>
<li>
<a href='http://hugheschung.blogspot.tw/search/label/%E5%BF%83%E5%BE%97%E6%84%9F%E6%83%B3'>
心得感想
</a>
</li>
</ul>
</li>
<!--分界-->
<!--分界-->
<li>
<a href='#'>
書籍推薦
</a>
<!-- 2-2 -->
<ul>
<li>
<a href='#'>
入門書
</a>
</li>
<!-- 2-2-1 -->
<li>
<a href='#'>
進階書
</a>
</li>
<!-- 2-2-2 -->
</ul>
</li>
<!--分界-->
</ul>
</li>
<!-- 導覽列第五排END -->
<!-- 導覽列第七排開始 -->
<li>
<a href='https://www.youtube.com/channel/UCw7XodkNh7mS8zvks4UPvBg'>
YouTube教學頻道
</a>
</li>
<!-- 1 -->
<!-- 導覽列第七排END -->
</ul>
</div>
</div>
<!-- 導覽列結束 -->
view raw BloggerNavMenu.txt hosted with ❤ by GitHub
導覽列程式碼---結束


依照以下圖片操作，將程式碼貼上。







點Header1後，你會看到一大堆程式碼，點一下側邊，如下圖。
最後在</div>後面貼上程式碼。




加入CSS程式碼修飾
CSS程式碼---開始
* ================== NAV MENU =================== */
/* MenuBar 下拉選單條整體外框設定 */
#navMenu {
width: 1280px;
height: 35px;
margin: 0 auto 0;
padding: 0;
border-top: 1px solid #0E5E4E;
border-bottom: 1px solid #0E5E4E;
background:#0E5E4E repeat-x top;
}
#navMenuleft {
width: 1000px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
/* 主選單(最上層) Text 設定 */
#nav li a, #nav li a:link, #nav li a:visited {
color: #F7FDFA;
display: block;
text-transform: capitalize;
margin: 0;
padding:5px 25px ;
font: 18px "Noto Sans TC", 微軟正黑體, 繁黑體, "Microsoft JhengHei", "Microsoft YaHei", "Heiti TC", "LiHei Pro", sans-serif, 新細明體, PMingLiU;
}
/* 主選單(最上層)被選取時(selected)的設定 */
#nav li a:hover, #nav li a:active {
background:#003449;
color: #ff8800;
margin: 0;
text-decoration: none;
padding:8px 20px 8px;
font: 15px "Noto Sans TC", 微軟正黑體, 繁黑體, "Microsoft JhengHei", "Microsoft YaHei", "Heiti TC", "LiHei Pro", sans-serif, 新細明體, PMingLiU;
}
/* 子選單(第二層以後) 下拉選單外框設定 */
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#1B5B55 repeat-x top;
width: 150px;
color: #F7FDFA;
//text-transform: lowercase;
float: none;
margin: 0;
border-bottom: 0px solid #56BEAC;
border-left: 0px solid #56BEAC;
border-right: 0px solid #56BEAC;
padding: 7px 15px;
font: normal 14px "Noto Sans TC", 微軟正黑體, 繁黑體, "Microsoft JhengHei", "Microsoft YaHei", "Heiti TC", "LiHei Pro", sans-serif, 新細明體, PMingLiU;
}
/* 子選單(第二層以後)被選取時(selected)的設定 */
#nav li li a:hover, #nav li li a:active {
background: #002939;
color: #ff8800;
padding: 7px 15px;
font: normal 14px "Noto Sans TC", 微軟正黑體, 繁黑體, "Microsoft JhengHei", "Microsoft YaHei", "Heiti TC", "LiHei Pro", sans-serif, 新細明體, PMingLiU;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 150px;
}
#nav li ul ul {
margin: -32px 0 0 180px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
view raw BloggerNavMenu.css hosted with ❤ by GitHub
CSS程式碼---結束

根據下圖，到新增CSS的地方，貼上上述程式碼即可。





一些CSS的指令，可以參考這裡


轉貼本文時，需註明來自黑修斯隨手札記原創作者 hughes chen（黑修斯），及附上原文連結，同時 禁止修改，禁止商業使用 。
Tags
黑修斯

張貼者： 黑修斯

張貼留言

0 留言

不一定能即時回覆問題，有時間會盡量答覆。