Skip to content

Instantly share code, notes, and snippets.

@defims

defims/index.html

Created August 21, 2012 18:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save defims/3418187 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save defims/3418187 to your computer and use it in GitHub Desktop.
Download ZIP
pure css mindmap with nest list element.
Raw
index.html
<div class="topic">
topics
<ul>
<li>this is a long subtopic and conetent</li>
<li>topic2</li>
<li>topic3</li>
<li>topic4</li>
<li>topic5</li>
<li>topic6 it's also very long</li>
<li>topic7</li>
<li>topic8</li>
<li>topic9</li>
<li>topic10</li>
<li>topic11</li>
<li>topic12</li>
<li>topic13</li>
</ul>
</div>
Raw
style.css
.topic{
display: block; position: relative; z-index: 1;
padding:.5em;
width: 25em;
border:solid 1px black;
text-align:right; vertical-align: middle; white-space:nowrap;
background: pink;
}
.topic:before{
content: ""; display: block; background: yellow; position: absolute; z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
margin:auto;
width: 5em; height: 2.5em;
}
ul{
display: inline-block; position:relative; overflow: hidden; z-index: -2;
left: -100%;
margin:0 -100% 0 45%; padding:0; /*position */
width: 100%;
vertical-align: middle;
background:rgba(255,0,0,.4);
}
ul:before{
0content: ""; display: block; position: absolute; z-index: 3;
left:0; right: 0;
margin: auto;
width: .4em; height: 100%;
background: white;
}
ul>li{
display:block; 0position: relative; float: right;
margin:.25em 0; padding: .5em;
width:8em; height:auto;
vertical-align: top; white-space:normal; word-wrap: break-word; text-align: center;
background:rgba(0,0,0,.3); 0background: gray;
}
ul>li:after{
content: ""; display:block; position: absolute; z-index: -1;
border:solid gray 0;
width:auto; height:50%; margin-bottom: -50%;
margin: auto;
}
ul>li:nth-child(even){
float: left; clear: left;
}
ul>li:nth-child(even):after{
left: 0; right:50%;
margin-top:0;
border-width: .2em ; border-left-width: 0;
border-radius:0 1em 1em 0;
}
ul>li:nth-child(odd){
float: right; clear: right;
}
ul>li:nth-child(odd):after{
right: 0; left:50%; /*negative for overwidth ccenter*/
border-width: .2em; border-right-width: 0;
border-radius:1em 0 0 1em;
}
/*
css half select skill
by Defims
1 * #
2 * #
3 @
4 # *
5 # *
1&5 set
2&4 set
3&3 set 3 cover 3
4&2 set 4 cover 2 2 cover 4
5&1 set 5 cover 1 1 cover 5
because the css cover feather it seems like start from the half (3 for odd)
and no matter how many children there is (below max), it works fine
*/
0ul>li:nth-child(10):after{ margin-top: -50%; border-width: 0 .2em .2em 0; border-top-right-radius: 0; border-top-left-radius: 1em; border-color:blue;}
/* */
ul>li:nth-child(odd):nth-last-child(2):after,
ul>li:nth-child(odd):nth-last-child(1):after { margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 0em 0 0 0; z-index:1;}
ul>li:nth-child(odd):nth-child(1):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 0em; z-index:1;}
ul>li:nth-child(even):nth-last-child(1):after,
ul>li:nth-child(even):nth-last-child(2):after { margin-top: 0; border-width: .2em .2em 0 0; border-radius: 0 0em 0 0; z-index:1;}
ul>li:nth-child(even):nth-child(2):after { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 0em 0; z-index:1;}
ul>li:nth-child(odd):nth-last-child(4):after,
ul>li:nth-child(odd):nth-last-child(3):after { margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 1em 0 0 0; z-index:2;}
ul>li:nth-child(odd):nth-child(3):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 1em; z-index:2;}
ul>li:nth-child(even):nth-last-child(3):after,
ul>li:nth-child(even):nth-last-child(4):after { margin-top: 0; border-width: .2em .2em 0 0; border-radius: 0 1em 0 0; z-index:2;}
ul>li:nth-child(even):nth-child(4):after { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 1em 0; z-index:2;}
ul>li:nth-child(odd):nth-last-child(6):after,
ul>li:nth-child(odd):nth-last-child(5):after { margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 2em 0 0 0; z-index:3;}
ul>li:nth-child(odd):nth-child(5):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 2em; z-index:3;}
ul>li:nth-child(even):nth-last-child(5):after,
ul>li:nth-child(even):nth-last-child(6):after { margin-top: 0; border-width: .2em .2em 0 0; border-radius: 0 2em 0 0; z-index:3;}
ul>li:nth-child(even):nth-child(6):after { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 2em 0; z-index:3;}
ul>li:nth-child(odd):nth-last-child(8):after,
ul>li:nth-child(odd):nth-last-child(7):after { margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 3em 0 0 0; z-index:4;}
ul>li:nth-child(odd):nth-child(7):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 3em; z-index:4;}
ul>li:nth-child(even):nth-last-child(7):after,
ul>li:nth-child(even):nth-last-child(8):after { margin-top: 0; border-width: .2em .2em 0 0; border-radius: 0 3em 0 0; z-index:4;}
ul>li:nth-child(even):nth-child(8):after { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 3em 0; z-index:4;}
ul>li:nth-child(odd):nth-last-child(10):after,
ul>li:nth-child(odd):nth-last-child(9):after { margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 4em 0 0 0; z-index:5;}
ul>li:nth-child(odd):nth-child(9):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 4em; z-index:5;}
ul>li:nth-child(even):nth-last-child(9):after,
ul>li:nth-child(even):nth-last-child(10):after{ margin-top: 0; border-width: .2em .2em 0 0; border-radius: 0 4em 0 0; z-index:5;}
ul>li:nth-child(even):nth-child(10):after { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 4em 0; z-index:5;}
ul>li:nth-child(odd):nth-last-child(12):after,
ul>li:nth-child(odd):nth-last-child(11):after { margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 5em 0 0 0; z-index:6;}
ul>li:nth-child(odd):nth-child(11):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 5em; z-index:6;}
ul>li:nth-child(even):nth-last-child(11):after,
ul>li:nth-child(even):nth-last-child(12):after{ margin-top: 0; border-width: .2em .2em 0 0; border-radius: 0 5em 0 0; z-index:6;}
ul>li:nth-child(even):nth-child(12):after { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 5em 0; z-index:6;}
ul>li:nth-child(odd):nth-last-child(14):after,
ul>li:nth-child(odd):nth-last-child(13):after { margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 6em 0 0 0; z-index:7;}
ul>li:nth-child(odd):nth-child(13):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 6em; z-index:7;}
ul>li:nth-child(even):nth-last-child(13):after,
ul>li:nth-child(even):nth-last-child(14):after{ margin-top: 0; border-width: .2em .2em 0 0; border-radius: 0 6em 0 0; z-index:7;}
ul>li:nth-child(even):nth-child(14):after { margin-top: -50%; border-width: 0 .2em .2em 0; border-radius: 0 0 6em 0; z-index:7;}
ul>li:nth-child(odd):nth-last-child(16):after,
ul>li:nth-child(odd):nth-last-child(15):after { margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 7em 0 0 0; z-index:8;}
ul>li:nth-child(odd):nth-child(15):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 7em; z-index:8;}
ul>li:nth-child(even):nth-last-child(15):after,
ul>li:nth-child(even):nth-last-child(16):after{ margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 0 7em 0 0; z-index:8;}
ul>li:nth-child(even):nth-child(16):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 7em 0; z-index:8;}
ul>li:nth-child(odd):nth-last-child(18):after,
ul>li:nth-child(odd):nth-last-child(17):after { margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 8em 0 0 0; z-index:9;}
ul>li:nth-child(odd):nth-child(17):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 0 8em; z-index:9;}
ul>li:nth-child(even):nth-last-child(17):after,
ul>li:nth-child(even):nth-last-child(18):after{ margin-top: 0; border-width: .2em 0 0 .2em; border-radius: 0 8em 0 0; z-index:9;}
ul>li:nth-child(even):nth-child(18):after { margin-top: -50%; border-width: 0 0 .2em .2em; border-radius: 0 0 8em 0; z-index:9;}
/*fixed*/
ul>li:nth-child(1):after,
ul>li:nth-child(2):after,
ul>li:nth-last-child(1):after,
ul>li:nth-last-child(2):after{
z-index: 9999 !important;
}
ul>li:nth-child(1):before,
ul>li:nth-child(2):before,
ul>li:nth-last-child(1):before,
ul>li:nth-last-child(2):before{
content: ""; display: block; position: absolute; z-index: 9998;
border-left:solid white .2em; width: 0; height: 50%;
}
ul>li:nth-child(1):before{ left:50%; top:0; }
ul>li:nth-child(2):before{ right:50%; top:0; }
ul>li:nth-last-child(1):before{ left:50%; bottom:0; }
ul>li:nth-last-child(2):before{ right:50%; bottom:0; }
/*decoration*/
.topic{ background: white; border: none; font-family: "Verdana"; color:white; text-shadow:0 0 .2em hsla(0,0%,0%,.5);}
.topic:before{
border-radius: .5em;
box-shadow:inset 0 0 .2em hsla(0,0%,50%,.9),0 0 .4em 0em hsla(0,0%,50%,.9);
border: solid rgba(0,0,0,.3) 1px;
background: hsl(0,0%,30%);
}
ul{ background: white; }
ul>li{
background: transparent; color: black;
}
ul>li:after{border-color:hsl(0, 0%, 71%) !important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment