Simple menu with graphic using Wayfinder.

Hello, clever people!

So, I have to create a simple menu, it looks like . I have some questions:
1. Should I make this menu using another way (not using Wayfinder)?
2. How can I make it? (if you can, write Please brief solution, or give any links)
3. Where can I find webpages with similar navigation on Modx cms?

HTML code:

<div id="nav">
<ul class="navigation">
<li><a href="#" class="homeblog"></a></li>
<li><a href="#" class="galleryportfolio"></a></li>
<li><a href="#" class="aboutfeedback"></a></li>
</ul>
</div>


CSS code:

#nav {
margin: 0;
padding: 0;
position: relative;
left: -50px;
top:-73px;
}

ul {list-style-type: none;}

#navigation li {display:block;}
a.homeblog {
background-image:url(’../images/homeblog.png’);
background-position: 0 -117px;
display:block;
width:149px;
height: 40px;
position:relative;
left:227px;
top:0px;
}
a.homeblog:hover {background-position:0,-117px;}
a.homeblog:active {background-position:0, -117px;}

(and here is the similar code for other 2 buttons)


Thank you for any answers! I appreciate your help!

Looks like these will be nav links that do not change from page to page? You do not have to use Wayfinder or Ditto for a nav system that is not going to need to be dynamically generated. I sometimes do this with two different nav systems: just use the code for the top nav and use Wayfinder for a dynamically generated sidebar nav system.

This is a decision that needs to made beforehand of course. If you use a nav sprite image system that uses a javascript for rollover effects you need to know what these links will be as they are using images.

In your case you could remove that wrapping div nav and just use a <ul id="topNav"> to style the navigation. The markup could go right into your template.

Thanks a lot! I’ll try it.

The thing to remember is the there is no "right way" of doing things with MODx. MODx molds to personal decisions with ease.

Using graphics for nav links is a personal choice. On the one side you have the potential for greater "eye candy" when using graphics. Swapping graphics for roll over states can be done with pure CSS or with javascript. The trend these days is to use just one graphic for all the links, including the active and hover states. CSS and or javascript then zeroes in on the correct segment of the graphic to render individual link states. Using one graphic (known as a nav-sprite) takes care of the hesitation during hover states while the new graphic is hunted down and presented.

The downside is the work needed to build the nav-sprite. If the links need to be changed you have to go back and edit the graphic. The graphic will not scale along with user text size changes. I often see nav systems that use basic graphics and javascript: not really necessary when good use of CSS will do all of this with no scripting.

I find nav sprites are a good way to go when you have a short nav system that will have links that won’t need changing. For all the dynamic links Wayfinder is the way to go.