MX4 tempalte - creating a menu with class="selected"

marco · 2005-10-09 16:27:03

I am trying to install the MX4 template for TP 4.0.1 but I have trouble with the site navigation.
Specifically, I can not get the site menu to link to the proper pages.

I read the TP FAQ but I still do not know how can I create a simple site navigation menu that links to the site sections.

This is the code from the MX4 template:
<code>
<div id=“navcontainer”> <ul> <li><a class=“selected” href=”/”>Home</a></li> <li><a href=”#”>Archives</a></li> <li><a href=”/links/”>Links</a></li> <li><a href=”/about/”>About</a></li> </ul>
</div>
</code>
How do I get the href’s to point to the proper pages? I created the pages, stored them in the database, now what? How do I build the menu?

It is important to be able to be able to have a “selected” class applied to the proper link.

Last edited by marco (2005-10-09 16:34:23)

andreas · 2005-10-09 16:54:00

What exactly doesn’t work? Do you have sections called “links”, “about” and “archives”? If your sections have different names, you have to change the markup of the navigation. In clean-URL mode, each section corresponds to a subdirectory of the same name.

So if you have a section called “About”, it will be accessible through: www.domain.com/about/

In “messy” URL mode this will be www.domain.com/?s=about

To have that class assigned to the current section, you can use the plugin glx_hl_current

Last edited by andreas (2005-10-09 16:55:23)

marco · 2005-10-09 18:03:54

The site menu has the following sections: Home, Archives, Links, About, just like the template does. I created 3 pages: default, archive, and about, and two sections: about and article.
I set the “Article” and “About” sections to use the “article” page. This is what I get:

The “Home” menu link points to the home page, using the following list item:

The ‘About” section should point to the “about” article, displayed using the “article” page.
The link to point to it is:

<code> <li><a href=”/textpattern/about/”>About</a></li>
</code>

What I get is a page that is only partly styled: the “about” article content is displayed, the menu is styled correctly, but the page background and sidebar are missing.

The menu links on the “about” article page are also wrong.
The “Home” link in the article page, coded as:

Does not point to the Home page, but to the “about” page.

andreas · 2005-10-09 18:17:28

<li><a class="selected" href="#">Home</a></li>

This link is strange: if you want a link to the homepage, it should look like this:

<li><a class="selected" href="/">Home</a></li>

