JQuery tree Menu

In this article, we will create a jQuery tree menu with the help of jQuery. In the beginning of this article, we will learn the basics of jQuery and the tree menu. After that, we will learn the tree menu with the help of various examples.

What is jQuery?

JQuery is a fast, lightweight, small, and feature-rich JavaScript library. For adding jQuery in the HTML page we can use the <script> tag.

  <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js”> </script>  

In this, the src attribute is where we can add the source of jQuery.

You can also download the jQuery and add the source of jQuery in the src attribute of the <script> tag.

What is the JQuery tree Menu?

A jQuery tree menu represents a hierarchical view of the menu, where each menu item can have several sub-menu items.

Let’s take various examples of the jQuery tree menu.

Example 1:

  <! DOCTYPE html>  <html>  <head>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>  <meta charset=”UTF-8″>  <title>  jQuery tree menu </title>  <style>  body {    background: #e39900;    overflow: hidden;    overflow-y: auto;    color: black;    font-size: 20px;    font-weight: 2px solid;    text-align: center;  }  p {    position: relative;    padding: 0;    margin: 20;    font-family: “Raleway”, sans-serif;    font-weight: 100;    font-size: 20px;    color: white;    -webkit-transition: all 0.4s ease 0s;    -o-transition: all 0.4s ease 0s;    transition: all 0.4s ease 0s;  }  ul {    list-style-type: none;  text-transform: uppercase;    font-weight: 500;  }  #myUL {    list-style-type: none;  }  #myUL {    margin: 0;    padding: 0;  }  .box {    cursor: pointer;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;  }  h2 {    position: relative;    padding: 0;    margin: 10;    font-family: “Raleway”, sans-serif;    font-weight: 300;    font-size: 40px;    color: #080808;    -webkit-transition: all 0.4s ease 0s;    -o-transition: all 0.4s ease 0s;    transition: all 0.4s ease 0s;  }  .box::before {    content: “2610”;    color: black;    display: inline-block;    margin-right: 6px;  }  .check-box::before {    content: “2611”;     color: dodgerblue;  }  .nested {    display: none;  }  .active {    display: block;  }  </style>  </head>  <body>  <h2> Example </h2>  <p> A tree view represents a hierarchical view of information, where each item can have a number of subitems. </p>  <p> Click on the box(es) to open or close the tree branches. </p>  <ul id=”myUL”>    <li> <span class=”box”> Beverages </span>      <ul class=”nested”>        <li> Water </li>        <li> Coffee </li>        <li> <span class=”box”> Tea </span>          <ul class=”nested”>            <li> Black Tea </li>            <li> White Tea </li>            <li> <span class=”box”> Green Tea </span>              <ul class=”nested”>                <li> Sencha </li>                <li> Gyokuro </li>                <li> Matcha </li>                <li> Pi Lo Chun </li>              </ul>            </li>          </ul>        </li>        </ul>    </li>  </ul>  <script>  var toggler = document.getElementsByClassName(“box”);  var i;  for (i = 0; i < toggler.length; i++) {    toggler[i].addEventListener(“click”, function() {      this.parentElement.querySelector(“.nested”).classList.toggle(“active”);      this.classList.toggle(“check-box”);    });  }  </script>  </body>  </html>  

Explanation:

In the above example, we have created a tree menu with the help of jQuery. When the user clicks on the arrow(s) then the dropdown tree menu is displayed.

Output:

Following is the output of this example:

JQuery tree Menu

Example 2:

  <! DOCTYPE html>  <html>  <head>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>  <meta charset=”UTF-8″>  <title>  jQuery tree menu </title>  <style>  @import url(‘https://fonts.googleapis.com/css?family=Lobster&display=swap’) repeat scroll 0 0 rgba(0, 0, 0 , 0);  body {    background: #fff;  }  .wrapper {    animation: scroll 70s linear infinite;    color: white;  }  @keyframes scroll {     100%{      background-position: 0px -3000px;    }  }  @media (prefers-reduced-motion) {    .wrapper {      animation: scroll 200s linear infinite;    }  }  @media (min-width: 670px) {    .title {      font-size: 5rem;    }  }  #Menu-list {      margin: 4em 0 0 2em;      width: 20em;      list-style-type: none;      color: white;  }  #Menu-list > li {      padding-bottom: 3px;      color: white;  }  #Menu-list  li > a {      text-decoration: none;      color: white;  }  #Menu-list  li > a:after {      content: ‘+’;      padding-right: 4px;      font-weight: bold;      color: white;  }  #Menu-list  li > a.active:after {      content: ‘-‘;      padding-right: 4px;      font-weight: bold;  }  #Menu-list li ul {      margin: 0.5em 0 0.5em 2em;      display: none;      list-style-type: none;  }  h2 {    position: relative;    padding: 0;    margin: 10;    font-family: “Raleway”, sans-serif;    font-weight: 300;    font-size: 40px;    color: white;    -webkit-transition: all 0.4s ease 0s;    -o-transition: all 0.4s ease 0s;    transition: all 0.4s ease 0s;  }  p {    padding: 0;    margin: 20;    font-family: “Raleway”, sans-serif;    font-weight: 100;    font-size: 20px;    color: white;    -webkit-transition: all 0.4s ease 0s;    -o-transition: all 0.4s ease 0s;    transition: all 0.4s ease 0s;  }  </style>  </head>  <body class=”wrapper”>  <h2> Example: <p> jQuery tree menu </p> </h2>  <ul id=”Menu-list”>      <li>          <a href=”#” class=”tree-parent-anchor”> Menu 1 </a>          <ul>                <li> Menu 1.1 </li>                <li>                    <a href=”#” class=”tree-parent-anchor”> Menu 1.2 </a>                    <ul>                        <li> Menu 1.2.1 </li>                        <li> Menu 1.2.2 </li>                    </ul>                </li>                <li> Menu 1.3 </li>            </ul>      </li>      <li>          <a href=”#” class=”tree-parent-anchor”> Menu 2 </a>            <ul>                <li> Menu 2.1 </li>                <li> Menu 2.2 </li>                <li> Menu 2.3 </li>                <li> Menu 2.4 </li>            </ul>      </li>      <li> Menu 3 </li>  </ul>  <ul id=”Menu-list”>      <li>          <a href=”#” class=”tree-parent-anchor”> Menu 1 </a>          <ul>                <li> Menu 1.1 </li>                <li>                    <a href=”#” class=”tree-parent-anchor”> Menu 1.2 </a>                    <ul>                        <li> Menu 1.2.1 </li>                        <li> Menu 1.2.2 </li>                    </ul>                </li>                <li> Menu 1.3 </li>            </ul>      </li>      <li>          <a href=”#” class=”tree-parent-anchor”> Menu 2 </a>            <ul>                <li> Menu 2.1 </li>                <li> Menu 2.2 </li>                <li> Menu 2.3 </li>                <li> Menu 2.4 </li>            </ul>      </li>      <li> Menu 3 </li>  </ul>  <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js”> </script>  <script>  var treeList = {      init: function() {          $(‘.tree-parent-anchor’, ‘#Menu-list’).each(function() {              var $a = $(this);              var $li = $a.parent();              if ($a.next().is(‘ul’)) {                  var $ul = $a.next();                  $a.click(function(e) {                      e.preventDefault();                      treeList.collapse($ul);                      $a.toggleClass(‘active’);                  });              }          });      },      collapse: function(element) {          element.slideToggle(600);      }  };  treeList.init();  </script>  </body>  </html>  

Explanation:

In the above example, we have created a tree menu with the help of jQuery. When the user clicks on the menu, then the dropdown tree menu is displayed.

Output:

Following is the output of this example:

JQuery tree Menu

Example 3:

  <! DOCTYPE html>  <html>  <head>  <title>           JQuery tree menu        </title>  <meta name=”viewport” content=”width=device-width, initial-scale=1″>  <link href=”https://fonts.googleapis.com/css?family=Courgette|Open+Sans&display=swap” rel=”stylesheet”>   <style>  ul {    list-style-type: none;  }  #myUL {    list-style-type: none;  }  #myUL {    margin: 0;    padding: 0;  }  .caret {    cursor: pointer;    -webkit-user-select: none;     -moz-user-select: none;    -ms-user-select: none;    user-select: none;  }  .caret::before {    content: “25B6”;    color: black;    display: inline-block;    margin-right: 6px;  }  body {  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);  background-size: 400% 400%;  animation: gradient 15s ease infinite;  }  @keyframes gradient {  0% {  background-position: 0% 50%;  }  50% {  background-position: 100% 50%;  }  100% {  background-position: 0% 50%;  }  }  .caret-down::before {    -ms-transform: rotate(90deg);     -webkit-transform: rotate(90deg);    transform: rotate(90deg);     color: #fff;  }  .nested {    display: none;  }  .active {    display: block;  }  h2 {    position: relative;    padding: 0;    margin: 10;    font-family: “Raleway”, sans-serif;    font-weight: 300;    font-size: 40px;    color: #080808;     text-align: center;    -webkit-transition: all 0.4s ease 0s;    -o-transition: all 0.4s ease 0s;    transition: all 0.4s ease 0s;  }  p {    position: relative;    padding: 0;    margin: 20;    font-family: “Raleway”, sans-serif;    font-weight: 100;    font-size: 20px;    color: #fff;    -webkit-transition: all 0.4s ease 0s;    -o-transition: all 0.4s ease 0s;    transition: all 0.4s ease 0s;    transform:translateY (50%);  }  </style>  </head>  <body>  <h2> Example </h2>  <p> A tree view represents a hierarchical view of information, where each item can have a number of sub items. </p>  <p> Click on the arrow(s) to open or close the tree branches. </p>  <ul id=”myUL”>    <li> <span class=”caret”> Beverages </span>      <ul class=”nested”>        <li> Water </li>        <li> Coffee </li>        <li> <span class=”caret”> Tea </span>          <ul class=”nested”>            <li> Black Tea </li>            <li> White Tea </li>            <li> <span class=”caret”> Green Tea </span>              <ul class=”nested”>                <li> Sencha </li>                <li> Gyokuro </li>                <li> Matcha </li>                <li> Pi Lo Chun </li>              </ul>            </li>          </ul>        </li>        </ul>    </li>  </ul>  <script>  var toggler = document.getElementsByClassName(“caret”);  var i;  for (i = 0; i < toggler.length; i++) {    toggler[i].addEventListener(“click”, function() {      this.parentElement.querySelector(“.nested”).classList.toggle(“active”);      this.classList.toggle(“caret-down”);    });  }  </script>  </body>  </html>  

Explanation:

In the above example, we have created a tree menu with the help of jQuery. When the user clicks on the menu, then the dropdown tree menu is displayed.

Output:

Following is the output of this example:

JQuery tree Menu

Next TopicJQuery left side menu

JQuery tree Menu

JQuery tree Menu

What is jQuery?

What is the JQuery tree Menu?

Example 2:

Example 3:

Bootstrap 5 Typography

Software framework vs library

You may also like