how to assign active class to custom menu?

raminrahimi · 2013-11-11 09:58:24

i’ve four menus to my main menu : HOME, ABOUT, SERVICES, PRODUCTS

created by html codes and linked them:

HOME => linked to home page ( <txp:site_url /> )
ABOUT => linked to a specific article (index.php?id=22)
SERVICES => linked to a specif section (index.php?s=services)
PRODUCTS=> linked to a specif section (index.php?s=products)

I created a class for active menus like if I’m in home page want to assign that .active class style to the home menu, or if i clicked the about page, the class should assign to about page….

what to do for assigning current active menus automatically ???

Bloke · 2013-11-11 10:48:08

raminrahimi wrote:

what to do for assigning current active menus automatically ???

Since you’re creating the menu by hand, then assuming that your ‘about’ article is in an about’ section, you just need to add <txp:if_section name="your-section-name">class="active"</txp:if_section> to each of your menu items, and change the name attribute to match. Textpattern’s home page can be detected with either name="" or name="default".

For info, if you use the section_list tag to generate your section navigation, you can just use the active_class attribute (when using the tag without a container). If you do use the tag as a container, then Example 3 in the wiki tells you about using the <txp:section /> tag to detect which section your visitor is in and apply the class.

Hope that helps.

etc · 2013-11-11 10:59:16

Not bullet-proof, but however:

<txp:etc_query data="your_custom_menu"
	replace='//a[contains("<txp:page_url />", href)]@@class=active' />

raminrahimi · 2013-11-14 20:52:57

yes !
i solved the problem
thank you :-)

raminrahimi · 2014-08-20 09:19:10

hi Sigma (etc)

i’ve a links category => menu
i put there four menus:
1. home => <txp:site_url />
2. about => <txp:site_url />about
3. categories => <txp:site_url />category/news
3. arabic => <txp:site_url />section/arabic

i tried these codes, but it will apply for all, not for the current. no problem if assign for li tag or a href tags

<txp:etc_query data='<txp:linklist  break="li" category="menu" sort="date asc" />'
	replace='//a[contains("<txp:page_url />", href)]@@class=active' />

also tried this:

<txp:etc_query data='<txp:linklist  break="li" category="menu" sort="date asc" />'
	replace='//li@@class=normal;//li[contains(@a, "<txp:page_url />")]@@class=active' />

i’m using one section for all, could u plz help me to assign for current selected menu the class of active and for others class of normal

thank you

Last edited by raminrahimi (2014-08-20 16:23:12)

etc · 2014-08-20 12:25:11

Hi Ramin,

yes, contains is not very robust in href matching. To find a better way, we need to know: a) what exactly are your hrefs; b) how do you construct them.

michaelkpate · 2014-08-20 20:59:33

I came up with something that might work (although I am a little confused about your url structure):

On your page template:

    <!-- navigation -->
    <nav class="site-navigation" role="navigation" aria-label="<txp:text item="navigation" />">
        <txp:linklist form="menu_links" category="menu" wraptag="ul" break="" />
    </nav>

The contents of menu_links:

Note: The 4 variables at the top are the link ids so you will need to copy them here from Content | Links.

<txp:variable name="menu_home" value="8" />
<txp:variable name="menu_about" value="9" />
<txp:variable name="menu_news" value="10" />
<txp:variable name="menu_arabic" value="11" />

<txp:variable name="menu_class" value="normal" />

<txp:if_section name="default">
  <txp:if_variable name="menu_home" value='<txp:link_id />'>
    <txp:variable name="menu_class" value="active" />
  </txp:if_variable >
</txp:if_section>

<txp:if_section name="about">
  <txp:if_variable name="menu_about" value='<txp:link_id />'>
    <txp:variable name="menu_class" value="active" />
  </txp:if_variable >
</txp:if_section>

<txp:if_category name="news">
  <txp:if_variable name="menu_news" value='<txp:link_id />'>
    <txp:variable name="menu_class" value="active" />
  </txp:if_variable >
</txp:if_section>

<txp:if_section name="arabic">
  <txp:if_variable name="menu_arabic" value='<txp:link_id />'>
    <txp:variable name="menu_class" value="active" />
  </txp:if_variable >
</txp:if_section>

<li>
<a href="<txp:link_url />" class="<txp:variable name="menu_class" />" >
<txp:link_name />
</a>
</li>

etc · 2014-08-20 21:42:14

That’s funny, but there seem to be no easy way to get the full url in Textpattern. You can try this:

<txp:etc_query data='<txp:linklist  break="li" category="menu" sort="date asc" />'
	globals="_SERVER"
	replace='//a[@href="http://{?HTTP_HOST}<txp:page_url />"]@@class=active' />

Textpattern CMS

Textpattern CMS support forum

#1 2013-11-11 09:58:24

how to assign active class to custom menu?

#2 2013-11-11 10:48:08

Re: how to assign active class to custom menu?

#3 2013-11-11 10:59:16

Re: how to assign active class to custom menu?

#4 2013-11-14 20:52:57

Re: how to assign active class to custom menu?

#5 2014-08-20 09:19:10

Re: how to assign active class to custom menu?

#6 2014-08-20 12:25:11

Re: how to assign active class to custom menu?

#7 2014-08-20 20:59:33

Re: how to assign active class to custom menu?

#8 2014-08-20 21:42:14

Re: how to assign active class to custom menu?

Board footer