Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2009-12-04 16:55:06

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Automated Navigation Menu

Hi there,
I need to create a semi-automated navigation menu on my site and am confused as to the best way to create it (via native txp tags or using a plugin), I’d be very grateful for any advice. It is a pretty simple nav menu – sections are a fixed range (ie. the end user cannot add extra sections) so I just need to populate each section’s sublist with any articles that are children of that section (but with control over article order), along the following lines…

<ul id=“superfish”>
<li><a id=“nav01” class=“menu” href=”/”>Home</a></li>
<li><a id=“nav02” class=“menu” href=”#”>Section1</a>
<ul>
<li><a href=”#”>Section1 Article3</a></li>
<li><a href=”#”>Section1 Article1</a></li>
<li><a href=”#”>Section1 Article2</a></li>
</ul>
</li>
<li><a id=“nav02” class=“menu” href=”#”>Section2</a>
<ul>
<li><a href=”#”>Section2 Article1</a></li>
<li><a href=”#”>Section2 Article3</a></li>
<li><a href=”#”>Section2 Article2</a></li>
</ul>
</li>
…and so on…
</ul>

Also, not all sections of my site will appear in the menu.
Cheers,
Phil

Offline

#2 2009-12-04 17:12:01

MattD
Plugin Author
From: Monterey, California
Registered: 2008-03-21
Posts: 1,254
Website

Re: Automated Navigation Menu

Will all articles in the included sections be in the menu?


My Plugins

Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker

Offline

#3 2009-12-04 17:21:33

els
Moderator
From: The Netherlands
Registered: 2004-06-06
Posts: 7,458

Re: Automated Navigation Menu

Basic code example:

<txp:section_list sections=",section1,section2,section5" include_default="1" default_title="Home" wraptag="ul" break="li">
   <txp:section title="1" />
   <txp:article_custom section='<txp:section />' sort="custom_n asc" wraptag="ul" break="li">
      <txp:permlink><txp:title /></txp:permlink>
   </txp:article_custom>
</txp:section_list>

Use a custom field to sort the articles (and replace ‘n’ in the above code with the number of the custom field).

Offline

#4 2009-12-04 20:31:46

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Automated Navigation Menu

@MattD

Yes, all articles in a section would be included in the menu as a rule.

Thanks, I’ll give the above example a spin and see how I get on. But are custom fields the only way of sorting articles?

Offline

#5 2009-12-04 20:58:04

els
Moderator
From: The Netherlands
Registered: 2004-06-06
Posts: 7,458

Re: Automated Navigation Menu

You can sort the articles by any column in the database table, have a look at the sort attribute here. If your manual sorting doesn’t match any of the existing criteria, a custom field is the way to go. You could also have a look at this plugin, I’m not familiar with it but it looks like it might also be helpful.

Offline

#6 2009-12-09 12:21:58

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Automated Navigation Menu

Hi there, thanks for the help people. Using some of the techniques here I have created a functioning nav menu (slightly less scripted than your suggestions but I have reasons for that) along these lines …

<ul id="superfish">
  <li><a id="nav01" class="menu" href="/">Home</a></li>
  <li><a id="nav02" class="menu" href="#"><txp:section name="section1" title="1" /></a>
    <ul>
      <txp:article_custom sort="custom_11 asc" limit="11" break="li" section="section1">
        <txp:permlink><txp:title /></txp:permlink>
      </txp:article_custom>
      <li><a href="#"><strong>More articles on <txp:section name="section1" title="1" />...</strong></a></li>
    </ul>
  </li>
  <li><a id="nav03" class="menu" href="#"><txp:section name="section2" title="1" /></a>
    <ul>
      <txp:article_custom sort="custom_11 asc" limit="11" break="li" section="section2">
        <txp:permlink><txp:title /></txp:permlink>
      </txp:article_custom>
      <li><a href="#"><strong>More articles on <txp:section name="section2" title="1" />...</strong></a></li>
    </ul>
  </li>
...and so on..
</ul>

I just have one more question if I may, in the example above I have restricted displaying articles in each section to a limit of 11, and have a <li> item…

<li><a href="#"><strong>More articles on <txp:section name="section1" title="1" />…</strong></a></li>

I would ideally like that line of code to only be displayed if a section has more than 11 articles associated with it, can it be done with some clever txp conditional tags?

Thanks,
Phil

Offline

#7 2009-12-09 18:08:36

els
Moderator
From: The Netherlands
Registered: 2004-06-06
Posts: 7,458

Re: Automated Navigation Menu

philwareham wrote:

I would ideally like that line of code to only be displayed if a section has more than 11 articles associated with it, can it be done with some clever txp conditional tags?

<txp:article_custom sort="custom_11 asc" limit="11" break="li" section="section2">
   <txp:permlink><txp:title /></txp:permlink>
</txp:article_custom>

<txp:variable name="countarticles" value='<txp:article_custom sort="custom_11 asc" offset="11" limit="1" section="section2" />' />

<txp:if_variable name="countarticles" value="">
<txp:else />
   <li><a href="#"><strong>More articles on <txp:section name="section2" title="1" />...</strong></a></li>
</txp:if_variable>

Offline

#8 2009-12-10 07:53:26

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Automated Navigation Menu

Worked great, thanks Els!

Offline

#9 2009-12-10 12:04:48

Gallex
Member
Registered: 2006-10-08
Posts: 1,315

Re: Automated Navigation Menu

Els wrote:

…<txp:if_variable name=“countarticles” value=”“>
<txp:else /> <li><a href=”#”><strong>More articles on <txp:section name=“section2” title=“1” />…</strong></a></li>
</txp:if_variable>

testing this solution as well.
how to make “more articles on…” link to section where those articles belongs to?

my solution not working

<txp:variable name="countarticles" value='<txp:article_custom sort="Posted asc" offset="3" limit="1" section='<txp:section />' />' />

<txp:if_variable name="countarticles" value="">
<txp:else />
   <li><a href='<txp:site_url />' '<txp:section />'>More articles on <txp:section name='<txp:section />' title="1" />...</a></li>
</txp:if_variable>

Offline

#10 2009-12-10 12:56:43

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Automated Navigation Menu

I was just going to hardcode the section links, as my sections themselves are not going to change, for example…

<li><a href="/section2"><strong>More articles on <txp:section name="section2" title="1" />...</strong></a></li>

However, if there is a better method I’m all ears.

Offline

#11 2009-12-10 21:53:08

els
Moderator
From: The Netherlands
Registered: 2004-06-06
Posts: 7,458

Re: Automated Navigation Menu

Gallex, you don’t need single quotes when using a Txp tag in an html tag:

<txp:variable name="countarticles" value='<txp:article_custom sort="Posted asc" offset="3" limit="1" section='<txp:section />' />' />

<txp:if_variable name="countarticles" value="">
<txp:else />
   <li><a href="<txp:site_url /><txp:section />/">More articles on <txp:section name='<txp:section />' title="1" />...</a></li>
</txp:if_variable>

Offline

Board footer

Powered by FluxBB