static/dynamic site with dynamic two/three level nav

maniqui · 2005-11-11 06:30:14

This is another approach to a static (or semi-static/semi-dynamic) site with dynamic two/three level navigation (/section/title permalink mode)
a revisited version of the forum post static site with dynamic two-level nav

A) Our goal

To create a site with:

a section nav menu
- generated from the site sections
a section-sensitive subnav menu (dynamic)
- generated from titles of sticky articles.
- Please, understand this: this are not real subsections, this are “sticky” (maybe with static content) articles, that can be seen as subsections. Of course, the content of each “subsection” is the content of each sticky article.
a section-sensitive article list (dynamic)
- generated from titles of live articles.
when in a section:
- if we’re in section frontpage, display the last “live” article in the section.
- if we click in an “sticky” article in the subnav, display that “sticky” article.
- if we click in a “live” article in the article-list, display that past “live” article.

To add some flavor, we will add a class="active" to current section. Also, we will add that class to current subnav article or to current article in article_list, but not to both, because we will never be in two individual articles at the same time. Remember: the subnav is made from “sticky” articles.

As example, we will create a “Recipe” section, with some “sticky” static articles (the subnav = the static content) and lot of “live” articles (the article-list = the recipes).
<small>Of course, you can think this also for a section “Services”, with “sticky” static articles (like “Design”, “Redesign”, “Software solutions”, etc), and “live” articles, (like “New services for December”, “Our review of our last work”, etc). I dont have too much imagination about services.</small>

So, at the end of our experiment we will have something like this (when we are at section “Recipes”, and looking at the last posted recipe):

(A section nav menu, followed by a section-sensitive subnav menu, and followed by a section-sensitive article list).

<a href=”/”>About my recipes</a>
<a href=”/”>My grandma’s cooking secrets</a>
<a href=”/”>How to extinguish a fire</a>
<a href=”/”>How to decontaminate your guests</a>

<a href=”/”>*Mistery Meat (25/10/05)*</a>
<a href=”/”>Magic Brownies (15/8/05)</a>
<a href=”/”>Bitter Birthday Cake (10/8/05)</a>
<a href=”/”>…</a>
<a href=”/”>…</a>

<big><strong>Mistery Meat</strong> 25/10/05 by Guybrush Threepwood.</big>
To start cooking the Mistery Meat… blablab…. lorem ipsum… blablabla… Hey, look, a three-head monkey behind you… blabla

</div>

Of course, we will have the option to put each menu and the article list wherever we want in our page template. It’s not necesary to have each one next to the other.
And remember: we will have class="active" in current section and in current subnav-article/article-list-article

B) Step-by-step: the Journey to Arnhemland (¿?)

1. we need a tool: just one plug-in. It is rdt_dynamenus (a very powerful plug-in). Download it and install it (too obvius).

2. set permanent link mode to ”/section/title”

3. go to Presentation/Sections:

now create the sections (e.g. ‘recipes’, ‘about-me’, ‘contact’, etc), with a clean “name” for the URL and a good “title” for humans

4. go to Presentation/Forms

4.1 For the section nav menu, make new misc form called “section-menu”:

<div id="sectionmenu">
     <txp:rdt_section_menu wraptag="ul" break="li" active="active" />
</div>
<br /><br />

4.2 For the section-sensitive subnav menu, create a new misc form called “subnav-menu”:

<div id="subnavmenu">
     <txp:rdt_article_menu wraptag="ul" break="li" active="active" sortby="custom_1" sortdir="asc" status="sticky" />
</div><br /><br />

Notice the sortby=“custom_1”. We will come back to this later.

4.3 For the section-sensitive article-list, make new misc form called “article-list”:

<div id="articlelist">
     <txp:rdt_article_menu wraptag="ul" break="li" active="active" status="live" />
</div><br /><br />

5. In your page template, insert each of the following lines wherever you want to display each menu:

     <txp:output_form form="section-menu" />
     <txp:output_form form="subnav-menu" />
     <txp:output_form form="article-list" /><br /><br />

6. now, how do you want to use /_section_ pages?

The idea is: when you enter the “Recipe” section, you should see:

the section nav menu (with current section highlighted -> of course, add a CSS rule)
the subnav menu,
the article list and
the last recipe (the full recipe).

i) How do we do to show the last recipe?
ii) How do we do to show the “sticky” static article if we click on one of the subnav menu?

The answer for both is one and is simple:
Put a <txp:article /> in your page template, wherever you want to display the full “live” article or the “sticky” static article. That will be enough.
Of course, play with form and listform attributes.

7. we add content this way

we create “sticky” static articles for the “Recipe” section.
Now, how to set the order of the subnav menu items?
…do you remember about the sortby="custom_1" sortdir="asc"?.
Well, we call our first custom field “weight” (we do that in admin » preferences » advanced preferences) and then, we add a numeric value in the custom field “weight” to each sticky article. The subnav menu will be sorted by the values asigned to that custom field. Easy, isnt it?.
we publish our recipes as “live” articles.

Notes:

