進擊的IT: 【CSS 應用】CSS半透明狀態選單設計

今天要來介紹CSS製作的兩個階層的Menu而且是半透明狀態的
用純CSS+HTML製作不使用JS或是JQuery
嗯~半透明狀態的Menu加上一張美麗的背景圖，看起來總是很有質感
在開始介紹透明選單前我們要線來建立HTML Code
這邊我們用DIV Tag跟ul Tag來建立CSS選單，如下所示

<div id="menu-center">
  <div id="menu">
    <div class="list_OpBg"></div>
    <ul class="list">
      <li>
        <a href="#">導覽1</a>
        <div class="list_OpBg2"></div>
        <ul>
          <li><a href="#">導覽1-1</a></li>
          <li><a href="#">導覽1-2</a></li>
          <li><a href="#">導覽1-3</a></li>
          <li><a href="#">導覽1-4</a></li>
          <li><a href="#">導覽1-5</a></li>
        </ul>
      </li>
      <li>
        <a href="#">導覽21</a>
        <div class="list_OpBg2"<>/div>
        <ul>
          <li<>a href="#">導覽2-1</a<>/li>
          <li<>a href="#">導覽2-2</a<>/li>
          <li<>a href="#">導覽2-3</a<>/li>
          <li<>a href="#">導覽2-4</a<>/li>
          <li<>a href="#">導覽2-5</a<>/li>
        </ul>
      </li>
      <li>
        <a href="#">導覽3</a>
        <div class="list_OpBg2"<>/div>
        <ul>
          <li<>a href="#">導覽3-1</a<>/li>
          <li<>a href="#">導覽3-2</a<>/li>
          <li<>a href="#">導覽3-3</a<>/li>
          <li<>a href="#">導覽3-4</a<>/li>
          <li<>a href="#">導覽3-5</a<>/li>
        </ul>
      </li>
      <li>
        <a href="#">導覽4</a>
        <div class="list_OpBg2"></div>
        <ul>
          <li><a href="#">導覽4-1</a></li>
          <li><a href="#">導覽4-2</a></li>
          <li><a href="#">導覽4-3</a></li>
          <li><a href="#">導覽4-4</a></li>
          <li><a href="#">導覽4-5</a></li>
        </ul>
      </li>
      <li>
        <a href="#">導覽5</a>
        <div class="list_OpBg2"></div>
        <ul>
          <li><a href="#">導覽5-1</a></li>
          <li><a href="#">導覽5-2</a></li>
          <li><a href="#">導覽5-3</a></li>
          <li><a href="#">導覽5-4</a></li>
          <li><a href="#">導覽5-5</a></li>
        </ul>
      </li>
      <li>
        <a href="#">導覽6</a>
        <div class="list_OpBg2"></div>
        <ul>
          <li><a href="#">導覽6-1</a></li>
          <li><a href="#">導覽6-2</a></li>
          <li><a href="#">導覽6-3</a></li>
          <li><a href="#">導覽6-4</a></li>
          <li><a href="#">導覽6-5</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

顯示結果如下圖(次圖是截圖不是完整圖所以導覽5之後沒出現是正常的)

建立好了HTML Code以後就讓我們開始撰寫CSS Code吧~!!
今天會分別介紹CSS2跟CSS3兩種版本的CSS Menu寫法

CSS2版本Menu寫法

在CSS2這個版本的時代中因為瀏覽器還處於非常混亂的時代
所以在透明度的CSS屬性上各個瀏覽器支援性都不一樣因此也會有透過Heck
的方式來解決透明度的問題,分別是透過以下四種屬性

  opacity:0.75;/*通用透明度設定方式(FireFox、Safari跟Opera可正常讀取)*/
  -moz-opacity:0.75;/*早期FireFox*/
  -khtml-opacity:0.75;/*早期Safari*/
  filter:alpha(Opacity=75);/*IE*/

接下來就讓我們看完成的CSS Code吧，說明寫在Code內的註解

操作前注意事項: 1.若是對選單直接下透明屬性會造成文字也一起變透明，所以我們要另外做一個DIV 來當作透明背景以達成menu文字正常顯示但是背景卻變成透明狀態; 2.因為此範例會用到絕對定位(position:absolute)因此若是選單選項(這邊指li) 的寬高有變動，其相關的寬度跟高度也要跟著調整喔

