Hi Folks,

 

Basically I am a modx newbie and have been asked to port an existing hard coded design using modx. So far so good as I never realised before how good modx is.

 

Anywho, I have been stumped by the current hard coded navigation.

 

The designer who coded it used divs. As such the navigation aspect is laid out below

 

<div class="menu_area">
     <div class="home_link float_left"><a href="index.html"><img src="images/home_replace.png" alt="Home" width="67" height="77" border="0" /></a> </div>
     <div class="flavours_link float_left"><a href="flavours.html"><img src="images/flavours_hover.png" alt="Flavours" width="67" height="77" border="0" /></a> </div>
     <div class="gallery_link float_left"><a href="gallery.html"><img src="images/gallery_hover.png" alt="Gallery" width="74" height="77" border="0" /></a> </div>
     <div class="logo_area float_left"> <a href="index.html"><img src="images/logo.png" alt="Logo" width="458" height="118" border="0" /></a> </div>
     <div class="contact_link float_left"><a href="contact.html"><img src="images/contact_hover.png" alt="Contactome" width="73" height="77" border="0" /></a> </div>
     <div class="blog_link float_left"><a href="blog.html"><img src="images/blog_hover.png" alt="blogome" width="60" height="77" border="0" /></a> </div>
   </div>

 

Now I have spent the last while reading up on Wayfinder which seems to be able to offer me a solution but atm I dont fully understand it.

 

Can anyone advise on how I will be able to output the navigation I require

Sometimes when I need formatting other than ordered lists I use Ditto as an alternative, it's output is more flexible IMO. You can set up the TPLs any way you want. Hope that helps.

Hi Folks,

 

Basically I am a modx newbie and have been asked to port an existing hard coded design using modx. So far so good as I never realised before how good modx is.

 

Anywho, I have been stumped by the current hard coded navigation.

 

The designer who coded it used divs. As such the navigation aspect is laid out below

 

<div class="menu_area">
     <div class="home_link float_left"><a href="index.html"><img src="images/home_replace.png" alt="Home" width="67" height="77" border="0" /></a> </div>
     <div class="flavours_link float_left"><a href="flavours.html"><img src="images/flavours_hover.png" alt="Flavours" width="67" height="77" border="0" /></a> </div>
     <div class="gallery_link float_left"><a href="gallery.html"><img src="images/gallery_hover.png" alt="Gallery" width="74" height="77" border="0" /></a> </div>
     <div class="logo_area float_left"> <a href="index.html"><img src="images/logo.png" alt="Logo" width="458" height="118" border="0" /></a> </div>
     <div class="contact_link float_left"><a href="contact.html"><img src="images/contact_hover.png" alt="Contactome" width="73" height="77" border="0" /></a> </div>
     <div class="blog_link float_left"><a href="blog.html"><img src="images/blog_hover.png" alt="blogome" width="60" height="77" border="0" /></a> </div>
   </div>

 

Now I have spent the last while reading up on Wayfinder which seems to be able to offer me a solution but atm I dont fully understand it.

 

Can anyone advise on how I will be able to output the navigation I require

 

 

 

First, using an unordered list would be better for your navigation. Not only it is more accessible, the code is cleaner, it is better for search engines and WayFinder likes it more too.

 

We want to take out the image reference and other attributes as we will take care of that with css. We will also add live text to the navigation for search engines and screen readers.

 

So your HTML would be something like this:

 

<ul id="menu_area">
     <li id="home_link"><a href="index.html">Home</a></li>
     <li id="flavours_link"><a href="flavours.html">Flavours</a></li>
     <li id="gallery_link"><a href="gallery.html">Gallery</a></li>
     <li id="logo_area"> <a href="index.html">Logo</a></li>
     <li id="contact_link"><a href="contact.html">Contact</a></li>
     <li id="blog_link"><a href="blog.html">Blog</a></li>
</ul>

 

 

Now we want to add that css to make your navigation look AWESOME.

 

In the code above i changed all your classes to IDs // this is so we can define the image and width using CSS

 

your new CSS will be something along the lines of:

 

 

@charset "UTF-8";
/* CSS Document */

#menu_area {
padding:0px;
margin:0px;
list-style : none;
display:inline;
overflow : hidden;
}

#menu_area li {
display:inline;
list-style:none;
}

#menu_area a {
float : left;
display : inline;
padding : 77px 0 0 0;
border : none;
outline : none;
overflow : hidden;
height : 0 !important ;
height /**/:77px; /* for IE5/Win only */
}

#menu_area a:hover, #menu_area a.hover {
background-position : 0 -77px;
}


#home_link a {
width : 66px;
background : url(images/home_replace.png) no-repeat top left;
}	

#flavours_link a {
width : 67px;
background : url(images/flavours_hover.png) no-repeat top left;
}

#gallery_link a {
width : 74px;
background : url(images/gallery_hover.png) no-repeat top left;
}	

#logo_area a {
width : 458px;
background : url(images/logo.png) no-repeat top left;
}

#contact_link a {
width : 73px;
background : url(images/contact_hover.png) no-repeat top left;
}	

#blog_link a {
width : 60px;
background : url(images/blog_hover.png) no-repeat top left;
}	

 

 

after that you just need to make your WayFinder Call and Chunks which will be fairly simple as it doesnt look like you will have any dropdowns.

 

Wayfinder Call:

 

<ul id="menu_area"
[[Wayfinder? &startId=`0` &level=`1` &parentRowTpl=`wf_parentRow`]] 
</ul>

 

You will only need to create one chunk "wf_parentRow". This is the template Wayfinder will use to output your list. You want to set it up like your hardcoded HTML but with placeholders for your content.

 

<li id="[[+alias+]]"><a href="[[~[[+id+]]~]]">[[+pagetitle+]]</a></li>

 

 

OR, you could just hardcode the navigation.

 

 

I think that is it...anyone else?

Thanks