代码之家 › 专栏 › 技术社区 › Eric

有可能制作一个纯CSS树图吗?

treeview internet-explorer css

Eric · 技术社区 · 14 年前

我试过了 here . 然而,它有两个问题:

IE公司
列表的最后一个元素是子列表

有没有更好的办法?

2 回复 | 直到 14 年前

masmrdrr 10 年前

试试下面的代码,它是纯CSS,没有JS/jQuery(IMO更兼容),通过操纵边框和间距来工作。

适用于FF/Chrome& IE公司 . 享受:-)

.parent a,

li {

  font-size: 22px;

  color: #000;

  font-family: "Source Sans Pro", sans-serif;

}

.child a,

li {

  font-size: 18px;

  color: #000;

}

.subchild a,

li {

  font-size: 18px;

  color: #888888;

}

.s2child a,

li {

  font-size: 16px;

  color: #ccc;

}

.tree,

.tree ul {

  list-style-type: none;

  margin-left: 0 0 0 10px;

  padding: 0;

  position: relative;

  overflow: hidden;

}

.tree li {

  margin: 0 0 0 15px;

  padding: 0 12px 0 20px;

  position: relative;

}

.tree li::before,

.tree li::after {

  content: '';

  position: absolute;

  left: 0;

}

/* horizontal line on inner list items */

.tree li::before {

  border-top: 2px solid #000;

  top: 14px;

  width: 15px;

  height: 0;

}

/* vertical line on list items */

.tree li:after {

  border-left: 2px solid #000;

  height: 100%;

  width: 0px;

  top: -5px;

}

/* lower line on list items from the first level because they don't have parents */

.tree > li::after {

  top: 15px;

}

/* hide line from the last of the first level list items */

.tree > li:last-child::after {

  display: none;

}

/* hide line from before the Home or starting page or first element	*/

.tree > li:first-child::before {

  display: none;

}

.tree ul:last-child li:last-child:after {

  height: 20px;

}

.tree a:hover {

  color: red;

  font-weight: 500;

  text-shadow: 1px 2px 2px #F3F3F3;

}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Pure CSS Tree</title>
  <link href="tree.css" rel="stylesheet" type="text/css">
</head>

<body>
  <ul class="tree">
    <li class="parent"><a href="#">Grand Parent</a>
      <ul>
        <li class="child"><a href="#">Parent</a>
        </li>
        <li class="child"><a href="#">Parent</a>
          <ul>
            <li class="subchild"><a href="#">Child</a>
              <ul>
                <li class="s2child"><a href="#">Grand Child</a>
                </li>
                <li class="s2child"><a href="#">Grand Child</a>
                </li>
                <li class="s2child"><a href="#">Grand Child</a>
                </li>
                <li class="s2child"><a href="#">Grand Child</a>
                </li>
                <li class="last s2child"><a href="#">Grand Child</a>
                </li>
              </ul>
            </li>
            <li class="subchild"><a href="#">Child</a>
              <ul>
                <li class="s2child"><a href="#">Grand Child</a>
                </li>
                <li class="s2child"><a href="#">Grand Child</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="child"><a href="#">Parent</a>
        </li>
      </ul>
    </li>
  </ul>

</body>

</html>

ssokolow 14 年前

你并没有详细说明你的标准是什么,但从你所说的,我建议你看一下 SlickMap CSS

更新: 知道了!我只记得我在哪里见过你要找的东西:

jsTree 是一个jQuery插件,它创建一个具有您想要和使用的样式的树小部件 <ul> 在内部代表它。