2015年12月20日 星期日

在 Google Blogger 中建立下拉式選單


簡介：
於 Blogger 標題正下方建立一列 MenuBar 下拉式選單，點選下拉選單之選項可以超連結至指定有效網址，可達成更便利的閱灠環境。

##ReadMore##
Step 0.
請先進行 Blogger 範本的備份，後續步驟會修改到 Blogger 的 HTML 及 CSS 內容。

Step 1.
「設計」→「範本」→「編輯 HTML 」→搜尋到 ]]></b:skin> ，在其上方加入下拉選單樣式的 CSS 程式：
/* ================== NAV MENU =================== */
/* MenuBar 下拉選單條整體外框設定 */
#navMenu {
 width: 1000px;
 height: 35px;
 margin: 0 auto 0;
 padding: 0;
 border-top: 1px solid #000000;
 border-bottom: 1px solid #000011;
 background:#222222 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: #aaaaaa;
 display: block;
 text-transform: capitalize;
 margin: 0;
 padding:8px 20px 8px;
 font: bold 15px Verdana, Arial;
}

/* 主選單(最上層)被選取時(selected)的設定 */
#nav li a:hover, #nav li a:active {
 background:#000000;
 color: #ff8800;
 margin: 0;
 text-decoration: none;
 padding:8px 20px 8px;
 font: bold 15px Verdana, Arial;
}

/* 子選單(第二層以後) 下拉選單外框設定 */
#nav li li a, #nav li li a:link, #nav li li a:visited {
 background:#222222 repeat-x top;
 width: 150px;
 color: #aaaaaa;
 //text-transform: lowercase;
 float: none;
 margin: 0;
 border-bottom: 1px solid #000000;
 border-left: 1px solid #000000;
 border-right: 1px solid #000000;
 padding: 7px 15px;
 font: normal 14px Verdana, Arial;
}

/* 子選單(第二層以後)被選取時(selected)的設定 */
#nav li li a:hover, #nav li li a:active {
 background: #000000;
 color: #ff8800;
 padding: 7px 15px;
 font: normal 14px Verdana, Arial;
}

#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;
}

  • 其中，幾個常用的參數是可以進行修改以副合自己 Blogger 版本，例如：border(邊框)、width(寬)、height(長)、background(背底色)、color(文字顏色)、font(字型)、margin(邊緣外距離)、padding(邊緣內距離)。
  • 背景色也可以用 url(http://......) 加入圖片網址做成底圖。
  • 顏色色碼可參考「色 碼 表」之十六進制碼。


Step 2.
同樣「編輯HTML」搜尋「自己 Blogger 名稱」，如下圖位置：

在上圖的 </div> 下加入 HTML Code 新增下拉式選單語法：
<!-- 自訂義下拉式選單start -->
<div id='navMenu'>
<div id='navMenuleft'>
<ul id='nav'>

<li>
 <a expr:href='data:blog.homepageUrl'>Home</a>
</li>

<li>
 <a href='http://p501lab.blogspot.tw/p/about.html'>About</a>
</li>

<li>
 <a href='http://p501lab.blogspot.tw/p/3d.html'>3D</a>
<!--
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/3d-blender_19.html'>Blender</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/3d-freecad.html'>FreeCAD</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/3d-printer.html'>3D Printer</a></li>
   </ul>
-->
</li>

<li>
 <a href='http://p501lab.blogspot.tw/p/blog-usage_19.html'>Blog Usage</a>
</li>

<li>
 <a>Embedded Board</a>
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/embedded-boards-cubieboard.html'>Cubieboard</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/embedded-boards-raspberry-pi.html'>Raspberry Pi</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/embedded-board-unojoy.html'>UnoJoy</a></li>
 </ul>
</li>

<li>
 <a>Linux</a>
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/linux-centos.html'>CentOS</a></li>
  <li>
   <a href='http://p501lab.blogspot.tw/p/linux-debian_5.html'>Debian</a>
   <ul>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian-tools.html'>Tools 工具</a></li>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian.html'>基礎操作及運用</a></li>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian-embedded.html'>Embedded 課程</a></li>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian_35.html'>進階課程</a></li>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian_19.html'>進階其他</a></li>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian-laptop.html'>Laptop</a></li>
   </ul>
  </li>
  <li><a href='http://p501lab.blogspot.tw/p/linux-red-hat.html'>Red Hat</a></li>
 </ul>
</li>

<li>
 <a>Programs</a>
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/programs-android.html'>Android App</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-arduino.html'>Arduino</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-bash-shell.html'>Bash Shell</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-jsp.html'>JSP</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-java.html'>Java</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-latex.html'>LaTeX</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-python_19.html'>Python</a></li>
 </ul>
</li>

<li>
 <a>Windows</a>
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/windows-tools.html'>Tools</a></li>
 </ul>
</li>

</ul>


</div>
</div>
<!-- 自訂義下拉式選單end -->

---
簡易說明，下拉選單的語法架構為。
  • 最上層 MenuItem，用 <li>...</li> 包住的內容，如下：
<li>
 <a href='http://p501lab.blogspot.tw/p/blog-usage_19.html'>Blog Usage</a>
</li>

  • 其中 <li>...</li>，也可以去除超連結，如下：
<li>
 <a>Embedded Board</a>
</li>

  • 加入第二層以後 MenuItem，要用最上層的 <li>...</li> 語法外，再加入 <ul>...</ul>，並且再 ul 標籤內加入同前面敘述的 <li>...</li>的架構，如下：
<li>
 <a>Embedded Board</a>
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/embedded-boards-cubieboard.html'>Cubieboard</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/embedded-boards-raspberry-pi.html'>Raspberry Pi</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/embedded-board-unojoy.html'>UnoJoy</a></li>
 </ul>
</li>


---
Reference:
CSS∥排版觀念-BoxModel>Margin、Padding
凱特打結該該叫→[教學]在blogger建立下拉式導覽列

於
標籤：