Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2021-07-24 19:36:33

code365
Member
From: California
Registered: 2009-08-16
Posts: 110
Website

Menu with a dropdown

Hi, I am trying to build menu with a dropdown using sub-categories. I want to be able to use the parent and the child categories. Hopefully someone can help me figure out how to build a dropdown menu or point me to the HOW TO information.

  • Main menu (parent)
    • Sub menu item (child)
    • Sub menu item (child)

Thank you,

Offline

#2 2021-07-24 20:00:45

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: Menu with a dropdown

Hi, that’s frustratingly easy:

<txp:category_list children parent="main_menu" wraptag="ul" break="li" />

Customizing is a bit more convoluted, but feasible.

Offline

#3 2021-07-25 04:13:03

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Menu with a dropdown

code365 wrote #331125:

Hi, I am trying to build menu with a dropdown using sub-categories. I want to be able to use the parent and the child categories. Hopefully someone can help me figure out how to build a dropdown menu or point me to the HOW TO information.

  • Main menu (parent)
    • Sub menu item (child)
    • Sub menu item (child)

Thank you,

Hi,
Check this tip.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#4 2021-07-25 14:35:09

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Menu with a dropdown

or you could use this code.

<ul id="menu">
	<li><a href="<txp:site_url />" rel="home"><txp:site_name /></a></li>
	<txp:category_list children="0" break="li" wraptag="">
		<txp:category title="1" link="1" />
			<txp:category_list parent='<txp:category />' exclude='<txp:category />' break="li" wraptag="ul">
				<txp:category title="1" link="1" />
			</txp:category_list>
	</txp:category_list>
</ul>

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#5 2021-07-26 04:19:32

code365
Member
From: California
Registered: 2009-08-16
Posts: 110
Website

Re: Menu with a dropdown

Thank you Colak, I was able to pull the parent and child. Now I am running into an issue with the url path. The path is not liking a section/category then article. The above link displays category then article.

Offline

#6 2021-07-26 04:30:16

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Menu with a dropdown

code365 wrote #331134:

Thank you Colak, I was able to pull the parent and child. Now I am running into an issue with the url path. The path is not liking a section/category then article. The above link displays category then article.

Would this help?

<ul id="menu">
	<li><a href="<txp:site_url />" rel="home"><txp:site_name /></a></li>
	<txp:category_list children="0" section='<txp:section />' break="li" wraptag="">
		<txp:category title="1" link="1" />
			<txp:category_list parent='<txp:category />' exclude='<txp:category />' section='<txp:section />' break="li" wraptag="ul">
				<txp:category title="1" link="1" />
			</txp:category_list>
	</txp:category_list>
</ul>

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#7 2021-07-26 05:34:29

code365
Member
From: California
Registered: 2009-08-16
Posts: 110
Website

Re: Menu with a dropdown

Did not work. when I hover the sub menu, I am getting localhost/category/submenu which is incorrect.

When I type the below in the url
entry-mudroom(category)/halltreess(submenu)/article this works.

Should I use section list?

Last edited by code365 (2021-07-26 06:01:18)

Offline

#8 2021-07-26 05:53:20

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Menu with a dropdown

Does replacing <txp:category title="1" link="1" /> to <a href="/<txp:section />/<txp:category />/"><txp:category title="1" /></a> make any difference?


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#9 2021-07-26 06:03:40

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Menu with a dropdown

Sorry, maybe I misunderstood. Are looking to get urls like:

<txp:site_url /><parent_category_a>/
<txp:site_url /><parent_category_b>/
<txp:site_url /><parent_category_b>/<child_category_c>/
<txp:site_url /><parent_category_b>/<child_category_d>/
<txp:site_url /><parent_category_e>/
etc.

?


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#10 2021-07-26 06:15:07

code365
Member
From: California
Registered: 2009-08-16
Posts: 110
Website

Re: Menu with a dropdown

Yes, I am trying to get the below url. When I click on the parent for the dropdown menu, I get <txp:site_url/>category/<child_category> but nothing happens.

<txp:site_url /><parent_category_b>/<child_category_c>/

Offline

#11 2021-07-26 08:09:20

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Menu with a dropdown

Could you tell us what Article URL pattern you are using?


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#12 2021-07-26 23:21:52

code365
Member
From: California
Registered: 2009-08-16
Posts: 110
Website

Re: Menu with a dropdown

Article url is
<txp:site_url/>/entry-mudroom(category)/halltreess(sub menu (child))/

<ul class="nav navbar-nav mx-auto">
            <txp:category_list 
                children="0" 
                break=""
                wraptag="" 
                class="nav-item dropdown">
            <li class="nav-item dropdown">
                <a class="nav-link" 
                    href="#" 
                    id="navbarScrollingDropdown" 
                    role="button" 
                    data-bs-toggle="dropdown" 
                    aria-expanded="false">
                    <txp:category title="1" link="0" />
                </a>
                <txp:category_list 
                    parent='<txp:category />' 
                    exclude='<txp:category />' 
                    section='<txp:section />'
                    break="" 
                    wraptag="ul" 
                    class="dropdown-menu text-left shadow-lg">
                    <a class="dropdown-item" href="<txp:section/>/<txp:category />/">
                        <txp:category title="1" />
                    </a>
                </txp:category_list>
            </li>
            </txp:category_list>
        </ul>

Last edited by code365 (2021-07-26 23:22:35)

Offline

Board footer

Powered by FluxBB