Created
February 25, 2014 15:28
-
-
Save MichaelSp/9211076 to your computer and use it in GitHub Desktop.
CSS3 Javascript Tree
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import 'font-awesome'; | |
.tree { | |
margin-top: 30px; | |
border-radius: 4px; | |
background-color: #fff; | |
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.4); | |
overflow: auto; | |
min-height: 400px; | |
li { | |
list-style-type: none; | |
padding: 10px 5px 0 5px; | |
position: relative; | |
span { | |
border: 1px solid #999; | |
border-radius: 5px; | |
display: inline-block; | |
padding: 3px 8px; | |
text-decoration: none; | |
} | |
&.parent_li > span { | |
cursor: pointer; | |
&:before { | |
@extend .fa; | |
@extend .fa-plus; | |
} | |
} | |
&.collapsed > span:before { | |
@extend .fa-minus; | |
} | |
} | |
} | |
.tree li::before, .tree li::after { | |
content: ''; | |
left: -20px; | |
position: absolute; | |
right: auto; | |
} | |
.tree li::before { | |
border-left: 1px solid #999; | |
bottom: 50px; | |
height: 100%; | |
top: 0px; | |
} | |
.tree li::after { | |
border-top: 1px solid #999; | |
top: 25px; | |
width: 25px | |
} | |
.tree > ul > li::before, .tree > ul > li::after { | |
border: 0 | |
} | |
.tree li:last-child::before { | |
height: 25px | |
} | |
.tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul li span { | |
background: #eee; | |
border: 1px solid #94a0b4; | |
color: #000 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.tree.list | |
%ul | |
%li | |
%span | |
Child | |
%ul | |
%li | |
%span | |
Grand Child | |
%li | |
%span | |
Child | |
%ul | |
%li | |
%span | |
Grand Child | |
%li | |
%span | |
Grand Child | |
%ul | |
%li | |
%span | |
Great Grand Child | |
%ul | |
%li | |
%span | |
Great great Grand Child | |
%li | |
%span | |
Great great Grand Child | |
%li | |
%span | |
Great Grand Child | |
%li | |
%span | |
Great Grand Child | |
%li | |
%span | |
Grand Child |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready ()-> | |
$('.tree li:has(ul)').addClass('parent_li') | |
$('.tree li.parent_li > span').on 'click', (e)-> | |
e.preventDefault() | |
$(this).parent('li.parent_li').toggleClass('collapsed').find(' > ul > li').slideToggle('fast') |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Almost as seen on http://stackoverflow.com/questions/11167628/trees-in-twitter-bootstrap