body, ul, il, div{
  /*清除body, ul, il, div元素的外距跟內距*/
  margin:0px;
  padding:0px;
}
body{
  /*設定頁面背景圖片*/
  background:url("http://wallpapers55.com/wp-content/uploads/2013/11/Light-Green-Background-Wallpaper-HD.jpg")no-repeat;
}
#menu-center{
  /*設定menu內容區塊*/
  width:700px;/*寬度為700px*/
  margin:10px auto;/*的上/下外距為10px 左/右auto(代表置中須設定寬度才有效)*/
}
a{
  /*設定連結基本樣式*/
  color:#FFF;/*文字白色*/
  text-decoration:none;/*去除連結底線*/
}
a:haver{
  /*設定滑鼠滑過連結樣式*/
  color:#FFF;/*文字白色*/
}
#menu{
  /*設定選單樣式*/
  width:100%;/*寬度100%(會自動等同於#menu-center的大小)*/
  float:left;/*向左浮動顯示(讓ul呈現橫向顯示)*/
}
#menu .list_OpBg{
  /*設定透明背景區塊*/
  position:absolute;/*設定透明背景位置為絕對位置*/
  width:700px;/*設定背景寬度(一定要設置)*/
  height:30px;/*設定背景高度(一定要設置)*/
  background:#000;/*設定背景為黑色*/
  /*設定透明度為75%*/
  opacity:0.75;
  -moz-opacity:0.75;
  -khtml-opacity:0.75;
  filter:alpha(Opacity=75);
  z-index:0;/*設定背景區塊的Z軸所引為0*/
}
ul{
  /*ul中的項目樣式*/
  list-style:none;/*清除項目樣式*/
}
#menu ul.list>li{
  /*設定第一層選單樣式*/
  display:block;/*設定li為區塊元素*/
  float:left;/*向左浮動*/
  position:relative;/*設定為相對位置*/
  width:16.66%;/*每個li的寬度(以700px為計算基準)*/
  padding:5px 0px;/*每個li上/下內距為5px 左/右內距為0px*/
  text-align:center;/*li元素內容置中*/
}
#menu ul.list>li ul{
  /*設定第二層選單樣式*/
  display:none;/*隱藏區塊*/
  position:absolute;/*設定為絕對位置*/
  margin:5px auto 0 auto;/*外距設定上距為5px下距0px左/右自動置中*/
  width:100%;/*寬度100%會自動對齊第一層menu的li元素*/
}
#menu ul.list>li ul li{
  /*設定第二層選單的li樣式*/
  text-align:center;/*內容置中*/
  width:100%;/*寬度設定為100%(基本上會合第二層選單的ul一樣寬)*/
  padding:5px 0;/*內距上/下各5px*/
}
#menu ul.list>li:hover{
  /*設定滑鼠滑過第一層選單的li時的樣式*/
  background:#000;/*背景設為黑色*/
}
#menu ul.list>li:hover ul{
  /*設定滑鼠滑過第一層選單的li時第二層選單的樣式*/
  display:block;/*顯示第二層選單並設為區塊元素*/
}

#menu ul.list>li:hover ul li:hover{
  /*設定滑鼠滑過第二層選單的li的樣式*/
  background:#000;/*背景設為黑色*/
}
#menu ul.list>li:hover .list_OpBg2{
  /*設定滑鼠滑過第一層選單的li時同時設定透明背景區塊的樣式*/
  position:absolute;/*設定為絕對位置*/
  background:#000;/*背景為黑色*/
  width:100%;/*設定寬度*/
  height:150px;/*設定高度(若日後選單的li有增加要跟著調整此屬性)*/
  margin:5px 0 0 0;/*設定外距上距為5px其它為0px*/
  /*設定透明程度為75%*/
  opacity:0.75;
  -moz-opacity:0.75;
  -khtml-opacity:0.75;
  filter:alpha(Opacity=75);  
}

範例演示

See the Pen menu Style IE9+ by jen (@jen_huang) on CodePen.

CSS3版本Menu寫法

接下來要介紹用CSS3的寫法
在CSS3中就有專門方便設定透明背景的屬性了
那就是rgba這個屬性值，如下述

/*rgba值的內容分別為 色碼1(R),色碼2(G),色碼3(B),透明度(A)
  色碼由0~255的數字組成，透明度則是0~1之間的數值(RGB是什麼請自行Google)*/
background: rgba(0, 0, 0, 0.8);

