Skip to content

Instantly share code, notes, and snippets.

@rudrathegreat

rudrathegreat/index.html

Last active September 28, 2020 05:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rudrathegreat/8272af3d18ea33a7b65a8dad7309da95 to your computer and use it in GitHub Desktop.
Save rudrathegreat/8272af3d18ea33a7b65a8dad7309da95 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Tree View in Pure HTML and CSS
Raw
index.html
<head>
<title>Title</title>
</head>
<body>
<div class="topic-tree">
<ul class="main-menu">
<li>Test</li>
<li>
Test
<input type="checkbox" class="toggle">
<div class="toggle-label">
<div class="bar"></div>
</div>
<ul class="submenu">
<li>Test 2</li>
<li>
Test 2
<input type="checkbox" class="toggle">
<div class="toggle-label">
<div class="bar"></div>
</div>
<ul class="submenu-2">
<li>Test 3</li>
<li>Test 3</li>
<li>Test 3</li>
<li>Test 3</li>
</ul>
</li>
<li>Test 2</li>
</ul>
</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
</body>
Raw
style.css
* {
margin: 0;
padding: 0;
}
html {
scroll-behavior:smooth;
}
body {
font-family:Arial;
font-size:2vw;
}
ul {
list-style:none;
}
.topic-tree {
display:flex;
width:100%;
height:100vh;
align-items:center;
justify-content:center;
background:#eee;
color:#333;
}
.main-menu {
display:flex;
flex-direction:column;
gap:2em;
}
.submenu {
padding-left:2em;
display:none;
gap:0.5em;
flex-direction:column;
}
.submenu-2 {
padding-left:2em;
display:none;
gap:0.5em;
flex-direction:column;
}
.toggle {
opacity:0;
z-index:3;
position:absolute;
display:inline;
margin-left:0.5em;
width:0.75em;
height:0.75em;
}
.toggle:checked ~ ul {
display:flex;
}
.toggle:checked + .toggle-label .bar::before {
transform:rotate(0deg);
transition:transform 0.25s ease-in-out;
}
.bar::before,
.bar {
position:relative;
width:0.75em;
height:2px;
background:#000;
display:inline-block;
}
.bar::before {
content:'';
position:absolute;
transform:rotate(90deg);
transition:transform 0.25s ease-in-out;
}
.toggle-label {
position:absolute;
display:inline;
margin-top:-0.3em;
margin-left:0.5em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment