Ghost Site Injection-Only Drop Down Menu

Finally! A copy-and-paste drop down menu for Ghost with NO editing of theme files...

This simple little drop-down menu is ready to drop into the Site Code Injections in the Admin area of the Casper Theme...  I posted this in the Ghost Forums too so you can get help over there if you need it >>

Here goes the HOW-TO...

Paste this into your 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>
<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>

Inspired by the work of ...

Premium Ghost Themes
Ghost themes that save time and money are simple and easily customizable. Choose a theme for your blog, newsletter, portfolio, or news website.