Add Dropdowns to Main Menu Through the Site Admin (Copy & Paste into Site Header/Footer Injections)

On top of that, a few hours later and I also just discovered that @dan’s theme Ali Abdaal also allows for dropdown menus set up in the navigation portion of the admin, no flashes, no fades, etc.

So this is very possible.

@Stromfeldt For me the problem in search of a solution here is the part where a site admin can “(Copy & Paste into Site Header Footer Injections).”

What I would like to see is a copy-and-paste Site Header/Footer Injection that enables @ahmadajmi’s elegant dropdown insertion method within the Primary Nav settings in the Site Admin area …

… perhaps even to include multi-levels by inserting additional dashes to create lower-level children.

Could Custom Theme Settings in a theme’s package.json be utilized for assigning theme-specific CSS/menu selectors to provide out-of-the-box compatibility with any theme?

I would chip in to sponsor that. Anyone else?

(Of course MEGA MENU drop-in support would be the bomb :nerd_face:)

1 Like

The Ali Abdaal theme nicely goes to a high level sub-menu overview page on clicking the top menu item. Is this built into the theme out of the box now, as it were, or does it have to be separately created? This is the ‘intermediate’ page I mean. Articles · Ali Abdaal Demo (superthemes.co)

I use another Aspire theme, Krabi, which now also has the nicely simple ‘hyphen’ drop down implementation, but there is no intermediate navigation page as there is in the example above. You need to decide how to link the top level item, and the sub-menu items then go their separate ways. Unless you separately build some intermediate navigation.

Apologies if I have this wrong. But am curious about the Ali Abdal intermediate page.

Yes, that page has to be created separately, and if I gather correctly you can read about that here (I purchased the theme yesterday, so I’m going through it all right now).

Alternatively, if you wanted you could change the cursor for that parent menu item to cursor: default if you didn’t want it to appear to be clickable, perhaps something Ahmad could add to the theme (or explain in the theme’s documentation for a DYI code injection option).

Looks like what’s going on there is that the script to redraw the screen is inline and immediately after the HTML for the navbar produced by {{navigation}} (or whatever the theme is using as the equivalent), rather than at the end of the page. It’s the same approach as above (recognize which menu items are subitems and change the layout - although it uses a “-” instead of trailing [labels]), but the big difference is that the script runs much earlier. This could be implemented in any theme, but it does require editing the theme, where the ghost_footer code injection does not require theme editing (and so is accessible to folks on the GhostPro starter plan or those who might not be comfortable editing a theme).

1 Like

Yes, Please use the latest version of the Script… We updated our repo.

There had updated script. Now our repo also updated and we changed some minor things too…

Live Example : https://learn.gthememarket.com/

2 Likes

If you need just a very basic drop down that works in Casper there’s also this one…

I can’t get it to work with Casper theme, could you help me?
I added all on Site footer of Ghost:

<script src='https://xxxxxxxx.com/assets/css/ghost-dropdwon.css'></script>
<script src='https://xxxxxxxx.com/assets/js/ghost-dropdown.js'></script>

     $(document).ready(function () {
        ghost_dropdown({
            targetElement: "nav.ul li",
            hasChildrenClasses: "menu-item-has-children",
            hasChildrenIcon:  "<svg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.74805 1.52002L9.54883 9.00002L17.3496 1.52002' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>",
            hasChildDetectText: "[has_child]",
            submenuUlClasses: "ghost-submenu",
            subitemDetectText: "[subitem]",
            subitemLiClasses: "subitem",
            multi_level: false,
            mega_menu: false
        });
    });

And the result is…

@Joan you have an error in your CSS include:

That one needs style tags…

<style> ..etc... </style>

The same @denvergeeks … Seems Ghost not detect the .JS script or it’s wrong, beacuse the menu shows the elements with [has_child] and [subitem].

The instructions of @themeix is wrong too i think…

Any idea on how to make this work with Headline?

Dropdown primary nav menu in Headline

Great, but it didn’t work on my phone! but it worked perfectly on desktop!

@saiunes What did not work?

Also, did you try this one…

1 Like

Hi, I am trying to use the script in an Edition theme but the image looks like below. Which part of the javascript takes out the [has_child] and [subitem] bits out of the menu items?
image

is jQuery getting loaded, @Tada_Hozumi ? What shows up in the console logs? (F12 to open developer tools, then click the ‘console’ tab.)

Hi, I get this
image

and my script that i copy/pasted looks like this:

I’d guess that jquery isn’t loaded by this theme. Try adding a line to load it before this script.

i’m sorry to be such a neophytye … is it possible for you to share how that’s done?