Go to main content

Navigation menu

Textpattern CMS support forum

You are not logged in. Register | Login | Help

  1. Index
  2. » How do I…?
  3. » list problem

Pages: 1 2

#1 2008-09-04 18:08:11

roelof
Member
Registered: 2005-03-27
Posts: 647

list problem

Hello,

I have this form : 

<txp:if_different>
<ul>
<a href="#nogo">
<txp:category1 /><br />
</txp:if_different>
<txp:if_different>
<li>
  <a rel="nofollow" href="<txp:site_url />?c=<txp:category1 />&amp;month=<txp:posted format="%Y-%m" />"><txp:posted format="%B" /></a>
</li>
</txp:if_different>

Now im trying to achieve that the li where the months are displayed will be in a ul like this :

<ul class="top4">
  <li> month </li>
  <li> month 2 <li>
</ul>

How can i change the template to get this ?

Roelof

Last edited by ruud (2008-09-04 20:12:16)

Offline

#2 2008-09-04 20:14:15

ruud
Developer Emeritus
From: a galaxy far far away
Registered: 2006-06-04
Posts: 5,068
Website

Re: list problem

How does it display at the moment (I’m guessing category1 = month 1, 2 etc)?

Offline

#3 2008-09-04 20:31:20

roelof
Member
Registered: 2005-03-27
Posts: 647

Re: list problem

When i change the form to this :

<txp:if_different>
<ul>
<a href="#nogo">
<txp:category1 /><br />
</txp:if_different>
<txp:if_different>
<ul class="top3">
<li>
  <a rel="nofollow" href="<txp:site_url />?c=<txp:category1 />&amp;month=<txp:posted format="%Y-%m" />"><txp:posted format="%B" /></a>
</li>
</txp:if_different>

The output is like this :

<div class="menu">
<ul>
<a href="#nogo">
zwangerschap<br />
<ul class="top3">
<li>
  <a rel="nofollow" href="http://test.tamarawobben.nl/?c=zwangerschap&amp;month=2005-02">February</a>
</li>
<ul class="top3">
<li>
  <a rel="nofollow" href="http://test.tamarawobben.nl/?c=zwangerschap&amp;month=2005-03">March</a>
</li>
<ul class="top3">
<li>
  <a rel="nofollow" href="http://test.tamarawobben.nl/?c=zwangerschap&amp;month=2008-09">September</a>
</li>
</LI></UL></DIV>
</div>

En when i change the form to this :

<txp:if_different>
<ul>
<a href="#nogo">
<txp:category1 /><br />
</txp:if_different>
<txp:if_different>
<li>
<ul class="top3">
<a rel="nofollow" href="<txp:site_url />?c=<txp:category1 />&amp;month=<txp:posted format="%Y-%m" />"><txp:posted format="%B" /></a>
</li>
</txp:if_different>

The output is like this :

<div class="menu">
<ul>
<a href="#nogo">
zwangerschap<br />
<li>
<ul class="top3">
<a rel="nofollow" href="http://test.tamarawobben.nl/?c=zwangerschap&amp;month=2005-02">February</a>
</li>
<li>
<ul class="top3">
<a rel="nofollow" href="http://test.tamarawobben.nl/?c=zwangerschap&amp;month=2005-03">March</a>
</li>
<li>
<ul class="top3">
<a rel="nofollow" href="http://test.tamarawobben.nl/?c=zwangerschap&amp;month=2008-09">September</a>
</li>
</LI></UL></DIV>
</div>

Roelof

Last edited by ruud (2008-09-04 20:41:03)

Offline

#4 2008-09-04 20:52:42

ruud
Developer Emeritus
From: a galaxy far far away
Registered: 2006-06-04
Posts: 5,068
Website

Re: list problem

If you edit your own post, you can see how I’ve made the code show up like that ;)

Can you give a complete example of how what the resulting code should be (all the stuff inside the DIV tag), because right now, you have an opening UL tag, followed by a link instead if LI, which isn’t valid, so I’m not sure what exactly you want to to look like. I think the solution will require a bit of PHP though.

Offline

#5 2008-09-05 07:25:12

roelof
Member
Registered: 2005-03-27
Posts: 647

Re: list problem

Here’s a example of the menu i like to use :