接下來就讓我們開始用background屬性的rgba屬性值來製作CSS選單吧~!
詳細說明請參考程式碼內的註解

操作前注意事項: 因為CSS3基本上已經不再支援舊版瀏覽器所以就不需要再針對各個瀏覽器寫Heck 而且CSS3的rgba屬性值已經完整支援透明背景，所以不會再出現設置透明背景後連內容一起變透明的狀況，所以就不用像CSS2一樣要再設置一個DIV當作背景

body, ul, il, div{
  /*清除body, ul, il, div元素的外距跟內距*/
  margin:0px;
  padding:0px;
}
body{
  /*設定頁面背景圖*/
  background:url("http://wallpapers55.com/wp-content/uploads/2013/11/Light-Green-Background-Wallpaper-HD.jpg")no-repeat;
}
#menu-center{
  /*設定menu內容區塊*/
  width:700px;/*寬度為700px*/
  margin:10px auto;/*的上/下外距為10px 左/右auto(代表置中須設定寬度才有效)*/
}
a{
  /*設定連結基本樣式*/
  color:#FFF;/*文字白色*/
  text-decoration:none;/*去除連結底線*/
}
a:haver{
  /*設定滑鼠滑過連結樣式*/
  color:#FFF;/*文字白色*/
}
#menu{
  /*設定選單樣式*/
  width:100%;/*寬度100%(會自動等同於#menu-center的大小)*/
  float:left;/*向左浮動顯示(讓ul呈現橫向顯示)*/
  background: rgba(0, 0, 0, 0.6); /*設定選單背景為黑色透明度60%*/
}
ul{
  /*ul中的項目樣式*/
  list-style:none;/*清除項目樣式*/
}
#menu ul.list>li{
  /*設定第一層選單樣式*/
  display:block;/*設定li為區塊元素*/
  float:left;/*向左浮動*/
  position:relative;/*設定為相對位置*/
  width:16.66%;/*每個li的寬度(以700px為計算基準)*/
  padding:5px 0px;/*每個li上/下內距為5px 左/右內距為0px*/
  text-align:center;/*li元素內容置中*/
}
#menu ul.list>li ul{
  /*設定第二層選單樣式*/
  display:none;/*隱藏區塊*/
  position:absolute;/*設定為絕對位置*/
  margin:5px auto 0 auto;/*外距設定上距為5px下距0px左/右自動置中*/
  width:100%;/*寬度100%會自動對齊第一層menu的li元素*/
}
#menu ul.list>li ul li{
  /*設定第二層選單的li樣式*/
  text-align:center;/*內容置中*/
  background: rgba(0, 0, 0, 0.6);/*設定選單背景為黑色透明度60%*/
  width:100%;/*寬度設定為100%(基本上會合第二層選單的ul一樣寬)*/
  padding:5px 0;/*內距上/下各5px*/
}
#menu ul.list>li:hover{
  /*設定滑鼠滑過第一層選單的li時的樣式*/
  background: rgba(0, 0, 0, 0.8);/*設定選單背景為黑色透明度80%*/
}
#menu ul.list>li:hover ul{
  /*設定滑鼠滑過第一層選單的li時第二層選單的樣式*/
  display:block;/*顯示第二層選單並設為區塊元素*/
}
#menu ul.list>li:hover ul li:hover{
  /*設定滑鼠滑過第二層選單的li的樣式*/
  background: rgba(0, 0, 0, 0.8);/*設定選單背景為黑色透明度80%*/
}

我們可以發現若是使用rgba可以少打不少的程式碼
但是目前來說使用透明背景的網站比例其實並不高
因為都要考量用戶端瀏覽器的問題，但是目前微軟停止支援XP
相信能夠慢慢促進使用者更換瀏覽器到最新版的~(雖然大陸地區用IE6的比例依然不少)
最後就讓我們來看看實際的顯示效果吧~!!

範例演示

See the Pen menu style by jen (@jen_huang) on CodePen.

※注意事項: 因為此範例有用CSS中的子選擇器因此是以IE9+以上版本為效果最佳預覽 firefox跟Chrome如果有更新至最新版基本上都可以正常顯示(免安裝版的則不一定)

CSS Menu介紹到此為止~謝謝大家!!

進擊的IT

Pages

系列文章

2014/12/19

【CSS 應用】CSS半透明狀態選單設計

沒有留言:

張貼留言