Tips and Tricks

Ghost Site Injection-Only Drop Down Menu

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

Jen Wallace

Nov 9, 2022 • 3 min read

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 >>

^^ Above is the Desktop view – The mobile phone view is over there on the right side -->>>

Here goes the HOW-TO...

<style>

li[class*="nav-"][class*="--hasHoverDown"] {
	position: relative;
}
li[class*="nav-"][class*="--hasHoverDown"] a:after {
	content: "▼";
	padding-left: 5px;
	font-size: 12px;
	color: inherit;
}
li[class*="nav-"][class*="--hasHoverDown"] .isHoverDown a:after {
	display:none;
}
li[class*="nav-"][class*="--hasHoverDown"]:focus-within > li[class*="nav-"]:after,
li[class*="nav-"][class*="--hasHoverDown"]:hover > li[class*="nav-"]:after {
	background-color: transparent;
}
li[class*="nav-"][class*="--hasHoverDown"]:focus-within .isHoverDown,
li[class*="nav-"][class*="--hasHoverDown"]:hover .isHoverDown {
	opacity: 1;
	visibility: visible;
}
.isHoverDown {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	margin: 0;
	max-width: unset;
	list-style: none;
	/* The padding inside the Hover down (the space surrounding the links) */
	padding: 10px;
	/* The rounded corners of the Hover down */
	border-radius: 6px;
	/* The background color of the Hover down */
	background: #000;
    /* The color of the text in the Hover down */
    color: #fff;
}
.isHoverDown a {
    /* The color of the link text in the Hover down */
    color: #fff;
}
.isHoverDown li[class*="nav-"] {
	margin-right: 0 !important;
}
.isHoverDown li[class*="nav-"]:not(:last-child) {
	margin-bottom: 0;
    /* Dividers between the Hover down 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.hasHoverDown {
        margin: 0;
    	padding: 0;
    	display: flex;
    	flex-direction: column;
    	align-items: flex-start;
	}
    .gh-head-menu ul.isHoverDown {
    	list-style: none;
    	text-align: left;
    	margin: 0;
    	padding: 0 0 0 10px;
	}
    .gh-head-menu ul.isHoverDown li {
    	margin: 0;
    	padding: 0;
    	text-align: left;
	}
    .gh-head-menu ul.isHoverDown li a {
    	font-size: 2rem;
    	line-height: 1.5;
	}
}
    */

</style>

<script>
    
(function () {
    const mediaQuery = window.matchMedia('(max-width: 767px)');
    
    // 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 hoverDown_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 hoverdown = document.createElement('ul');
            hoverdown.className = 'isHoverDown';
            menuTree[index].forEach(child => {
                hoverDown_item_text = child.childNodes[0].innerText;
                child.childNodes[0].innerText = hoverDown_item_text.replace('- ', '');
                hoverdown.appendChild(child);
            });
        item.className += '--hasHoverDown';
        item.appendChild(hoverdown);
        }
        return item;
        });
    }

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

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

})();
</script>

Inspired by the work of ...

Ghost Site Injection-Only Drop Down Menu

Jen Wallace

Here goes the HOW-TO...

Paste this into your Site Header Code Injection...

Paste this into your Site Footer Code Injection...