CSS Tree Menu

css-tree-menu.markdown

CSS Tree Menu

A Pen by Po-Ying Chen on CodePen.

License.

index.haml

#demo
  %ul.tree-menu
    %li
      %input#demo1-1{:checked => "true", :name => "demo1-1", :type => "checkbox"}/
      %label{:for => "demo1-1"} item 1
      %ul
        %li
          %a{:href => "#"} item 1-1
        %li
          %input#demo1-1-2{:checked => "true", :name => "demo1-1-2", :type => "checkbox"}/
          %label{:for => "demo1-1-2"} item 1-2
          %ul
            %li
              %a{:href => "#"} item 1-2-1
            %li
              %a{:href => "#"} item 1-2-2
            %li
              %a{:href => "#"} item 1-2-3
        %li
          %a{:href => "#"} item 1-3
    %li
      %input#demo1-2{:checked => "true", :name => "demo1-2", :type => "checkbox"}/
      %label{:for => "demo1-2"} item 2
      %ul
        %li
          %a{:href => "#"} item 2-1
        %li
          %a{:href => "#"} item 2-2
    %li
      %a{:href => "#"} item 3

style.sass

@import compass

body
  padding: 50px 0
  color: #666

a
  text-decoration: none
  color: #1ab4ff

#demo
  width: 300px
  margin: 0 auto

.tree-menu
  font-size: 14px
  line-height: 24px
  overflow: hidden

  input[type=checkbox]
    display: none
  
  ul
    margin: 0 0 0 20px
    display: none
    position: relative

    &:before
      content: ''
      position: absolute
      top: -12px
      bottom: 12px
      border-left: 1px #EEE solid
      left: -30px

  label
    cursor: pointer

  input[type=checkbox]:checked
    ~ ul
      display: block

    ~ label
      color: #CCC

  li
    list-style: none
    position: relative

    &:before
      content: ''
      position: absolute
      width: 25px
      border-bottom: 1px #EEE solid
      z-index: -1
      left: -30px
      top: 12px

  > li
    margin-left: 10px