OECSPACE -「開關效果運用」
開關效果運用
開關效果不只可以用在選單也可以放圖開關選單範例
下載JS檔 放置於網頁目錄下
<script type="text/javascript" src="switchmenu.js"></script> <style type="text/css">
<!--
.menutitle{
cursor:pointer;
margin-bottom: 2px;
padding: 2px;
color:#000;
width:120px;
text-align:center;
background:#efefef;
border-right: #999 1px solid;
border-bottom: #999 1px solid;
}
.submenu{
display: none;
margin-left: 10px;
margin-bottom: 5px;
}
-->
</style>
<div id="maindiv">
<div class="menutitle" onclick="switchmenu('sub1')">menu1</div>
<span class="submenu" id="sub1">
- <a href="#">text-1</a> <br />
- <a href="#">text-2</a>
</span>
<div class="menutitle" onclick="switchmenu('sub2')">menu2</div>
<span class="submenu" id="sub2">
- <a href="#">text-1</a> <br />
</span>
<div class="menutitle" onclick="switchmenu('sub3')">menu3</div>
<span class="submenu" id="sub3">
- <a href="#">text-1</a> <br />
</span>
</div>
開關效果第二運用範例(需同上下載js檔案)
同樣的程式只是換個位置和改變CSS就能做出不同的效果
http://www.hsiu28.net/pr/logo-2.gif
http://www.hsiu28.net/pr/logo.gif
http://www.hsiu28.net/pr/logo-5.gif
<style type="text/css">
<!--
.menutitle{
cursor:pointer;
padding: 5px;
color:#000;
background:#efefef;
text-align:center;
border: #999 1px solid;
}
.submenu{
margin-top: 5px;
padding: 5px;
border: #ccc 1px solid;
width: 300px;
height: 100px;
display: none;
}
-->
</style>
<div id="maindiv">
<span class="menutitle" onclick="switchmenu('sub1')">01</span>
<span class="menutitle" onclick="switchmenu('sub2')">02</span>
<span class="menutitle" onclick="switchmenu('sub3')">03</span>
<span class="submenu" id="sub1">
text-01
</span>
<span class="submenu" id="sub2">
text-02
</span>
<span class="submenu" id="sub3">
text-03
</span>
</div>
- 每個選項以 1234.... 排列設定,如藍色部分 :
<div class="menutitle" onclick="switchmenu('sub1')">menu1</div>
<span class="submenu" id="sub1">
- 圖片替代文字可以寫為:
<img src="xx.gif" onclick="switchmenu('sub1')" alt="Image" />