Ghost Dynamic Dropdown Menu

Ghost does not have the options to create a dropdown menu from the ghost admin dashboard. So we tried to make that feature for ghost users.

Installation

Download Latest Release

Include CSS

 <link rel="stylesheet" href="{{asset "css/ghost-dynamic-dropdown.css"}}">

Include script

<script src="{{asset "js/ghost-dynamic-dropdown.js"}}"></script>

At the bottom of the script there has option to change the value for child dropdown item selector, menu select, css class etc. Here following the options :

Options

Name	Options Value	Details
targetElement	nav.ul li	DOM selector of Menu ul
hasChildrenClasses	menu-item-has-children	add class for the parrent item. ( has CSS dependency )
hasChildrenIcon	▼ (SVG icon)	Use any SVG icon or text as dropdown icon
hasChildDetectText	[has_child] used in admin dashboard	Parrent menu item selector
submenuUlClasses	ghost-submenu	CSS class for the submenu items ul ( has CSS dependency )
subitemDetectText	[subitem] used in admin dashboard	child menu item selector
subitemLiClasses	subitem	CSS class for the submenu item
multi_level	true	Support Multi Level Dropdown
mega_menu	true	Support Mega Menu

SVG Icon Example

<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-caret-down' viewBox='0 0 16 16'><path d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/></svg>

Example Code

     $(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
        });
    });

Dynamic Menu Supported Theme ( Made by Themeix )

https://themeix.com/product/learn-premium-lms-theme-for-ghost-cms/

https://themeix.com/product/pidkast-ghost-cms-theme-for-podcast/

https://themeix.com/product/newsfeed-news-magazine-ghost-theme/

Here is the documentation link about dynamic dropdwon :

https://support.themeix.com/how-to-add-dropdown-navigation-in-newsfeed/