Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags
more
Archives
Today
Total
관리 메뉴

개발자입니다

[생활코딩 CSS] 자바스크립트 없이 tree 만들기 본문

HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피

[생활코딩 CSS] 자바스크립트 없이 tree 만들기

끈기JK 2023. 2. 4. 22:26

 

 

label for 에 checkbox의 id 입력하면 label 클릭으로도 checkbox 클릭한 효과 줄 수 있다.

 

 

<!doctype html>
<html>
 
<head>
 <link rel="stylesheet" href="tree_fontello/css/fontello.css">
  <style>
    .tree{
      color:#393939;
    }
    .tree, .tree ul{
      list-style: none;
      padding-left:17px;
    }
    .tree *:before{
      width:17px;
      height:17px;
      display:inline-block;
    }
    .tree label{
      cursor: pointer;
    }
    .tree label:before{
      content:'\f256';
      font-family: fontello;
    }
    .tree a{
      text-decoration: none;
      color:#393939;
    }
    .tree a:before{
      content:'\e800';
      font-family: fontello;
    }
    .tree input[type="checkbox"] {
      display: none;
    }
    .tree input[type="checkbox"]:checked~ul {
      display: none;
    }
    .tree input[type="checkbox"]:checked+label:before{
      content:'\f255';
      font-family: fontello;
    }
  </style>
</head>
 
<body>
  <ul class="tree">
    <li>
      <input type="checkbox" id="root">
      <label for="root">ROOT</label>
      <ul>
        <li><a href="https://opentutorials.org">node1</a></li>
        <li><a href="https://opentutorials.org">node2</a></li>
        <li>
          <input type="checkbox" id="node3">
          <label for="node3">node3</label>
          <ul>
            <li><a href="https://opentutorials.org">node31</a></li>
            <li><a href="https://opentutorials.org">node32</a></li>
            <li><a href="https://opentutorials.org">node33</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
 
</body>
 
</html>

 

 

저작자표시

'HTML & CSS > 생활코딩 - 겁나 빠른 웹 레시피' 카테고리의 다른 글

[생활코딩 CSS] 리로딩 없이 URL 바꾸기 (음악앱)  (0) 2023.02.06
[생활코딩 CSS] 랜덤 이미지 생성기  (0) 2023.02.05
[생활코딩 CSS] Parallax(시차를 이용한 효과)  (0) 2023.02.04
[생활코딩 CSS] 링크를 버튼으로 만들기  (0) 2023.02.04
[생활코딩 CSS] Masonry layout 만들기  (0) 2022.09.29
'HTML & CSS/생활코딩 - 겁나 빠른 웹 레시피' Related Articles more