Help with wayfinder classes

106 Posts

matt6805 Reply #1, 18 years, 8 months ago

So I have this navigation that works great with one exception; when the last sub menu item is active, a vertical divider appears to the right of the item. This is because the class changes from ’last’ to ’current’ as defined by the wayfinder snippet, and my ’current’ class has a vertical divider to the right of the text. This is only an issue whhe the last subnav item is also active.

Screenshot 1: http://img293.imageshack.us/img293/7794/screen1zx2.jpg
you can see here that ’Consultant’ is using the class ’last’. This class has no veritcal divider defined in the CSS.

Screenshot 2: http://img262.imageshack.us/img262/4674/screen2tq0.jpg
Now the class ’last’ has been replaced by ’current’, so we see a vertical divider on the right.

I’ve been thinking about this problem for days and I can’t come up with a working solution. what i need an some klnd of rule that says when the last sub menu item is active, don’t put a verical rule to the right of it. It’s ok to have the veritcal rule to the right of all other items.

So I think i need a very speicific "last-active" state? Any ideas on how i can do this within the rules of the wayfinder? Thanks. I hope this makes sense.

Matt

4,205 Posts

dev_cw Reply #2, 18 years, 8 months ago

I don’t think that Wayfinder can do this. However you can use a multiple class style setup to style the last current like this:

.current.last { }

or

.last.current {}

Depending on how they show up in the call.

Here is some literature:
http://www.dhtmlkitchen.com/learn/css/multiclass/index2.jsp

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

106 Posts

matt6805 Reply #3, 18 years, 8 months ago

The ’last’ style is not the issue, that works fine. The issue is the ’current’ class. I need the current class to be different, only when it targets the last item in a sub menu. I don’t see that as being a possibility unless I missed something. I don’t see a way to define two different ’current’ states on the nav. (current & current last)

Matt

2,204 Posts

Dimmy Reply #4, 18 years, 8 months ago

normaly wayfinder adds a class so you would have a double class like this class= "last active" you should check your source if this is indeed what happends could you post the generated source?

there is always an option to make it work.

follow me on twitter: @dimmy01

4,205 Posts

dev_cw Reply #5, 18 years, 8 months ago

I don’t see a way to define two different ’current’ states on the nav. (current & current last)

As I pointed out you can use the double class method to style the .current.last { }. Here is an example:

The css:

#nav li {
	width: 200px;
	margin-bottom: 10px;
	padding: 0.4em;
	border: solid 1px #525252;
	list-style-type: none;
	display: block; }
.current {
	background-color: #c00; }

.last {
	background-color: #ccc; }

.current.last {
	background-color: #369; }

The HTML:

<div id="nav">
		<ul>
			<li class="current">menu1</li>
			<li class="last">menu2</li>
			<li class="current last">menu3</li>
		</ul>
	</div>

This way you can remove the border on the .current.last double class only and the the .current and the .last styles untouched. Give it a try.

Post your code and we can be more exact.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

106 Posts

matt6805 Reply #6, 18 years, 8 months ago

I don’t think the issue is the "last" class, it’s the "current" class which I’ve named "current_sublink".
Here’s the code, the first block of code show the "last" class being applied to the <li> and the current_sublink class active on an item. This is perfect:

screenshot: http://img180.imageshack.us/img180/3034/code1ga6.jpg

<ul class="select">
<li class="current"> <a href="/index.php?id=16" title="Role Based Solutions" >Role Based Solutions
</a>

<div class="show">
<ul class="sub">
<li> <a href="/index.php?id=17" title="CFO or Controller">CFO or Controller</a> </li>
<li> <a class="current_sublink" href="/index.php?id=18" title="HR Manager">HR Manager</a> </li>
<li> <a href="/index.php?id=19" title="Payroll Manager">Payroll Manager</a> </li>
<li class="last"> <a href="/index.php?id=20" title="Consultant">Consultant</a> </li>
</ul>
</div>

</li>
</ul>

This is how the code looks when the last link is active (the red arrow shows where the extra divider is being added)
screenshot: http://img141.imageshack.us/img141/4021/code2kc3.jpg

<ul class="select">
<li class="current"> <a href="/index.php?id=16" title="Role Based Solutions" >Role Based Solutions
</a>

<div class="show">
<ul class="sub">
<li> <a href="/index.php?id=17" title="CFO or Controller">CFO or Controller</a> </li>
<li> <a href="/index.php?id=18" title="HR Manager">HR Manager</a> </li>
<li> <a href="/index.php?id=19" title="Payroll Manager">Payroll Manager</a> </li>
<li> <a class="current_sublink" href="/index.php?id=20" title="Consultant">Consultant</a> </li>
</ul>
</div>

</li>
</ul>

Notice that the "last" class is replaced by a plain <li> and "current_sublink" applied to the <a> tag. If I tried to adjust this class specifically for the last item in a list, it will have negative results when the "current_sublink" class shows up anywhere else. So what I need to do is somehow define a current-last class, but i don’t know how to tell the wayfinder to use the current-last class only for the last sub item if it’s currently active. huh

Does this clear the situation up? Again thanks in advance for all the feedback!

Regards,
Matt

4,205 Posts

dev_cw Reply #7, 18 years, 8 months ago

OK, I think the problem is that you need to add the [+wf.classes+] placeholder to your custom innerHereTpl or innerTpl like this:

<li[+wf.classes+]>

I think that will resolve this.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

106 Posts

matt6805 Reply #8, 18 years, 8 months ago

Bingo! Along with writing a new CSS class to accommodate the wf+classes tag, that did the trick. Thank you!

Regards,
Matt