2009年12月20日 星期日

在blogger製作水平彈出式選單(popup menu)

本文是針對blogger。
一般部落格是很少人使用彈出選單,因為不管水平或垂直選單,佔用的寬度較大,一般我們能放選單的位置,大概只有側邊欄,因為版面限制的關係,除非你的側邊欄很寬,否則是無法全部顯示的。
因為在「推薦一個很棒的blogger三欄式範本(template)」一文中,所介紹的範本,在範本的上下方,可以增加「小工具」,因為其欄寬夠大,所以可以建立彈出式選單。


以下原始碼放在template的CSS區域
div, td, span, ul, li, p {
padding:0;
margin:0;
list-style-type: none;
text-decoration: none;
}

#navigation, #navigation li ul {
list-style-type:none;
}
#navigation {
width:146px;
font-size:10pt;
}
/*控制主副選單的文字,背景色*/
/*主副選單的可用文字欄寬是一致的*/

#navigation li {
text-align:left;
text-indent:14px;
position:relative;
z-index:999999;
font-size:13px;
background-color: #F6F6F6
padding-bottom:1px;
}

#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#2F4552;
width:146px!important;width:148px;
border-bottom:1px dashed #C9C9C9;
border-width:0 0 1px 0;
height:19px;
line-height:19px;
}
#navigation li a:hover {
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTD1b0NH1NYfYTAOTN0xYYkHX7Pql8T9fbzx0wU7ps-9tZ-Wd_mLDqgFZf6ZgmGTpyJGhID0G3HsCOXF_eG-jLnfxA7pslSVk4CuD64m4OMF7YqjjcpJXTLEJjfgOvfUpKANtinePrg/) no-repeat right;
background-color:#446B9E;
font-weight:bold;
*_line-height:19px;
}
#navigation li ul li a:link {
color:#475E74;
padding:3px 0;
border:1px solid #DCDCDC;
border-bottom:none;
}
#navigation li ul li a:visited {
color:#475E74;
padding:3px 0;
border:1px solid #DCDCDC;
border-bottom:none;
}
#navigation li ul li a:hover {
color:#005599;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ0GlHmN1YTyIHFaqnc0URc0Q2iF1otOmS1FclJZvJyRtybIHyn82-JYXteuhDUJ_ejbJXdt7OHJVenwBjjxc9GgN8DAiRyW9hBo_gogFAbrct15EyOIJdy2UnpvpP21zJIiMfu06pNg/) no-repeat left;
background-color:#E8E8E8;
}
#navigation li ul {
display:none;
position:absolute;
top:-1px;
left:0;
margin-top:1px;
margin-left:147px; /*副選單開始的位置*/
width:148px; /*副選單的欄寬,但不是文字可用區域*/
border-bottom:1px solid #DCDCDC;
background-color:#FFF;
}
#navigation li ul li ul {
z-index:999999;
display:none;
position:absolute;
top:0px;
margin-top:0;
margin-left:1px;
width:146px;
}
.menubox {
width:162px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhasXuxJsO4iJl1NjVRnvgAfEvjGSrL_fECtWJk0cguJa9SF_Qn24pmDH2dAvRdu2w2awpSN56Gq9-aup61fJxbwkX6BEH6IIIsQszjKhvm8I9wqBD528dwjq13VSyKX8EVfYuEWWpU2Q/) no-repeat center top;
height:28px;
line-height:28px;
text-align:center;
margin:0 auto;
font-size:15px;
}
.contentbox {
clear:both;
width:160px!important;width:162px;
border:1px solid #446B9E;
border-top:none;
height:auto;
margin:0 auto;
text-align:center;
background-color:#FFFFFF;
}


以下程式碼放在網頁元素→新增html/javascript的小工具內

<script type="text/javascript">

function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>

<div style="width:183px;float:left;text-align:center;position:relative;z-index:99999">
<div class="menubox">產品列表</div>
<div class="contentbox">
<div style="padding:3px 6px;width:148px;background-color:#FFF;">
<ul id="navigation">
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"><a href="#">3C資訊</a>
<ul>
<li><a href="#" target="_blank">主機板</a></li>
<li><a href="#" target="_blank">硬碟</a></li>
</ul>
</li>
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"><a href="#">家電</a>
<ul>
<li><a href="#">電視</a></li>
<li><a href="#" target="_blank">冰箱</a></li>
</ul>
</li>
<li onMouseOver="displaySubMenu(this)" onMouseOut="hideSubMenu(this)"><a href="#">音樂</a>
<ul>
<li><a href="#" target="_blank">mp3</a></li>
<li><a href="#" target="_blank">cd</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

  © Blogger templates Psi by Ourblogtemplates.com 2008

Back to TOP