Creating an Active State in Navigation created with Sprites - No Wayfinder....

I’m a bit stumped on this one and I’ve searched a lot in this forum and on google.

I have a fairly simple site: http://www.starsdiprinzi.com

I didn’t design it, just built the html/css and modx deployment. They wanted the buttons to have a rollover glow on them so I used sprites and one image for the top level navigation. I really don’t know how to show the glow or active state in modx using this process.

Does anyone know of a tutorial? Snippet? Explanation anywhere on how to achieve this? I’m not a programmer at all. Just html and css. So, if there is a php solution, my simple mind will need it explained slowly and in great detail.

Any thoughts or help would be greatly appreciated.

Thanks all.

Easy. Wayfinder all by itself creates the simple unordered list you need. You can add the id attributes in a rowTpl chunk by using [+wf.id+] in the chunk tpl.

Thanks for the reply Susan - but I’m not using wayfinder at all. The navigation is hard coded in a very small site that only has a few buttons. Unless I’m just misunderstanding you....

Let me know.

What I’m saying is use Wayfinder. Otherwise you’ll have to have the menu hard-coded in every page with its own menu item given the necessary classname.

I suppose some kind of complicated PHx conditionals could be used, but just using Wayfinder would be so much simpler.

I sort of do this a lot.

I like to have two navigation systems on basic sites. Often the top, main navigation will just have five or so set links. If these links never change you can then build a fancy looking image using two rows of links, one for the active state and one for the hover state. Using one image (a nav-sprite) is a nice way of avoiding browser cache hesitation issues. You need to add all the css to account for the positioning of each active and roll over state. You can also add jQuery eye-candy animation flourishes to the links. The markup code for this nav system can then be added directly (or as a chunk) to your MODx template. If you need to change these links then you will need to change the graphic and the markup for the navigation in your template.

I always use Wayfinder to take care of dynamic menus though. You can use jQuery and CSS to add flourish to Wayfinder generated menus. But using a hand built nav-sprite graphic means you can really go to town creativity wise.

MODx lets you do many things in many different ways.

Thanks Susan. I now see what you’re saying. I can still use Wayfinder to generate the list which will call in the sprite styles I’ve already built. I’m just not completely sure of the steps to connect everything. Is there a tutorial somewhere that would walk me through it?

I know I’m not great with these things, but once I get it the lightbulb usually brightens up a bit.


Quote from: sottwell at Jul 28, 2010, 03:21 PM

What I’m saying is use Wayfinder. Otherwise you’ll have to have the menu hard-coded in every page with its own menu item given the necessary classname.

I suppose some kind of complicated PHx conditionals could be used, but just using Wayfinder would be so much simpler.

Check out http://www.muddydogpaws.com/development/wayfinder/features.html

I’m totally with Susan on this one - just remove the original hard coded menu and replace it with wayfinder.

Life will be much simpler after the initial learning curve (and usable on every other site with tweaks) - It also means that any future page/resource additions will be painless - the menu will automagically allow for the new items - you will only need to make use of some clever class names or better use id’s for each item that way you will get semantic css/html in your page... All you need do is come up with a naming convention for the sprites !

mm

I just don’t understand how put all of this together. I have no problem using Wayfinder when I’m using a very basic call and I can base all of my styles on the div that the menu resides in. But I don’t understand at all how I can get wayfinder to call the classes that I’ve created using chunks.

Here is the list that I hand coded into the menu:

<ul>
<li id="home"><a href="home" title="Stars di Prinzi Salon">Home</a></li>
<li id="vision"><a href="vision" title="Vision">Vision</a></li>
<li id="purpose"><a href="purpose" title="Purpose">Purpose</a></li>
<li id="passion"><a href="passion" title="Passion">Passion</a></li>
<li id="commitment"><a href="commitment" title="Commitment">Commitment</a></li>
<li id="love"><a href="love" title="Love">Love</a></li>
</ul>

I’ve given each li an id that I have a style for in my style sheet. How would I get wayfinder to use those id’s? Or, I can change the id’s to whatever wayfinder generates, but how do I do that?

Again, I’m sure this is very basic stuff for many of you, but I’m just not getting it. I read through the Modx Wayfinder Wiki and the Muddy Dog Paws stuff.

If anyone, can give me a nudge in the right direction, I would be more than grateful.

If I am thinking straight (its late) you could create a class called ’selected’ for each id

ie

#passion.selected

and then within that class move the sprite according to its selected state. Wayfinder will automatically add the ’selected’ class to them item in the unordered list.

For example:


Save the above into a document and then change each div’s class to see the effect.