< (/thread/17984/tutorial-single-level-navigation-using-single-image-replacement) 1 (/thread/17984/tutorial-single-level-navigation-using-single-image-replacement) 2 (/thread/?thread=31755.

&i=1&page=2)

Tutorial: Single Level Navigation Using Single Image Replacement (/thread/17984/tutorial-single-levelnavigation-using-single-image-replacement)

tanmccuin Reply #1, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigationusing-single-image-replacement#dis-post-98531)

So, Last night i started to convert my design for a client over to MODx, it's a simple little Foxy Cart Boutique store with only about 6 products - perfect for Foxycart and MODx. They wanted to originally go with Monster, but i was able to convince them otherwise. So first things first was (http://forums.modx.com/user/? setting up the Navigation. user=29288)
13

The Single Image Rollover effect i've been using for these situations can be found here: http://ghettocooler.net/2007/05/31/simple-navigation-with-css-image-replacement/ (http://ghettocooler.net/2007/05/31/simple-navigation-with-css-image-replacement/) With only a minimal amount of modding i was able to get this up and working in MODx. 1. replacing my hardcoded navigation with Wayfinder REPLACE THIS: 1 2 3 4 5 6 7 8 9 1 0 <id"a" dvi=nv> ud"aiain> <li=nvgto" <ii=nv"<rf"et/Bls/>/i ld"a1>ahe=bls">et<a<l> <ii=nv"<rf"eer/>eer<a<l> ld"a2>ahe=jwly"Jwly/>/i <ii=nv"<rf"otc/>otc<a<l> ld"a3>ahe=cnat"Cnat/>/i <ii=nv"<rf"bu/>bu<a<l> ld"a4>ahe=aot"Aot/>/i <ii=nv"<rf"ealr/>ealr<a<l> ld"a5>ahe=rties"Rties/>/i <ii=nv"<rf"hlsl/>hlsl<a<l> ld"a6>ahe=woeae"Woeae/>/i <u> /l <dv /i>

WITH THIS: 1 2 3 <li=nvgto" ud"aiain> [Wyidrsatd``lvl``&oIPei=nvtm! !afne?trI=0&ee=1rwdrfx`aie`] <u> /l

I'm using the &level 1 as there are subpages for a few categories that i don't want to appear in the navigation. and rowIdPrefix to give each list item it's own specific id. This is nessessary for the single image navigation to function. Since i set the rowIdPrefix to be "navitem" the generated nav sans CSS will look something like this:

1 2 3 4 5 6 7 8 9 1 0 1 1 1 2

<id"a" dvi=nv> <li=nvgto" ud"aiain> <l u> <ii=nvtm"cas"cie>ahe=/ne.h?d2 ld"aie2ls=atv"<rf"idxppi=" <ii=nvtm"<rf"idxppi="tte ld"aie3>ahe=/ne.h?d3il= <ii=nvtm"<rf"idxppi="tte ld"aie4>ahe=/ne.h?d4il= <ii=nvtm"<rf"idxppi="tte ld"aie5>ahe=/ne.h?d5il= <ii=nvtm"<rf"idxppi="tte ld"aie6>ahe=/ne.h?d6il= <ii=nvtm"cas"at>ahe=/ne.h?d7 ld"aie7ls=ls"<rf"idxppi=" /l <u> <u> /l <dv /i>

Now if you followed the ghetto cooler tutorial at the top of the page, you should have your single nav image and your CSS, just make sure your CSS nav item ID's reflect the IDs you setup through wayfinder and you should be well on your way to a nice little single image nav using wayfinder. Of course, if you add any new navigation through MODx you'll need to rework your navigation image and CSS. The Last thing to do is to get your navigation to stay active on your active pages. This is difficult using the single image effect because just one CSS class like .active won't do the trick since we're using background-position to create the rollover effect and each nav item uses a specific

bg-position. What i decided to do was to use the suggestion @ ghetto cooler; to give each pages body a custom id, and use that as a CSS selector - but to do this, without having to handcode each page was to use MODx's internal template code to generate my page Ids - in my case, since the nav items, for instance "Belts" had multiple pages under them i needed an id that multiple pages could share, so i couldn't use the PAGETITLE, i instead used the alias, as multiple pages seem to be able to share the same alias. my template code looks like this:

<oyi=[ais]> bdd"*la*"

and my new rollover and active css looks like this:

1 2 3

uinvtm:oe,bd#etll#aie2a ll#aie2ahvroyBlsuinvtm{ bcgonoiinXxXx akrudpsto:XpXp }

Once that's all in place, and MODx replaces the template code with the page alias (in this case, Belts) you should have a perfectly nice single image rollover navigation tied to your MODx backend. Enjoy. ps. I'm rather new to Working with MODx and i've gotten great help from everyone here. I know this tutorial probably isn't the best and only way to do it, and i hope some of you will explain even better methods or if this wasn't clear enough, ask questions. But i wanted to give a little something back. Enjoy. -T

dev_cw Reply #2, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-usingsingle-image-replacement#dis-post-98532)

Nice tutorial. Thanks for posting it (http://forums.modx.com/user/? user=7231)

4,205

kongondo Reply #3, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigationusing-single-image-replacement#dis-post-98533)

Thanks T for this tut. Very well written! I have two observations: (http://forums.modx.com/user/? user=16183)
1,390

1 2 3

<li=nvgto" ud"aiain> !afne?trI=0&ee=1rwdrfx`aie`] [Wyidrsatd``lvl``&oIPei=nvtm! /l <u>

1. In the code above, why do you need to place the Wayfinder call inside the <ul>? I ask since the menu WF will generate will also have <ul> tags in its outermost container. You probably did this since you wanted to give the ul an id? You might as well have done this in the outerTpl, e.g.

1 2 3

<li=nvgto"+fcass] ud"aiain[w.lse+> [w.rpe+ +fwapr] <u> /l

I might be missing something here. My point is that you end up with a extra <ul> tags you probably don't need? 2. Secondly - the trick of giving the body tags of your documents an id. I am wondering if this

could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages in this respect? WF offers several classes to denote the active document. E.g. if I am not mistaken, WF will automatically give the active document a class "active". There's also the "selfClass". I could be wrong here. But the advantage I see here is that using the WF method, you would only have one CSS declaration to style all documents whenever they are active instead of having CSS hover and active rules for each and every document in your menu. I probably don't get it so I might be wrong. EDIT #1: I have re-read my second observation above and I have a feeling I am wrong...lemme read it one more time EDIT #2: Ignore the second comment above - I wasn't getting it EDIT #3: Seems I was right after all. See the post below. We can take advantage of Wayfinder's dynamically generated "active" class for documents that are current Again, very good effort! Thx for sharing... cheers/k

tanmccuin Reply #4, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigationusing-single-image-replacement#dis-post-98534)

Kongondo - You're right about the unnecessary UL, i wasn't feeling like figuring out how to setup my wf.class and wf.wrapper info last night so i just did what worked - but you're right, it makes sense to eliminate the unnecessary UL. tks for the heads up. (http://forums.modx.com/user/? I'm interested to hear if someone else has an idea on how to select the pages for active linking. user=29288)
13

kongondo Reply #5, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigationusing-single-image-replacement#dis-post-98535)

OK, Seems I was right after all - about my second comment above - regarding the use of WF's (http://forums.modx.com/user/? dynamically generated "active" class. user=16183)
1,390

I managed to make this work, without using the body tags, i.e.

<oyi=[ais]> bdd"*la*"

Like I said above, Wayfinder will automatically create an "active" class for any list/menu item that is currently being viewed. In addition, since we are using the &rowIdPrefix we have two selectors we can use. The id and the dynamic active class of the menu items. Armed with this info, for each document, I just added identical CSS rules to the "active" class and the a:hover like you did with the body tag. Here's a sample CSS code

1 2

dvnvgtoll#a7:oe,dvnvgtoll#a7.ciea i#aiainuinv1ahvri#aiainuinv1atv{ bcgonoiin6p8p akrudpsto:14x0x

In the above example my &rowIdPrefix=`nav` in my Wayfinder call The end result was a CSS sprite menu with the "persistent" hover state Like they say (OK, I know, cliche) - "there's usually more than one way to something in modx" Thanks again for this Tut T. cheers/k

tanmccuin Reply #6, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigationusing-single-image-replacement#dis-post-98536)

Fantastic - nice job, i'll be sure to use this in the future. Q: For my current setup, which has sub pages that aren't navigable through the main nav, but that i still need to keep the parent nav menu item highlighted - i'd have to add css values for every subpage, it could just be apples to (http://forums.modx.com/user/? situation it seems more efficient to give the bodies of parent and children the oranges, but for user=29288) same ID value ( the alias ) - or am i way off base 13 Thanks again for taking a look - the more i use MODx the more i really dig it.

c-m Reply #7, 3 years, 4 months ago (/thread/17984/tutorial-single-level-navigation-usingsingle-image-replacement#dis-post-98537)

Must of missed a trick here as I dont have it working.

(http://forums.modx.com/user/? CSS user=4429)

429

1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 4 0 4 1 4 2 4 3 4 4 4 5 4 6 4 7 4 8 4 9 5 0 5 1 5 2 5 3 5 4 5 5 5 6 5 7 5 8 5 9 6 0 6 1 6 2 6 3 6 4 6 5 6 6 6 7 6 8 6 9 7 0 7 1 7 2

u#a lnv{ wdh25x it:2p lstl:oe itsyenn hih:2p egt60x fotet la:lf } u#ai{ lnvl dslybok ipa:lc txnet99x etidn:99p txeoainnn etdcrto:oe } u#aia{ lnvl wdh25x it:2p dslybok ipa:lc } u#alpn{ lnviasa fotlf la:et dslybok ipa:lc } u#ainv1a{ lnvl#a hih:0x egt5p bcgon:r(.iae/a1jgorpap akrudul./mgsnv.p)neet00x } u#ainv1aatv, lnvl#a:cie u#ainv1ahvr{ lnvl#a:oe bcgonoiin25x0x akrudpsto:2pp } u#ainv2a{ lnvl#a hih:0x egt5p bcgon:r(.iae/a1jgorpa5p akrudul./mgsnv.p)neet00x } u#ainv2aatv, lnvl#a:cie u#ainv2ahvr{ lnvl#a:oe bcgonoiin25x0x akrudpsto:2p5p } u#ainv3a{ lnvl#a hih:0x egt5p bcgon:r(.iae/a1jgorpa10x akrudul./mgsnv.p)neet00p } u#ainv3aatv, lnvl#a:cie u#ainv3ahvr{ lnvl#a:oe bcgonoiin25x0p akrudpsto:2p10x } u#ainv4a{ lnvl#a hih:0x egt5p bcgon:r(.iae/a1jgorpa10x akrudul./mgsnv.p)neet05p } u#ainv4aatv, lnvl#a:cie u#ainv4ahvr{ lnvl#a:oe bcgonoiin25x5p akrudpsto:2p10x } u#ainv5a{ lnvl#a hih:0x egt5p bcgon:r(.iae/a1jgorpa20x akrudul./mgsnv.p)neet00p } u#ainv5aatv, lnvl#a:cie u#ainv5ahvr{ lnvl#a:oe bcgonoiin25x0p akrudpsto:2p20x }

HTML - navigation chunk 1 2 3 4 5 <ii=nv1>ahe=#il=HM"<pnHM<sa>/>/i ld"a"<rf""tte"OE>sa>OE/pn<a<l> <ii=nv2>ahe=#il=AOTU"<pnAOTU<sa>/>/i ld"a"<rf""tte"BUS>sa>BUS/pn<a<l> <ii=nv3>ahe=#il=SRIE"<pnSRIE<sa>/>/i ld"a"<rf""tte"EVCS>sa>EVCS/pn<a<l> <ii=nv4>ahe=#il=RCUTET>sa>ERIMN<sa>/>/i ld"a"<rf""tte"ERIMN"<pnRCUTET/pn<a<l> <ii=nv5>ahe=#il=CNATU"<pnCNATU<sa>/>/i ld"a"<rf""tte"OTCS>sa>OTCS/pn<a<l>

Wayfinder call 1 2 3 4 5 <li=nv> ud"a" !afne?trI=0&oIPei=nvgto`] [Wyidrsatd``rwdrfx`aiain! <u> /l

The site is a development site at http://www.presspointproofing.co.uk/easton (http://www.presspointproofing.co.uk/easton)

markhurd Reply #8, 3 years, 4 months ago (/thread/17984/tutorial-single-level-navigationusing-single-image-replacement#dis-post-98538)

@c-m Why the extra <span> in your links? You could probably yank that entirely and accomplish the (http://forums.modx.com/user/? just the <li> and <a>. same result using user=18374)
69

Make sure you give both the <li> and <a> a height. Here's my similar CSS from another project:

1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2

u#rmrai{ lpiaynvl fotet la:lf txnet10e etidn:00m bcgonoiin akrudpsto:00 bcgoneetorpa akrudrpa:neet } u#rmrailpiaynva{ lpiaynvl,u#rmra dslylc ipa:bok hih:2p egt6x } u#rmra:oe lpiaynvahvr{ bcgonoiin2p akrudpsto:06x } l#rmra ipiaynv2a{ wdh0p it:12x bcgonmg:ul".iae/ienvnvaotu.n" akrudiaer(./mgsst/a/a_buspg) } /rsfpiaynv#a /etormra

c-m Reply #9, 3 years, 4 months ago (/thread/17984/tutorial-single-level-navigation-usingsingle-image-replacement#dis-post-98539)

Thanks, I have removed the span tags and added image heights but my background is not displaying at (http://forums.modx.com/user/? all: user=4429)
429

Here is the CSS

1 2 3 4 5 6 7 8

hm,bd tloy{ mri:0 agn pdig adn:0 } bd oy{ fnaiyedn,Ailevtc,snei otfml:Vraara,Hleiaassrf fnie0x otsz:1p

9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 4 0 4 1 4 2 4 3 4 4 4 5 4 6 4 7 4 8 4 9 5 0 5 1 5 2 5 3 5 4 5 5 5 6 5 7 5 8 5 9 6 0 6 1 6 2 6 3 6 4 6 5 6 6 6 7 6 8 6 9 7 0 7 1 7 2 7 3 7 4 7 5 7 6 7 7 7 8 7 9 8 0 8 1 8 2 8 3 8 4 8 5 8 6 8 7 8 8 8 9 9 0 9 1 9 2 9 3 9 4 9 5 9 6 9 7 9 8 9 9 10 0 11 0 12 0 13 0 14 0 15 0 16 0

clr000 oo:#000 bcgon:#555 akrudddd } #aecnanr{ pgotie wdh6p it:90x mri:0xat agnpuo bcgonoo:fff akrudclr#fff } /***lyuoun*** ***aotclms***/ #edr{ hae hih:20x egt0p wdh6p it:90x bcgon:#ffful./mgshae.p)neet akrudfffr(.iae/edrjgorpa } /ETCLNVGTOA *VRIAAIAINBR //////////////////// //////////////////* u#a lnv{ wdh25x it:2p lstl:oe itsyenn hih:2p egt60x fotet la:lf } u#ai{ lnvl dslybok ipa:lc txeoainnn etdcrto:oe hih:5p egt0x } u#aia lnvl{ wdh:25x it2p dsly:bok ipalc hih0x egt:5p txeoain:nn etdcrtooe } u#ainv1a{ lnvl#a hih:0x egt5p bcgon:r(.iae/a1jgorpap akrudul./mgsnv.p)neet00x } u#ainv1aatv, lnvl#a:cie u#ainv1ahvr{ lnvl#a:oe bcgonoiin25x0x akrudpsto:2pp } u#ainv2a{ lnvl#a hih:0x egt5p bcgon:r(.iae/a1jgorpa5p akrudul./mgsnv.p)neet00x } u#ainv2aatv, lnvl#a:cie u#ainv2ahvr{ lnvl#a:oe bcgonoiin25x0x akrudpsto:2p5p } u#ainv3a{ lnvl#a hih:0x egt5p bcgon:r(.iae/a1jgorpa10x akrudul./mgsnv.p)neet00p } u#ainv3aatv, lnvl#a:cie u#ainv3ahvr{ lnvl#a:oe bcgonoiin25x0p akrudpsto:2p10x } u#ainv4a{ lnvl#a hih:0x egt5p bcgon:r(.iae/a1jgorpa10x akrudul./mgsnv.p)neet05p } u#ainv4aatv, lnvl#a:cie u#ainv4ahvr{ lnvl#a:oe bcgonoiin25x5p akrudpsto:2p10x } u#ainv5a{ lnvl#a hih:0x egt5p bcgon:r(.iae/a1jgorpa20x akrudul./mgsnv.p)neet00p } u#ainv5aatv, lnvl#a:cie

17 0 18 0 19 0 10 1 11 1 12 1 13 1 14 1 15 1 16 1 17 1 18 1 19 1 10 2 11 2 12 2 13 2 14 2 15 2 16 2 17 2 18 2 19 2 10 3 11 3 12 3 13 3 14 3 15 3 16 3 17 3 18 3 19 3 10 4 11 4 12 4 13 4 14 4 15 4 16 4 17 4 18 4 19 4 10 5 11 5 12 5 13 5 14 5 15 5 16 5 17 5 18 5 19 5 10 6 11 6 12 6 13 6 14 6 15 6 16 6 17 6 18 6 19 6 10 7 11 7 12 7 13 7 14 7 15 7 16 7 17 7 18 7 19 7 10 8 11 8 12 8 13 8 14 8 15 8 16 8 17 8

u#ainv5ahvr{ lnvl#a:oe bcgonoiin25x0p akrudpsto:2p20x } #iea sdbr{ hih:40x egt7p wdh3p it:20x fotih la:rgt mri:5p0x5p5x agn0x5p0x2p } #otn cnet{ hih:50x egt7p wdh0p it:40x lnegt8x iehih:1p mriet2p agnlf:25x mriih:20x agnrgt3p } #otr{ foe hih:4p egt2x wdh7p it:65x mriet2p agnlf:25x mriih:5p agnrgt0x lnegt8x iehih:1p mrio:5x agntpp bcgon:#fff akrudfff } /***otntls**** ****cnetsye***/ #otn1{ cneth mri:0 agn pdig adn:0 fnaiyedn,Ailevtc,snei otfml:Vraara,Hleiaassrf pdigbto:1p adnotm5x fnegt0 otwih:40 fnie2x otsz:2p clr911 oo:#8ce } #otn2{ cneth mri:0 agn pdig adn:0 pdigbto:1p adnotm5x fnaiyedn,Ailevtc,snei otfml:Vraara,Hleiaassrf fnegt0 otwih:30 fnie8x otsz:1p clr911 oo:#8ce } #otn cnetp{ mri:0 agn pdig adn:0 fnaiyedn,Ailevtc,snei otfml:Vraara,Hleiaassrf fnie0x otsz:1p clr000 oo:#000 } #otn cneta{ mri:0 agn pdig adn:0 fnaiyedn,Ailevtc,snei otfml:Vraara,Hleiaassrf fnie2x otsz:1p clr911 oo:#8ce txeoainoe etdcrto:nn } .adn pdig{ pdig0x2p0x2p adn:5p5x1p5x } .otradn foepdig{ pdigp0x1p5x adn:5x5p0x2p }

The website is here: http://www.presspointproofing.co.uk/easton/ (http://www.presspointproofing.co.uk/easton/)

markhurd Reply #10, 3 years, 4 months ago (/thread/17984/tutorial-single-level-navigationusing-single-image-replacement#dis-post-98540)

@c-m Your CSS is targeting an ID of "nav-1" but your source code is showing "navigation1". I made a quick change in Firebug and got your background image to show. Just make sure your image is positioned correctly (it appears to be a set of sprites). (http://forums.modx.com/user/? user=18374) You'll also want to put a negative text-indent on either the a or li element to hide the text. 69

< (/thread/17984/tutorial-single-level-navigation-using-single-image-replacement) 1 (/thread/17984/tutorial-single-level-navigation-using-single-image-replacement) 2 (/thread/?thread=31755.&i=1&page=2)