<div class="menu">
<ul>
<li><a href="#nogo">Item 1</a></li>
<li><a href="#nogo">Item 2</a></li>
<li><a href="#nogo">Item 3 »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="top3">
	<li><a href="#nogo">Item 3a</a></li>
	<li><a href="#nogo">Item 3b »<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="top2">
			<li><a href="#nogo">Item 3bi</a></li>
			<li><a href="#nogo">Item 3bii »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top2">
					<li><a href="#nogo">Item 3bii-1</a></li>
					<li><a href="#nogo">Item 3bii-2</a></li>
					<li><a href="#nogo">Item 3bii-3</a></li>
					<li><a href="#nogo">Item 3bii-4</a></li>
					<li><a href="#nogo">Item 3bii-5</a></li>
					<li><a href="#nogo">Item 3bii-6</a></li>
					<li><a href="#nogo">Item 3bii-7</a></li>
					<li><a href="#nogo">Item 3bii-8</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">Item 3biii »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top3">
					<li><a href="#nogo">Item 3biii-1</a></li>
					<li><a href="#nogo">Item 3biii-2</a></li>
					<li><a href="#nogo">Item 3biii-3</a></li>
					<li><a href="#nogo">Item 3biii-4</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#nogo">Item 3c</a></li>
	<li><a href="#nogo">Item 3d</a></li>
	<li><a href="#nogo">Item 3e</a></li>
	<li><a href="#nogo">Item 3f</a></li>
	<li><a href="#nogo">Item 3g »<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="top7">
			<li><a href="#nogo">Item 3gi »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top1">
					<li><a href="#nogo">Item 3gi-1</a></li>
					<li><a href="#nogo">Item 3gi-2</a></li>
					<li><a href="#nogo">Item 3gi-3</a></li>
					<li><a href="#nogo">Item 3gi-4</a></li>
					<li><a href="#nogo">Item 3gi-5</a></li>
					<li><a href="#nogo">Item 3gi-6</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">Item 3gii</a></li>
			<li><a href="#nogo">Item 3giii »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top3">
					<li><a href="#nogo">Item 3giii-1</a></li>
					<li><a href="#nogo">Item 3giii-2</a></li>
					<li><a href="#nogo">Item 3giii-3</a></li>
					<li><a href="#nogo">Item 3giii-4</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">Item 3giv</a></li>
			<li><a href="#nogo">Item 3gv</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#nogo">Item 3h</a></li>
	<li><a href="#nogo">Item 3i</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
<li><a href="#nogo">Item 4</a></li>
<li><a href="#nogo">Item 5</a></li>
<li><a href="#nogo">Item 6 »<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="top6">
	<li><a href="#nogo">Item 6a</a></li>
	<li><a href="#nogo">Item 6b »<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="top2">
			<li><a href="#nogo">Item 6bi</a></li>
			<li><a href="#nogo">Item 6bii »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top2">
					<li><a href="#nogo">Item 6bii-1</a></li>
					<li><a href="#nogo">Item 6bii-2</a></li>
					<li><a href="#nogo">Item 6bii-3</a></li>
					<li><a href="#nogo">Item 6bii-4</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#nogo">Item 6c</a></li>
	<li><a href="#nogo">Item 6d</a></li>
	<li><a href="#nogo">Item 6e</a></li>
	<li><a href="#nogo">Item 6f</a></li>
	<li><a href="#nogo">Item 6g »<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="top7">
			<li><a href="#nogo">Item 6gi »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top1">
					<li><a href="#nogo">Item 6gi-1</a></li>
					<li><a href="#nogo">Item 6gi-2</a></li>
					<li><a href="#nogo">Item 6gi-3</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo">Item 6gii</a></li>
			<li><a href="#nogo">Item 6giii »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="top3">
					<li><a href="#nogo">Item 6giii-1</a></li>
					<li><a href="#nogo">Item 6giii-2</a></li>
					<li><a href="#nogo">Item 6giii-3</a></li>
					<li><a href="#nogo">Item 6giii-4</a></li>
					<li><a href="#nogo">Item 6giii-5</a></li>
					<li><a href="#nogo">Item 6giii-6</a></li>
					<li><a href="#nogo">Item 6giii-7</a></li>
					<li><a href="#nogo">Item 6giii-8</a></li>
					<li><a href="#nogo">Item 6giii-9</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="#nogo">Item 6h</a></li>
	<li><a href="#nogo">Item 6i</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">Item 7</a></li>
