Buy me a coffee

Folder within Folder

I will give some simple code to create Folder within Folder.

#1. Suppose we have a Folder Sections with items: Testimonials, list carousel, 3d carousel, gallery…

We need to create a folder within Testimonials, list carousel.

Folder Within Folder 01 Min

#2. Edit Site Footer

Folder Within Folder 02 Min

Add 2 Text Blocks

Folder Within Folder 03 Min

something like this

Folder Within Folder 04 Min

#3. Use this tool to find the ID of 2 Text Blocks.

In my example, we will have:

  • Testimonials: #block-9db6127131ff6ca96f27
  • List carousel: #block-d0631acca646a3cf9960

Folder Within Folder 05 Min

#4. Find the ID of 2 Folder Testimonials, list carousel in the Navigation Menu.

We will have

  • Sections: div.header-nav-item:nth-child(6)
  • Testimoinals: div.header-nav-item:nth-child(6) div.header-nav-folder-content>div:nth-child(1)
  • List carousel: div.header-nav-item:nth-child(6) div.header-nav-folder-content>div:nth-child(2)

Folder Within Folder 06 Min

#5. Use this code to Code Injection Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// testimonials
    $('#block-9db6127131ff6ca96f27').appendTo('div.header-nav-item:nth-child(6) div.header-nav-folder-content>div:nth-child(1)');
// list carousel
    $('#block-d0631acca646a3cf9960').appendTo('div.header-nav-item:nth-child(6) div.header-nav-folder-content>div:nth-child(2)');
});
</script>
<style>
div.header-nav-item--folder .html-block {
    position: absolute;
    background-color: #3308f6;
    right: -167px;
    padding-left: 17px;
    width: 150px;
    top: 0px;
    display: none;
}
div.header-nav-item--folder a:hover + .html-block {
    display: block;
}</style>

Folder Within Folder 07 Min

#6. Result

When hovering on the Testimonials link.

Folder Within Folder 08 Min

When hover on list carousel

Folder Within Folder 09 Min