Please, see plug-in help for more info about the attributes the plug-in supports.

Well, that’s all, I think.
Maybe, it seems a bit complicated, but it is really very simple.
I dont know if this is the best solution, but I found it very flexible.
Of course, you need a plug-in. (Is that bad? Raise up the hand those who dont use any plug-in).

But one of the advantage is that you arent “cheating” TXP. At least, I think this tutorial/solution follows the logic behind TXP. So, this is not a workaround solution, but a way to learn the TXP logic and also, how to use a plug-in and get the most of it.

And also, it’s very “semantic”. You use “sticky” articles to put static content, “live” articles to put dynamic content, etc.

But that is what I think… I would like to know what do you think. Did i do a mess in your brain?

Thanks and <small>excuse my english (so, any correction will be welcomed)</small>

EDIT: i add some <div>s surrounding each nav, because I think it adds clarification. Also added some styles and blablabla.

Last edited by maniqui (2005-12-03 20:30:58)

maniqui · 2005-11-11 15:04:55

> maniqui wrote:

<blockquote>4. go to Presentation/Forms

4.1 For the section nav menu, make new misc form called “section-menu”:

     <txp:rdt_section_menu wraptag="ul" break="li" active="active" /><br /><br />

4.2 For the section-sensitive subnav menu, make new misc form called “subnav-menu”:

     <txp:rdt_article_menu wraptag="ul" break="li" active="active" sortby="custom_1" sortdir="asc" status="sticky" /><br /><br />

Notice the sortby=“custom_1”. We will come back to this later.

4.3 For the section-sensitive article-list, make new misc form called “article-list”:

      <txp:rdt_article_menu wraptag="ul" break="li" active="active" status="live" />
</blockquote>

Of course, that is the long way.

Another option is to have just one form with all them.

4.1.bis) Use one form to output the section-nav, the subnav and the article list. This could be the “menu” form:

<div id="menu">
     <txp:rdt_section_menu wraptag="ul" break="li" id="section" active="active" />
     <txp:rdt_article_menu wraptag="ul" break="li" id="subnav" active="active" sortby="custom_1" sortdir="asc" status="sticky" />
     <txp:rdt_article_menu wraptag="ul" break="li" id="articlelist" active="active" status="live" />
</div>

5. In your page template, insert the following line wherever you want to display the menu:

     <txp:output_form form="menu" />

That’s all.

Of course, there are more possibilites.
Example: you can take out the article-list nav and put it in another form.
So, in your page template, you can have your section-nav and your subnav in one place, and the article-list nav in another place (usually, the sidebar).

Last edited by maniqui (2005-12-03 20:23:52)

rdtietjen · 2005-11-12 18:51:19

thanks, maniqui

your doco shows me a couple new tricks to use with my plugin.

maniqui · 2005-11-14 22:51:11

At the moment of writing this tutorial, I have noticed that rdt_dynamenus v0.9 always add class="active" to the first item list of an article list generated by rdt_article_menu when you are in a section frontpage (ie: in an article_list context).

This can be a “problem” for the “subnav” menu we have created, because the first item of the subnav list will have the class="active" even when you are not viewing that “sticky” article (= when you are in the section frontpage).

This default behaviour of the plug-in is “good” and is “bad”.
As we say, it’s “bad” for our “subnav” menu because we will have the first “li” item tagged with class=“active” when in section frontpage.
But it’s “good” for the “article-list” menu, because we will have our very last recipe highlighted when in the section frontpage.

I have asked to rdtietjen (the author of the rdt_dynamenus plug-in) if this behaviour (ie. to add/remove class=“active” in when in an section frontpage context) can be added as an attribute to the plug-in. So, let’s wait to read what the author have to say.

In the meanwhile, you can modify the plug-in code as I posted here.

That modification will remove the class=“active” for the first list item when you are in section frontpage (ie. article_list context).

Last edited by maniqui (2005-11-14 22:53:22)

BZ · 2005-12-03 20:18:20

2. set permanent link mode to ”/section/title”

is that really necessary for the whole thing to work?

maniqui · 2005-12-03 20:22:52

> BZ wrote:

> 2. set permanent link mode to ”/section/title”

is that really necessary for the whole thing to work?

Mmmmm, I think is not really necesary, but I did not tested with other permanent links modes.

The idea behind using “/section/title” is just for the “appearence”.
The “sticky” articles titles will look more as “subsections” in the URL.

BZ, tell us what happen if you use other permanent link modes.
Thanks!

BZ · 2005-12-03 21:13:32

maniqui
I use messy link mode and it seems to work fine, but when I click on a live article link the article won’t show up. I don’t know why that is, but it seems to have nothing to do with the plugin, because I have already tried different output methods and it’s always the same…

Last edited by BZ (2005-12-03 21:55:59)

maniqui · 2005-12-03 21:29:11

BZ wrote:

when I click on a live article link the article won’t show up. I don’t know why that ist, but it seems to have nothing to do with the plugin, because I have already tried output methods and it’s always the same…

