Rollover and highlight current page in menu, with jpgs as menu items

245 Posts

towerofbabel Reply #1, 18 years, 5 months ago

I am using Wayfinder for main navigation. Until now, I was just using text + color for the menu rollovers in css and that is all fine. But the site is almost ready for production and I have to use a jpg file for each menu item, which has the text in a specially style font.

What I have is two unique jpgs for each menu item - one for the normal state "a" and one for hover "a:hover".

Further, I need the hover to remain selected when that page (and the children of that page) is actually visited.

Is this possible in Wayfinder, and where do I start?

Thanks.

2,204 Posts

Dimmy Reply #2, 18 years, 5 months ago

it is possible using wayfinder and css
I did it here: http://brandputje.nl/

the call:
[!Wayfinder? &startId=`0` &level=`1` &rowTpl=`rowtpl`!]

rowtpl chunk:

<li id=nav[+wf.docid+][+wf.classes+]"><a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]> [+wf.linktext+]</a></li>

now each li has its own class "nav1" nav+pageid, with you can style in css
will look something like this in the source:

<li id="nav5"><a href="/winkel.html" title="Winkel" >Winkel</a></li>

now the css to make the text disappear an show the image:

#nav ul li#nav5 a {
display: block;
background-image: url("../gfx/nav/winkel.gif"); 
background-repeat: no-repeat;
width: 111px;
height: 27px;
font-size: 0px; /*make font size 0 that way the link name is still there for  SEO and Accessibility */
}

and the hover and active image for that menu item:

#nav ul li#nav5.active a,
#nav ul li#nav5 a:hover {
background-image: url("../gfx/nav/winkel_hover.gif"); 
background-repeat: no-repeat;
}

I hope that this helps you

Greets Dimmy

follow me on twitter: @dimmy01

2,204 Posts

Dimmy Reply #3, 18 years, 5 months ago

mm sorry I think I missed something
you need to use a extra chunk

wait for it....

ok this should work now

the call I used before was the wayfinder 1.x version

follow me on twitter: @dimmy01

245 Posts

towerofbabel Reply #4, 18 years, 5 months ago

Thanks Dimmy! That sure helps me get started. The "secret" was

<li id=nav[+wf.docid+]">

. I did some changes, making it a class and attributing it to the link rather than the list item to make it work with my css.

Now, I have the images working for hover, but not active. The CSS you gave doesn’t seem to work for me, and I was certain that some specific php script or javascript would required to indicate the active state. I want to do it with php and not javascript if possible, but that wayfinder call you are using (and that I was basically using the same thing) doesn’t do it. Is there not some script behind your active class?

Am I missing something here?

2,204 Posts

Dimmy Reply #5, 18 years, 5 months ago

you need the [+wf.classes+] in there to
<li id=nav[+wf.docid+][+wf.classes+]">

follow me on twitter: @dimmy01

245 Posts

towerofbabel Reply #6, 18 years, 5 months ago

Thanks for your help Dimmy. I feel I am close, but the active still doesn’t work. Here is my code:

The Call:

[!Wayfinder?&startId=`0` &level=`1` &sortOrder=`DESC` &excludeDocs=`40,38,69` &rowTpl=`nav_rowtpl`!]

The rowtpl chunk (nav_rowtpl):

<li><a class="nav[+wf.docid+]" [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]> [+wf.linktext+]</a></li>

The CSS:

#nav ul li a.nav2 {
            background-image: url("../images/home-blue.jpg"); 
            background-repeat: no-repeat;

            text-decoration:none;
            font-size:0;

            }

#nav ul li a:hover.nav2 {
            background-image: url("../images/home-red.jpg"); 
            background-repeat: no-repeat;
            }
            
#nav ul li a.nav2.active {
            background-image: url("../images/home-red.jpg"); 
            background-repeat: no-repeat;

            text-decoration:none;
            font-size:0;

            }

And the HTML that results from all this (please excuse the Hebrew and the funky formatting caused by it, but you should be able to understand what is going on here besides that):

<div id="nav">
<ul><li><a class="nav68"  href="/contact" title="צור קשר" > צור קשר</a></li>
<li><a class="nav72"  href="/gallery" title="גלריה - תמונות יוגה" > גלריה</a></li>

<li><a class="nav13"  href="/articles" title="רשימת מאמרים" > מאמרים</a></li>
<li><a class="nav32"  href="/timetable" title="מערכת שעות" > מערכת שעות</a></li>
<li><a class="nav33"  class="active" href="/about" title="אודות המרכז" > המרכז ליוגה</a></li>
<li><a class="nav2"  class="last" href="http://yoga-center/" title="יוגה במסורת איינגאר - תל אביב" > הבית</a></li>
</ul>
</div>

The end result of this, if I did it correctly, would be that this would be displayed on the active item:

background-image: url("../images/home-red.jpg");

But I still see this:

background-image: url("../images/home-blue.jpg");

Can you see where I may have gone wrong?

2,204 Posts

Dimmy Reply #7, 18 years, 5 months ago

Yes you used :
<li><a class="nav[+wf.docid+]" [+wf.classes+]

but you need to use id instead off class for the nav part like this:
<li><a id="nav[+wf.docid+]" [+wf.classes+]

because now you have a double class call :
<a class="nav33" class="active"

if you still prefer class for the nav part (I do not see why because each link is unique so id can be used) you need to do it this way:
<li><a class="nav[+wf.docid+] [+wf.classnames+]"

that wil result in this:
<a class="nav33 active" and that can be used in css

hope this helps greets Dimmy

follow me on twitter: @dimmy01

245 Posts

towerofbabel Reply #8, 18 years, 5 months ago

Quote from: Dimmy at Apr 22, 2008, 01:58 PM

Yes you used <li><a class="nav[+wf.docid+]" [+wf.classes+]
but you need to use id instead off class for the nav part like this:
<li><a id="nav[+wf.docid+]" [+wf.classes+] because now you have a double class call :
<a class="nav33" class="active"
if you still prefer class for the nav part (I do not see why because each link is unique so id can be used) you need to do it this way:
<li><a class="nav[+wf.docid+] [+wf.classnames+]" that wil result in this:
<a class="nav33 active" and that can be used in css

hope this helps greets Dimmy

Hi Dimmy,

That got it, thanks.

I didn’t, I guess, have a good reason for changing it to class, I just felt it looked cleaner, but of course you are right that ID is fine due to each link being unique.