многоуровневое меню каталогов с использованием javascript-объекта

Я пытаюсь построить многоуровневое меню каталога, используя две переменные, перечисленные ниже.

obj содержит сведения о многоуровневом меню и описании для каждого меню.

Я хотел отобразить это многоуровневое меню, используя две переменные, и решение должно работать для любого уровня меню.

Прямо сейчас, у меня есть статический дизайн и как итерации объекта и размещения динамического содержимого меню? При нажатии на содержимое меню должно появиться соответствующее описание.

Мне нужно решение только с чистым javascript (без jquery / angular)

Любая помощь будет высоко оценен!

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>

javascript,html,css,

2

Ответов: 1


2

Надеюсь, это решение поможет вам.

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"
};

function loadContent(){
  console.clear();
  var ul = document.createElement('ul');
  ul = createNode(obj,ul);
  document.querySelector("nav").appendChild(ul);
}
function createNode(ob,ul){
  Object.keys(ob).forEach(function(value,index,objectPassed){
    var li = document.createElement('li');
    if(typeof ob[value] === 'string'){
      var a = document.createElement('a');
      a.href= "#";
      var aText = document.createTextNode(value);
      a.appendChild(aText); 
      li.appendChild(a);
      li.addEventListener("click", function(){
        document.querySelector("section").innerHTML = obj2[ob[value]];
      });
    }else{
      var label = document.createElement('label');
      var rand = Math.random();
      var span = document.createElement('span');
      label.htmlFor = rand;
      label.appendChild(span); 
      var spanText = document.createTextNode(value);
      span.appendChild(spanText); 
      li.appendChild(label); 
      var input = document.createElement('input');
      input.setAttribute("type", "checkbox")
      input.setAttribute("hidden", true);
      input.id = rand;
      li.appendChild(input);
      var newUl = document.createElement('ul');
      newUl = createNode(ob[value],newUl);
      newUl.className = "sub-group-list";
      li.appendChild(newUl);
    }
    ul.appendChild(li);
  })
  return ul;
}
loadContent();
body {
    margin-top: 2rem;
    font: 100% "Open sans", "Trebuchet MS", sans-serif;
  }
  
  a {
    text-decoration: none;
  }
  
  ul,li{ list-style-type:none; margin:0px}
.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%;
    display: none;
    transition: max-height .5s ease-in-out;
  }
  
  nav input[type=checkbox]:checked  + ul {
    /* reset the height when checkbox is checked */
    display:block;
  }
  
  /**
   * Rotating chevron icon
   */
  label > span {
    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);
  }
  section{
    border:1px solid #ccc; padding:10px 15px;
  }
<div class="wrapper">
    <div class="row">
        <div class="col-50">
            <nav class="nav" role="navigation">
            </nav>
        </div>
        <div class="col-50">
            <section>
            </section>
        </div>
    </div>
</div>

JavaScript, HTML, CSS,
Похожие вопросы