The hash sign (#), in some browsers, functions as a link to the top of the page. It never takes you back to the home directory.

<li><a href="/textpattern/about/">About</a></li> only works if you’ve installed your site in a subdirectory. But that doesn’t seem to be the case (judging from what else you’ve mentioned). So your link to the about section should be:

<li><a href="/about/">About</a></li>

Try to apply these changes and see if they make for any improvement.

marco · 2005-10-09 19:58:41

Very strange. With both Firefox and IE, if I use href=”#”, I get the correct TP home link:

http://myhost/cms/textpattern/#

If I use href=”/”, I get http://myhost/

This is all on a brand new TP install from the SVN. I removed the TP pages and replaced them with the MX4 pages from the zip.

I actually also had this form, it still does not work;
<code>
<li><a href=”/about/”>About</a></li>
</code>

it points to:

http://myhost/about

instead of http://myhost/cms/textpattern/about

In fact, it does not matter what I put in the href below,
<code>
<li><a href=”/www/cms/textpattern/about/”>About</a></li>
</code>

it still points to http://myhost/about

Of course, there is no external about.html, or about.php file, they are stored in mySQL, no?
I think in older version we had to create some external files for each section, bu that is no longer the case, right?

Last edited by marco (2005-10-09 19:59:34)

thebombsite · 2005-10-09 20:03:30

Have you tried using <code><a href=”<txp:site_url />about”>About</a></code>? I’m not sure what revision you are on so I don’t know if that tag will work for you. If it does then just use the tag on it’s own (inside the “a” tag) for the home page. As for setting up your menu so that the active tag is selected when you move from page to page you need to use conditionals. This is part of my top menu:-

<code>
<txp:if_section name=“contact”>
<span class=“hnavactivelink”>Contact</span>
<txp:else />
<a class=“hnavlink” href=”<txp:site_url />Contact”>Contact</a>
</txp:if_section>
<txp:if_section name=“about”>
<span class=“hnavactivelink”>About</span>
<txp:else />
<a class=“hnavlink” href=”<txp:site_url />About”>About</a>
</txp:if_section>
<txp:if_section name=“search”>
<span class=“hnavactivelink”>Search</span>
<txp:else />
<a class=“hnavlink” href=”<txp:site_url />Search”>Search</a>
</txp:if_section></code>
<br />

The conditional asks if you are in the section and if you are you get the active link style “else” you get the inactive link style. Of course your section names and class names will be different to mine but you should get the general idea.

Last edited by thebombsite (2005-10-09 20:16:04)

marco · 2005-10-09 20:17:02

The txp:site_url version messes up the menu; I give up, besides, in that case how would I apply a class=“selected”?

There must be some probem with the SVN version; I am going to try again with the 4.0.1 taken from the download, not the SVN.

thebombsite · 2005-10-09 20:23:13

Classes are applied in my second piece of code which includes the first piece. If you want to see it in action try my site out.

marco · 2005-10-09 20:33:13

OK, I re-installed 4.0.1 from the TP download. Looking at the deault site, it appears that there is no site navigation menu. I thought by now there would be a decent default blog template with the TP distribution, complete with site navigation, archives, and categories.

So, here’s the new question, how do I create in this default 4.0.1 TP template, a navigation menu with only three links: Home, About, and Archive.

Hopefully this will help figure out how to get the MX4 template to work with TP 4.0.1.

Last edited by marco (2005-10-09 20:34:03)

thebombsite · 2005-10-09 20:52:58

Well first let me remind you that TXP is a CMS, not blogging software, so being distibuted with a nice blog template isn’t going to happen. Other things will though so be patient.

Next go to your FORMS template page and create a new template called horizontal_nav or something similar. It should be a “misc” type form. Now put this code into it:-

<code>
<div id=“navcontainer”>
<ul>
<li>
<txp:if_section name=”“>
<span class=“selected”>Home</span>
<txp:else />
<a href=”<txp:site_url />”>Home</a>
</txp:if_section>
</li>
<li>
<txp:if_section name=“about”>
<span class=“selected”>About</span>
<txp:else />
<a href=”<txp:site_url />about”>About</a>
</txp:if_section>
</li>
<li>
<txp:if_section name=“archive”>
<span class=“selected”>Archive</span>
<txp:else />
<a class=“hnavlink” href=”<txp:site_url />archive”>Archive</a>
</txp:if_section>
</li>
</ul>
</div></code>
<br />

You now need to pick up the style for “selected” and “a” from your MX4 CSS and put it into the default CSS. Then in your page templates, both default and archive, you need to call the new form with the tag <code><txp:output_form form=“horizontal_nav” /></code> where you want it to appear.

marco · 2005-10-09 21:36:29

thebombsite- thank you for the sample code, it is very kind of you to post this.
That was not obvious at all.

I would have expected to be able to just build a menu using a list like this:

<code>
<div id=“navcontainer”>
<ul>
<li><a class=“selected” href=”/”>Home</a></li>
<li><a href=”/archives/”>Archives</a></li>
<li><a href=”/links/”>Links</a></li>
<li><a href=”/about/”>About</a></li>
</ul>
</div>
</code>

Although I can see how keeping this simple may not be possible, perhaps because TP stores the template pages in mySQL.

marco · 2005-10-09 21:43:54

…and it worked… thanks again.

Textpattern CMS

Textpattern CMS support forum

#1 2005-10-09 16:27:03

MX4 tempalte - creating a menu with class="selected"

#2 2005-10-09 16:54:00

Re: MX4 tempalte - creating a menu with class="selected"

#3 2005-10-09 18:03:54

Re: MX4 tempalte - creating a menu with class="selected"

#4 2005-10-09 18:17:28

Re: MX4 tempalte - creating a menu with class="selected"

#5 2005-10-09 19:58:41

Re: MX4 tempalte - creating a menu with class="selected"

#6 2005-10-09 20:03:30

Re: MX4 tempalte - creating a menu with class="selected"

#7 2005-10-09 20:17:02

Re: MX4 tempalte - creating a menu with class="selected"

#8 2005-10-09 20:23:13

Re: MX4 tempalte - creating a menu with class="selected"

#9 2005-10-09 20:33:13

Re: MX4 tempalte - creating a menu with class="selected"

#10 2005-10-09 20:52:58

Re: MX4 tempalte - creating a menu with class="selected"

#11 2005-10-09 21:36:29

Re: MX4 tempalte - creating a menu with class="selected"

#12 2005-10-09 21:43:54

Re: MX4 tempalte - creating a menu with class="selected"

Board footer