Wayfinder & CSS - Please help | MODX Community Forums

☆ A M B ☆
453 Posts

Mproject Reply #1, 18 years ago

I’m tottaly lost with this Wayfinder huh

What I must do to have a menu look like this ? :
menu

..and popup on hover

I looked around and found this link: http://www.muddydogpaws.com/development/wayfinder/examples/example-4.html
which is the most closest what I’m trying to get... but I’m tottaly lost with CSS and where to put it and bassicly how to write it

BASE - Web Design Studio
MODX Ambassador

Website

132 Posts

motoxer4533 Reply #2, 18 years ago

mproject,

I believe you can find the code for that menu at CSS Play’s website: http://www.cssplay.co.uk/menus/flyoutt.html .

There, you can view the CSS and XHTML that goes into making the menu. From there, you can start changing the code, adding your images, etc. to the code and see your results.

☆ A M B ☆
453 Posts

Mproject Reply #3, 18 years ago

Thanks! I managed to look near as I want...

Now I’m troubled with the icons.... rolleyes

How can I add certain icon (on left side as on picture above) for specific menu? huh

P.S. and how to change color of text in the menu when I’m on that page?

BASE - Web Design Studio
MODX Ambassador

Website

132 Posts

motoxer4533 Reply #4, 18 years ago

Quote from: Mproject at Oct 15, 2008, 03:50 AM

Thanks! I managed to look near as I want...

Now I’m troubled with the icons.... How can I add certain icon (on left side as on picture above) for specific menu?

P.S. and how to change color of text in the menu when I’m on that page?

The icons are pretty easy. See this example of Stu’s menu: http://www.cssplay.co.uk/menus/image_drop . Each link in this menu has an icon to the left of the link text. View the source code there to see how the images are placed next to the text.

As far as creating a "You Are Here" state of navigation, its as simple as adding a ".current" class to your link. For example you would have:

#menu ul li a.current {
styles go here..
}

and your html would be:

<div id="menu">
<ul>
<li><a href="link.html" class="current">Link Text</a></li>
</ul>
</div>

Moto

☆ A M B ☆
453 Posts

Mproject Reply #5, 18 years ago

I can’t say thabks enough for the help, BUT..

...seems easy to done, but I got even more confused with all of these UL’s and LI’s hehe

Its’ obviously that this code is what I need for the icons

.menu li a#home b.b_top {background:transparent url(home.gif) no-repeat center center;}

- I suppose the #home is the id="home", and b_top is the class..
but where do I put this on my wayfinder?
Parent row

<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
    <!--[if lte IE 6]>
    <a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
    <table><tr><td>
    <![endif]-->
    [+wf.wrapper+]
    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>

BASE - Web Design Studio
MODX Ambassador

Website

☆ A M B ☆
453 Posts

Mproject Reply #6, 18 years ago

Update:
I tried to put the id tag like this in my parent row
<li>
<a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]" id="[+wf.docid+]"><em class="icon"></em>[+wf.linktext+]</a>
[+wf.wrapper+]
</li>

...and it doesn’t work, BUT
when I put it like this....
<li>
<a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]" id="customIDtag"><em class="icon"></em>[+wf.linktext+]</a>
[+wf.wrapper+]
</li>

it works--- WHY?????????????????

P.S. my CSS

.menu li a#customIDtag em.icon {background:transparent url(icon.png) no-repeat center center}

BASE - Web Design Studio
MODX Ambassador

Website

1,390 Posts

kongondo Reply #7, 18 years ago

Just a hunch...try [+wf.docId+]

In the WF wiki, the id is referenced as Id (e.g. &startId - (current docId) ), but the placeholder is referenced as [+wf.docid+], the way you have it in your code - it could be a typo. Anyway, just try it and let’s see..

btw, glad you got your menu working

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

☆ A M B ☆
453 Posts

Mproject Reply #8, 18 years ago

Yeah... the menu itself works fine (and even with some modifications - some filters & stuff) but the icons.... the nightmare

I tried with [+wf.Id+] [+wf.id+] and [+wf.docId+] and [+wf.docid+] and it don’t work embarrassed

BASE - Web Design Studio
MODX Ambassador

Website

1,390 Posts

kongondo Reply #9, 18 years ago

OK.

What is this btw, "customIDtag" ?

You could maybe use &rowIdPrefix in combination with [+wf.id+]...as shown on muddydogpaws.com

&rowIdPrefix
default: FALSE
values: name of prefix
description: If this parameter is set, Wayfinder will replace the placeholder [+wf.id+] with a unique id consisting of the specified prefix plus the document id.
example: &rowIdPrefix=`topMenu` will output the following for doc # 29: id="topMenu29"

Only addition is the prefix...but u do get your id="XXXid" typed out for ya wink

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

☆ A M B ☆
453 Posts

Mproject Reply #10, 18 years ago

Quote from: kongondo at Oct 21, 2008, 09:05 AM

OK.

What is this btw, "customIDtag" ?

customIDtag could be for ex. travel

Thus, the css would be

.menu li a#travel em.icon {background:transparent url(travel_icon.png) no-repeat center center}

UPDATE:
I tried with &rowIdPrefix=`Menu` and in teh CSS (.menu li a#Menu15 ..... where the 15 is the doc id)

Stil won’t display the icons sad

BASE - Web Design Studio
MODX Ambassador

Website