CSS靜態頁面的樹形菜單

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

CSS靜態頁面的樹形菜單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>首頁面</title>
<style type="text/css" >
a
{
text-decoration:none;
}
a,a:visited
{
color:#000;
background:inherit;
}
body
{
margin:0;
padding:20px;
font:12px tahoma,宋體,sans-serif;
}
dt
{
font-size:22px;
font-weight:bold;
margin:0 0 0 15px;
}
dd
{
margin:0 0 0 15px;
}
h4
{
margin:0;
padding:0;
font-size:18px;
text-align:center;
}
p
{
margin:0;
padding:0 0 0 18px;
}
p a,p a:visited
{
color:#00f;
background:inherit;
}

.TreeMenu img.s
{
cursor:hand;
vertical-align:middle;
}
.TreeMenu ul
{
padding:0;
}
.TreeMenu li
{
list-style:none;
padding:0;
}
.Closed ul
{
display:none;
}
.Child img.s
{
background:none;
cursor:default;
}

#CategoryTree ul
{
margin:0 0 0 17px;
}
#CategoryTree img.s
{
width:34px;
height:18px;
}
#CategoryTree .Opened img.s
{
background:url(skin3/opened.gif) no-repeat 0 1px;
}
#CategoryTree .Closed img.s
{
background:url(skin3/closed.gif) no-repeat 0 1px;
}
#CategoryTree .Child img.s
{
background:url(skin3/child.gif) no-repeat 13px 2px;
}

#CategoryTree
{
float:left;
width:249px;
border:1px solid #99BEEF;
background:#D2E4FC;
color:inherit;
margin:3px;
padding:3px;
}

</style>
<script language=jscript>
function ChangeStatus(o)
{
if (o.parentNode)
{
if (o.parentNode.className == "Opened")
{
o.parentNode.className = "Closed";
}
else
{
o.parentNode.className = "Opened";
}
}
}

</script>
</head>

<body>
<div class="TreeMenu" id="CategoryTree">
<h4>CSS樹形菜單</h4>
<ul>
  <li class="Opened">
   <img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
   <a href="#">第一大類</a>
   <ul>
    <li class="Opened"><img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
    <a href="#">我的文件</a>
     <ul>
      <li class="Opened"><img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
       <a href="#">JavaScrit</a>
       <ul>
        <li class="Child"><img class=s src="s.gif"><a href="#">常用小技巧</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">圍繞滑鼠的文字</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">OWC圖表</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">鎖定表列</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">B/S常用技巧</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">操作xml</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">產生guid</a></li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </li>
  <li class="Opened">
   <img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
   <a href="#">第二大類</a>
   <ul>
    <li class="Opened"><img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
    <a href="#">我的文件</a>
     <ul>
      <li class="Opened"><img class=s src="s.gif" onclick="javascript:ChangeStatus(this);">
       <a href="#">JavaScrit</a>
       <ul>
        <li class="Child"><img class=s src="s.gif"><a href="#">常用小技巧</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">圍繞滑鼠的文字</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">OWC圖表</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">鎖定表列</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">B/S常用技巧</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">操作xml</a></li>
        <li class="Child"><img class=s src="s.gif"><a href="#">產生guid</a></li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </li>
</ul>
</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More