In your page template, where you want to output your article, are you using <txp:article /> to output the article?
are you using the form="" attribute? if yes, what is in the called form?

What about when clicking in an “sticky” article? Does it show up?

Last edited by maniqui (2005-12-03 21:29:27)

BZ · 2005-12-03 21:58:47

maniqui

there’s a new topic about that in the troubleshooting area because it goes off topic here I think

Last edited by BZ (2005-12-03 21:59:59)

bluelena69 · 2006-02-21 17:23:35

Okay, so I have a question about how to implement a 3-level navigation on the site I am redesigning.
I understand (or understood) manqui’s explanation for the most part, but my head is just swimming right now. I have the rdt_dynamicmenu plugin specified and everything is set to go, however I cannot seem to get the menu structure to output just right. I will provide a specific scenario:
1) This is a site for an art museum.
2) My main horizontal top navigation is named after sections i.e. Home, About, News, Exhibitions, Collections and Multimedia. I have the output looking good here.
3) For subnavigation, I will use the “Exhibitions” section as an example as it is the most complicated. In the right sidebar, I would like to output the following as right sidebar subnavigation: Current Exhibitions, Upcoming Exhibitions, Past Exhibitions and Traveling Exhibitions. When you select “Exhibitions” from the main top navigation, I would like to have an overview article displayed in the content area with the aforementioned section titles (current, upcoming, etc…) displayed in the sidebar. Upon clicking each sidebar option, I would like a sub, sub navigation list to appear with one article appearing in the content area. With the “past exhibitions” option, I will have a long list, but I will worry about that later.

That said, am I following the right tutorial? Should I just continue to mess with it until I get it right? Would I be better off putting the “past exhibitions” into a category called “past exhibitions” and then calling them as categories with a plugin like wow_menu? Can I do this via a default tag like <txp: custom_article />?

Also, there is a really good chance that there will be material that I would like to see in two different places…i.e. “news” items in both the “news” and “home” sections.

Any guidance provided will be greatly appreciated. I am sure that this is not nearly as complicated as I am making it. Like I said, I am just swimming right now…kind of like writer’s block. Help a brother out and I will make you all proud in a few days, I promise…

Juany

Last edited by bluelena69 (2006-02-21 17:25:30)

maniqui · 2006-02-21 18:50:51

bluelena69

output the following as right sidebar subnavigation: Current Exhibitions, Upcoming Exhibitions, Past Exhibitions and Traveling Exhibitions.

So, if you follow the tutorial, this items in the subnavigation should be sticky articles

When you select “Exhibitions” from the main top navigation, I would like to have an overview article displayed in the content area

An “overview” article is like an “sticky” article? I mean, that “overview article” will be static content?
If yes, you can achieve this by different methods:

create a form (presentation -> form) with the static text and call it from the page template with <txp:output_form form="formname" /> . Disvantage: the content isnt searcheable.
create an sticky article, but the “problem” could be that we are using “sticky” articles for the subnavigation. A workaround: create a section called “static”, write the “overview article” you want to show, save it in the section “static” and then, call it with: <txp:article_custom id="thearticleID" /> in your page template

Upon clicking each sidebar option, I would like a sub, sub navigation list to appear with one article appearing in the content area.

do you mean something like?

current exhibitions
*past exhibitions
- article a
- article b
- article c
upcoming exhibitions
traveling exhibitions

I would say it is not possible… but… hey… this is TXP! Few things are impossible…

Can I do this via a default tag like ?

Dont know, but using built-in TXP tags is a good practice… and trying to achieve difficult things with them is good too.

Also, there is a really good chance that there will be material that I would like to see in two different places…i.e. “news” items in both the “news” and “home” sections.

When you create the section “news”, select the option: In frontpage? Yes

bluelena69 · 2006-02-21 21:12:06

maniqui,
Thanks alot for your prompt and informative reply. I will take this opportunity to thank you for your attention to navigational issues with Textpattern. It is the only issue that has given me any trouble with this CMS, with the exception of some installation on IIS 6 issues, but that was easily solved and not a “Txp” issue. Your posts have really helped me, and I am sure a number of others, grasped different abstract navigational concepts here. Anyhow…

How would I likely fare if I utilize some native “if-section” tags? It seems like I could divide the “Exhibitions” articles into categories and use “if_section” limiters to output the articles in the “past exhibition” categories upon selecting the “past exhibitions” link in the sidebar…

I’m looking at plug-ins, but I’d like to avoid it. I’m also thinking about doing this, which might be a better navigation structure anyhow :

1) Main horizontal navigation with “sticky“sections dropping down via “Suckerfish” or another method.

2) Having the “live” sections appear in the right sidebar upon selecting the desired dropdown.

If I have to use a plug-in for the time being, I certainly will. I’m looking for a quick solution so that I can get the site up. I can worry about correct solutions later. Normally, I wouldn’t have this attitude, but this is really holding me up.

If you or anyone else have any further suggestions to help me definitely rule out some, that would be great. I will get this solved hell or high water.

Textpattern CMS

Textpattern CMS support forum

#1 2005-11-11 06:30:14