Getting sprites working with wayfinder?

429 Posts

c-m Reply #1, 17 years, 8 months ago

I had a play with the CSS Text Based Navigation Bar With Sprite Image Code Generator that someone posted on these forums.

It generated the following code;

HTML

	<ul id="navigation">
		<li id="navigation-1"><a href="#" title="Home"><span>Home</span></a></li>
		<li id="navigation-2"><a href="#" title="Producten"><span>Producten</span></a></li>
		<li id="navigation-3"><a href="#" title="Advies"><span>Advies</span></a></li>
		<li id="navigation-4"><a href="#" title="Contact"><span>Contact</span></a></li>
	</ul>

CSS

/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/

ul#navigation {	
	width:750px;
	list-style:none;
	height:50px
}

ul#navigation li {
	display:inline
}

ul#navigation li a {
	height:50px;
	float:left;
	text-indent:-9999px;
	text-decoration:none
}

ul#navigation  li a span {
	float:left;
	display:block
}

ul#navigation li#navigation-1 a {
	width:189px;
	background:url(navigation.jpg) no-repeat 0px 0
}

ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a:hover {
	background-position:0px -50px
}

ul#navigation li#navigation-2 a {
	width:187px;
	background:url(navigation.jpg) no-repeat -189px 0
}

ul#navigation li#navigation-2 a:active,
ul#navigation li#navigation-2 a:hover {
	background-position:-189px -50px
}

ul#navigation li#navigation-3 a {
	width:187px;
	background:url(navigation.jpg) no-repeat -376px 0
}

ul#navigation li#navigation-3 a:active,
ul#navigation li#navigation-3 a:hover {
	background-position:-376px -50px
}

ul#navigation li#navigation-4 a {
	width:187px;
	background:url(navigation.jpg) no-repeat -563px 0
}

ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
	background-position:-563px -50px
}

This all works perfectly in a static HTML page, but how do I get it working with Wayfinder?

I have added the CSS to my stylesheet and added the <ul id="navigation"> </ul> to my template, with the wayfinder call in between. Obviously I have also uploaded my sprite to the same folder as my css. However despite all that, my menu does not show.

2,877 Posts

mrhaw Reply #2, 17 years, 8 months ago

Check out:
http://modxguru.com/diggmenu_wayfinder_config/
http://modxcms.com/forums/index.php/topic,13454.0.html
[zip] http://wiki.modxcms.com/images/f/fa/Wayfinder200_docs_v6.zip

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower

1,390 Posts

kongondo Reply #3, 17 years, 8 months ago

Hi,

This has been done before. I tried to look for the link but can’t find it. Having said that, it is always helpful to post your wayfinder call and the chunks you are using. This will help ascertain if the menu is being output at all or the problem is the CSS.

I will try and get that link. But the trick was to use &rowIdPrefix to assign unique ids to the li

EDIT: Found one link: http://modxcms.com/forums/index.php?topic=31755.0

cheers/k

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

429 Posts

c-m Reply #4, 17 years, 8 months ago

Ah right. I installed without the dummy pages so have no chunks at all other than footer.

I didn’t post my wayfinder call as it is just the default. I since added the &rowIdPrefix=`navigation-` to is now look like this;

     [!Wayfinder?startId=`0`&rowIdPrefix=`navigation-`!]

In my CSS the navigation items are listed as navigation-1, navigation-2 etc...

However it seems that only two of the image will show and my sprite is way over to the right despite me setting margins and padding to 0.

1,390 Posts

kongondo Reply #5, 17 years, 8 months ago

Quote from: c-m at Jan 27, 2009, 07:33 AM

Ah right. I installed without the dummy pages so have no chunks at all other than footer.

I didn’t post my wayfinder call as it is just the default. I since added the &rowIdPrefix=`navigation-` to is now look like this;
     [!Wayfinder?startId=`0`&rowIdPrefix=`navigation-`!]     
In my CSS the navigation items are listed as navigation-1, navigation-2 etc...

However it seems that only two of the image will show and my sprite is way over to the right despite me setting margins and padding to 0.

Did you have a look at the example link I posted above? Wayfinder will prepend the value of the rowIdPrefix to the document id, e.g. in your case, assuming the document "Producten" is id 30, it would appear like so in the html code:

<li id="navigation-30"></li>

You can then target those ids in your CSS. So, just make sure you get the document ids of all the documents you have in your menu - Home
Producten, Advies, Contact and change your CSS to target those documents. (i.e. change the navigation-1, etc unless of course those are the corresponding document ids of the docs in your menu)

For example for document producten, assuming it has document id 30:

ul#navigation li#navigation-30 a:active,
ul#navigation li#navigation-30 a:hover {
	background-position:0px -50px
}

Sorry I am in a rush...wish I could explain it better.. About the menu being way over....that’s likely a CSS issue. Probably get the menu working first then deal with that...

cheers/k

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

429 Posts

c-m Reply #6, 17 years, 8 months ago

Well I udated the CSS to match the document Ids that I want to serve from the menu:

/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/

ul#navigation {	
	width:750px;
	list-style:none;
	height:50px;
margin: 0;
padding: 0;
}

ul#navigation li {
	display:inline;
}


ul#navigation li a {
	height:50px;
	float:left;
	text-indent:-9999px;
	text-decoration:none;
}


ul#navigation  li a span {
	float:left;
	display:block
}

ul#navigation li#navigation-1 a {
	width:189px;
	background:url(navigation.jpg) no-repeat 0px 0
}

ul#navigation li#navigation-1 a:active,
ul#navigation li#navigation-1 a:hover {
	background-position:0px -50px
}

ul#navigation li#navigation-4 a {
	width:187px;
	background:url(navigation.jpg) no-repeat -189px 0
}

ul#navigation li#navigation-4 a:active,
ul#navigation li#navigation-4 a:hover {
	background-position:-189px -50px
}

ul#navigation li#navigation-12 a {
	width:187px;
	background:url(navigation.jpg) no-repeat -376px 0
}

ul#navigation li#navigation-12 a:active,
ul#navigation li#navigation-12 a:hover {
	background-position:-376px -50px
}

ul#navigation li#navigation-36 a {
	width:187px;
	background:url(navigation.jpg) no-repeat -563px 0
}

ul#navigation li#navigation-36 a:active,
ul#navigation li#navigation-36 a:hover {
	background-position:-563px -50px
}

The menu shows but because of what appears to be a 25-35px margin on the right, my final navigation button appears under the rest.