Hover-Down Submenus for Casper Here

Themes
22

OK @Joan I’ve got a new rendition of the script for the footer injection. I’ve also edited and commented a little more in the CSS.

For the script I just followed the example of the new overflow click-down menu in Casper. (The code you linked to at Added navbar options (#906) · TryGhost/Casper@cf30ada · GitHub)

Here’s what I’ve got now that’s working correctly. (This code might have extra cruft that can be removed. Hopefully someone better at JS can tell us.)

The CSS for the Site Header Code Injection…

<style>

li[class*="nav-"][class*="--hasDropDown"] {
	position: relative;
}
li[class*="nav-"][class*="--hasDropDown"] a:after {
	content: "▼";
	padding-left: 5px;
	font-size: 12px;
	color: inherit;
}
li[class*="nav-"][class*="--hasDropDown"] .isDropDown a:after {
	display:none;
}
li[class*="nav-"][class*="--hasDropDown"]:focus-within > li[class*="nav-"]:after,
li[class*="nav-"][class*="--hasDropDown"]:hover > li[class*="nav-"]:after {
	background-color: transparent;
}
li[class*="nav-"][class*="--hasDropDown"]:focus-within .isDropDown,
li[class*="nav-"][class*="--hasDropDown"]:hover .isDropDown {
	opacity: 1;
	visibility: visible;
}
.isDropDown {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	margin: 0;
	max-width: unset;
	list-style: none;
	/* The padding inside the drop down (the space surrounding the links) */
	padding: 10px;
	/* The rounded corners of the drop down */
	border-radius: 6px;
	/* The background color of the drop down */
	background: #000;
	/* The color of the links in the drop down */
	color: inherit;
}
.isDropDown li[class*="nav-"] {
	margin-right: 0 !important;
}
.isDropDown li[class*="nav-"]:not(:last-child) {
	margin-bottom: 0;
    /* Dividers between the dropdown items */
    border-bottom: 1px solid #ddd;
}

/* OPTIONAL: in mobile, left align all menu items and indent submenu items */
@media (max-width: 991px) {
    #gh-head .gh-head-inner {
        grid-template-columns: 1fr;
    	height: auto;
	}
	.gh-head-open #gh-head .gh-head-menu,
    #gh-head .gh-head-menu .nav {
    	align-items: flex-start;
    	display: flex;
    	flex-direction: column;
        margin: 0 auto;
	}
    .gh-head-menu .nav li {
        text-align: left;
	}
    .gh-head-menu .nav li.hasDropDown {
        margin: 0;
    	padding: 0;
    	display: flex;
    	flex-direction: column;
    	align-items: flex-start;
	}
    .gh-head-menu ul.isDropDown {
    	list-style: none;
    	text-align: left;
    	margin: 0;
    	padding: 0 0 0 10px;
	}
    .gh-head-menu ul.isDropDown li {
    	margin: 0;
    	padding: 0;
    	text-align: left;
	}
    .gh-head-menu ul.isDropDown li a {
    	font-size: 2rem;
    	line-height: 1.5;
	}
}
    
</style>

The script for the Site Footer Code Injection…

<script>
    
(function () {
    const mediaQuery = window.matchMedia('(max-width: 991px)');
    
    // IMPORTANT: For themes other than Casper, change the selector just below to select your theme's header menu selector
    const menu = document.querySelector('.gh-head-menu');
    const nav = menu.querySelector('.nav');
    if (!nav) return;

    // IMPORTANT: For themes other than Casper, change the selector just below to select your theme's header logo selector
    const logo = document.querySelector('.gh-head-logo');
    const navHTML = nav.innerHTML;

    if (mediaQuery.matches) {
        const items = nav.querySelectorAll('li');
        items.forEach(function (item, index) {
            item.style.transitionDelay = 0.03 * (index + 1) + 's';
        });
    }
    
    const makeHoverdown = function () {
        if (mediaQuery.matches) return;

        var dropDown_list = [],
        latest_navigation_item,
        // IMPORTANT: For themes other than Casper, change the selector just below to select your theme's header menu item selector 
        nav_list = document.querySelectorAll('.gh-head-menu li');
        var newMenuList = [];
        var menuTree = {};

        nav_list.forEach( (item, index) => {
            if(item.childNodes[0].innerText.startsWith('-')) {
                if(menuTree[newMenuList.length - 1]) {
            menuTree[newMenuList.length - 1].push(item);
                } else {
            menuTree[newMenuList.length - 1] = [item];
            }
        } else {
        newMenuList.push(item);
        }
        });
        
        nav_list = newMenuList.map((item, index) => {
        if(menuTree[index]) {
            let dropdown = document.createElement('ul');
            dropdown.className = 'isDropDown';
            menuTree[index].forEach(child => {
                dropDown_item_text = child.childNodes[0].innerText;
                child.childNodes[0].innerText = dropDown_item_text.replace('- ', '');
                dropdown.appendChild(child);
            });
        item.className += '--hasDropDown';
        item.appendChild(dropdown);
        }
        return item;
        });
    }

    imagesLoaded(logo, function () {
        makeHoverdown();
    });

    window.addEventListener('resize', function () {
        setTimeout(function () {
            nav.innerHTML = navHTML;
            makeHoverdown();
        }, 1);
    });

})();
</script>
1 Like