Membuat Dropdown Menu pada Blogger

 To restructure an HTML list in JavaScript by making certain li elements a child of another li based on a specific character, you can iterate through the list items and use DOM manipulation methods like appendChild(). 

JavaScript Code Example

This example assumes the li elements to be nested contain a specific character (e.g., '-') at the beginning of their text content, and should be nested under the preceding li that does not have the character. 

javascript

function nestListItems(ulSelector, markerChar) {
    const ul = document.querySelector(ulSelector);
    if (!ul) return;

    // Select all direct child li elements of the ul
    const items = Array.from(ul.children);
    let parentItem = null;

    items.forEach(item => {
        // Check if the current li contains the specific character
        if (item.textContent.trim().startsWith(markerChar)) {
            // If a parent li has been established, move the current item into it
            if (parentItem) {
                // Remove the item from its current position in the DOM
                ul.removeChild(item); 
                
                // Create a new nested ul if one doesn't exist in the parent
                let nestedUl = parentItem.querySelector('ul');
                if (!nestedUl) {
                    nestedUl = document.createElement('ul');
                    parentItem.appendChild(nestedUl);
                }
                
                // Append the current item (which is now a new node) to the nested ul
                nestedUl.appendChild(item);

                                Array.from(nestedUl.children).forEach(itemtext => {

      		    itemtext.querySelector('a').innerHTML=itemtext.textContent.substring(2);
      				
      		 });
            }
        } else {
            // If it doesn't have the marker, it becomes a potential new parent
            parentItem = item;
        }
    });
}

// Usage: Call the function for your specific UL and marker
nestListItems('#myList', '-');

HTML Structure (Before and After)

Before

html

<ul id="myList">
    <li>Item 1</li>
    <li>- SubItem 1.1</li>
    <li>- SubItem 1.2</li>
    <li>Item 2</li>
    <li>- SubItem 2.1</li>
    <li>Item 3</li>
</ul>

After running the JavaScript

html

<ul id="myList">
    <li>Item 1
        <ul>
            <li>- SubItem 1.1</li>
            <li>- SubItem 1.2</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>- SubItem 2.1</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>

CSS

#Menu {
background: warna1;
width: 880px;
height: 35px;
font-size: 12px;
color: warna2;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#box {
width: 875px;
float: left;
margin: 0;
padding: 0;
}
#PageList1 {
margin: 0;
padding: 0;
}
#PageList1 ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#PageList1 li {
list-style: none;
margin: 0;
padding: 0;
}
#PageList1 li a, #PageList1 li a:link, #PageList1 li a:visited {
color: warna2;
display: block;
font-size: 16px;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#PageList1 li a:hover, #PageList1 li a:active {
background: warna2;
color: warna1;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#PageList1 li li a, #PageList1 li li a:link, #PageList1 li li a:visited {
background: warna1;
width: 150px;
color: warna2;
font-size: 14px;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#PageList1 li li a:hover, #PageList1 li li a:active {
background: warna2;
color: warna1;
padding: 7px 10px;
}
#PageList1 li {
float: left;
padding: 0;
}
#PageList1 li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#PageList1 li ul a {
width: 140px;
}
#PageList1 li ul ul {
margin: -32px 0 0 171px;
}
#PageList1 li:hover ul ul, #PageList1 li:hover ul ul ul, #PageList1 li.sfhover ul ul, #PageList1 li.sfhover ul ul ul {
left: -999em;
}
#PageList1 li:hover ul, #PageList1 li li:hover ul, #PageList1 li li li:hover ul, #PageList1 li.sfhover ul, #PageList1 li li.sfhover ul, #PageList1 li li li.sfhover ul {
left: auto;
}
#PageList1 li:hover, #PageList1 li.sfhover {
position: static;
}

Key DOM Methods Used

• document.querySelector(): Selects the main ul element.
• ul.children: Gets a live collection of the immediate children, converted to an array using Array.from() to allow for easier iteration while modifying the DOM.
• item.textContent.trim().startsWith(): Checks if the li's text content begins with the specific character.
• ul.removeChild(item): Temporarily removes the child li from the original list before re-appending it.
• document.createElement('ul'): Creates a new ul element dynamically when a parent needs a nested list.
• parentItem.appendChild(nestedUl) / nestedUl.appendChild(item): Appends the created ul to the parent li and the marked li to the new ul, respectively, to establish the nested structure.