</ul>
</div>

I found it here : http://www.cssplay.co.uk/menus/flyout5.html

The only thing i want to change is to make a 2 level menu .

Roelof

Last edited by roelof (2008-09-05 07:26:07)

Offline

#6 2008-09-05 10:39:56

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

Re: list problem

Using if_different with nested lists is not possible. Using it with more than one <ul> can be done, but requires a workaround (you’ll need to make the first level ul a div, and have an empty div and ul at the top of your list). I think it can be done like this, but you will also have to adapt the CSS accordingly.

Page:

<div class="menu">
<txp:article_custom section="article" form="yourform" sort="Category1 asc, Posted asc" limit="999" />
</div>

Form ‘yourform’ (edited):

<txp:if_first_article>
	<div style="display:none;">
	<ul style="display:none;">
</txp:if_first_article>
<txp:if_different>
	</ul>
	</div>
	<div class="level1">
	<h3><txp:category1 /></h3>
	<ul class="level2">
</txp:if_different>
<txp:if_different>
		<li><a href="<txp:site_url />?s=<txp:section />&amp;c=<txp:category1 />&amp;month=<txp:posted format="%Y-%m" />"><txp:posted format="%B" /></a></li>
</txp:if_different>
<txp:if_last_article>
	</ul>
	</div>
</txp:if_last_article>

This will be the html output:

<div class="menu">
	<div style="display:none;">
	<ul style="display:none;">
	</ul>
	</div>
	<div class="level1">
	<h3>First Category</h3>
	<ul class="level2">
		<li>link to first month</li>
		<li>link to second month</li>
	</ul>
	</div>
	<div class="level1">
	<h3>Second Category</h3>
	<ul class="level2">
		<li>link to first month</li>
		<li>link to second month</li>
	</ul>
	</div>
</div>

(I had doubts about the second if_different in your form, but looking at the html output you provided it appears to be working; didn’t test this myself.)

You will have to experiment with the CSS changes. I suppose it will be something like this:

CSSPlay		new
.menu ul	.menu .level1
.menu li	.menu .level1 h3
.menu ul ul	.menu ul
.menu ul.top3	.menu ul.level2

I hope this will help; as said, I didn’t test it. You always seem to pick very nice looking menus, that are tough to implement in TXP though… ;)

Last edited by els (2008-09-05 14:02:19)

Offline

#7 2008-09-05 11:10:17

roelof
Member
Registered: 2005-03-27
Posts: 647

Re: list problem

Els,

Thank you,
I will test it this afternoon.

I know i choose nice looking menu’s and im sorry that implement in TXP is tough.
If you now a better way for a nice menu for my site which will implement better , i hope you will tell me.

Roelof

Offline

#8 2008-09-05 11:45:07

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

Re: list problem

Sure I would tell you, but at the moment I don’t know of any… I hope it can be done with the workaround.

Offline

#9 2008-09-05 12:34:47

roelof
Member
Registered: 2005-03-27
Posts: 647

Re: list problem

hoi Els,

For the moment it doesn’t work.

I get this output :
bc. <div class=“menu”> <div style=“display:none;”> <ul style=“display:none;”> </ul> </div> <div class=“level1”> <h3></h3> <ul class=“level2”> <li><a href=“http://test.tamarawobben.nl/?c=&amp;month=“2008-09”>September</a></li>

</ul> </div> <div class=“level1”> <h3>zwangerschap</h3> <ul class=“level2”> <li><a href=“http://test.tamarawobben.nl/?c=zwangerschap&amp;month=“2008-09”>September</a></li>

</ul> </div>
</div>

Roelof

Offline

#10 2008-09-05 13:26:50

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

Re: list problem

Hmm… so the second if_different does not work after all… The category problem can probably be solved.
Let me think about it.

Offline

#11 2008-09-05 14:04:54

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

Re: list problem

Sorry, some quotes were in the wrong place… I edited the code for the form in my post above, it works in my test install. Could you try again?

(I didn’t look at the CSS, just the menu output.)

Offline

#12 2008-09-05 14:52:38

roelof
Member
Registered: 2005-03-27
Posts: 647

Re: list problem

Wierd,

On my site it doesn’t work.
Can i be that i test it on messy ?

Roelof

Offline

Pages: 1 2

  1. Index
  2. » How do I…?
  3. » list problem

Board footer

Powered by FluxBB