I'm trying to construct a multi-level directory menu using two variables listed below.
obj
contains the details of multi-level menu and description key for each menu.
I wanted to display this multi-level menu using the two variables and the solution should work for any level of menus.
Right now, I have static design and how to iterate the object and put dynamic menu contents? When clicking menu content, appropriate description should appear.
I need solution only with pure javascript (no jquery/angular)
Any help would be highly appreciated!
var obj = {
"firstitem": "name",
"second item": {
"description": "descriptioncontent",
"briefdescription": {
"age": "content1",
"job": "content2",
"objective": "content3"
}
}
};
var obj2 = {
"name": "Christy",
"descriptioncontent": "hi hello",
"content1": "content 1 description",
"content2": "content 2 description",
"content3": "content 3 description"
};
body {
margin-top: 2rem;
font: 100% "Open sans", "Trebuchet MS", sans-serif;
}
a {
text-decoration: none;
}
.wrapper {
position: absolute;
top: 10%;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-50 {
float: left;
width: 50%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.col-100{
float: left;
width: 100%;
margin-top: 6px;
}
/**
* Hidden fallback
*/
[hidden] {
display: none;
visibility: hidden;
}
/**
* Styling top level items
*/
.nav a,
.nav label {
display: block;
padding: .85rem;
color: #fff;
background-color: #151515;
box-shadow: inset 0 -1px #1d1d1d;
transition: all .25s ease-in;
}
.nav a:focus, .nav a:hover,
.nav label:focus,
.nav label:hover {
color: rgba(255, 255, 255, 0.5);
background: #030303;
}
.nav label {
cursor: pointer;
}
/**
* Styling first level lists items
*/
.group-list a,
.group-list label {
padding-left: 2rem;
background: #252525;
box-shadow: inset 0 -1px #373737;
}
.group-list a:focus, .group-list a:hover,
.group-list label:focus,
.group-list label:hover {
background: #131313;
}
/**
* Styling second level list items
*/
.sub-group-list a,
.sub-group-list label {
padding-left: 4rem;
background: #353535;
box-shadow: inset 0 -1px #474747;
}
.sub-group-list a:focus, .sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
background: #232323;
}
/**
* Styling third level list items
*/
.sub-sub-group-list a,
.sub-sub-group-list label {
padding-left: 6rem;
background: #454545;
box-shadow: inset 0 -1px #575757;
}
.sub-sub-group-list a:focus, .sub-sub-group-list a:hover,
.sub-sub-group-list label:focus,
.sub-sub-group-list label:hover {
background: #333333;
}
/**
* Hide nested lists
*/
.group-list,
.sub-group-list,
.sub-sub-group-list {
height: 100%;
max-height: 0;
overflow: hidden;
transition: max-height .5s ease-in-out;
}
.nav__list input[type=checkbox]:checked + label + ul {
/* reset the height when checkbox is checked */
max-height: 1000px;
}
/**
* Rotating chevron icon
*/
label > span {
float: right;
transition: -webkit-transform .65s ease;
transition: transform .65s ease;
transition: transform .65s ease, -webkit-transform .65s ease;
}
.nav__list input[type=checkbox]:checked + label > span {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
<div class="wrapper">
<div class="row">
<div class="col-50">
<nav class="nav" role="navigation">
<ul class="nav__list">
<li>
<input id="group-1" type="checkbox" hidden />
<label for="group-1"><span class="fa fa-angle-right"></span> First level</label>
<ul class="group-list">
<li><a href="#">1st level item</a></li>
<li>
<input id="sub-group-1" type="checkbox" hidden />
<label for="sub-group-1"><span class="fa fa-angle-right"></span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-1" type="checkbox" hidden />
<label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-2" type="checkbox" hidden />
<label for="group-2"><span class="fa fa-angle-right"></span> First level</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-2" type="checkbox" hidden />
<label for="sub-group-2"><span class="fa fa-angle-right"></span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-2" type="checkbox" hidden />
<label for="sub-sub-group-2"><span class="fa fa-angle-right"></span> Third level</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-3" type="checkbox" hidden />
<label for="group-3"><span class="fa fa-angle-right"></span> First level</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-3" type="checkbox" hidden />
<label for="sub-group-3"><span class="fa fa-angle-right"></span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
<li>
<input id="sub-sub-group-3" type="checkbox" hidden />
<label for="sub-sub-group-3"><span class="fa fa-angle-right"></span> Third level</label>
<ul class="sub-sub-group-list">
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
<li><a href="#">3rd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="group-4" type="checkbox" hidden />
<label for="group-4"><span class="fa fa-angle-right"></span> First level</label>
<ul class="group-list">
<li>
<li><a href="#">1st level item</a></li>
<input id="sub-group-4" type="checkbox" hidden />
<label for="sub-group-4"><span class="fa fa-angle-right"></span> Second level</label>
<ul class="sub-group-list">
<li><a href="#">2nd level nav item</a></li>
<li><a href="#">2nd level nav item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="col-50">
</div>
</div>
</div>