A bit confused...

132 Posts

motoxer4533 Reply #1, 18 years ago

Hi everyone. I’ve been lurking for quite some time now, but I’ve decided to register to start trying to add my help to the MODx community. Eventually I’d like to contribute to some documentation if I ever get to that level.

However, I’m having some trouble with the Wayfinder menu. Basically, I’m trying to create a 2 Level drop down menu. I’ve heavily modified a CSS Play menu, and you can see what it’s supposed to look like here --> http://www.culinaryvegetableinstitute.com/new/index.html The CSS is located at -->http://www.culinaryvegetableinstitute.com/new/css/nav.css .

Anyway, I went to the Muddy Dog Paws site and looked through the examples. I’ve tried using the examples there, but I can never get the exact look of what I have above, by modifying that CSS. So, I set out to try my own Wayfinder - and have failed miserably to this point.

This is what I should be getting:

But when I use the Wayfinder, I get no links on the links bar. This is what it looks like with Wayfinder:

I am 99% sure I am using the wrong calls in the Wayfinder Snippet in my template, but I honestly don’t know what to change it to. The snippet I’m using is:

[[Wayfinder? &startId=`0` &level=`0` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_basicdd`]]

And the chunks:

* cssplay_basicdd -
<link rel="stylesheet" media="all" type="text/css" href="assets/cvi/nav.css" />


* cssplay_inner -
<ul>
[+wf.wrapper+]
</ul>

* cssplay_outer -
<div[+wf.classes+]>
<ul>
[+wf.wrapper+]
</ul>
</div>

* cssplay_parentRow -
<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>

[+wf.wrapper+]

</li>

* cssplay_row -
<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Any help would be greatly, greatly appreciated.

1,390 Posts

kongondo Reply #2, 18 years ago

Hi motoxer4533,

welcome to modx!

Just a quick one, just looking at this in a hurry.....am sure you’ll get more help if you don’t get it from me...

For starters....just as a by the way, your CSS doesn’t seem to have the classes you specified in your Wayfinder call. E.g., I couldn’t find the classes "menu" and "hide" in your CSS that you have specified for &outerClass=`menu` and &parentClass=`hide`. These classes need to be in your CSS for styling to occur. Lack of these classes in your CSS should however NOT prevent Wayfinder to at least output a menu since you have the minimum call for Wayfinder to work, i.e. Wayfinder? &startId=`0`

The picture showing what you are getting wasn’t very clear, but it seems your menu is not being output at all?

More later.....

/k

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

1,390 Posts

kongondo Reply #3, 18 years ago

A bit more,

Have you checked in the backend that the documents you want to be output are actually published?

Where have you placed your Wayfinder call?

Is show in menu ticked for each of the documents (you can do this when you are editing them)?

Did you by any chance type your Wayfinder snippet call in a word processor like Word then copied and pasted it into your modx document/template? That can cause problems (happened to me once) since you may be copying other formatting elements as well. Try paste to a text editor like notepad then copy and paste from there.

Otherwise, your chunks and call look fine to me. I even tested them Wayfinder gave me a nice menu, except that it wasn’t styled according to your nav.css since like I said, "menu" and "hide" classes are missing. Maybe am missing something....hmmm

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

132 Posts

motoxer4533 Reply #4, 18 years ago

Quote from: kongondo at Sep 09, 2008, 04:37 PM

A bit more,

Have you checked in the backend that the documents you want to be output are actually published?

Where have you placed your Wayfinder call?

Is show in menu ticked for each of the documents (you can do this when you are editing them)?

Did you by any chance type your Wayfinder snippet call in a word processor like Word then copied and pasted it into your modx document/template? That can cause problems (happened to me once) since you may be copying other formatting elements as well. Try paste to a text editor like notepad then copy and paste from there.

Otherwise, your chunks and call look fine to me. I even tested them Wayfinder gave me a nice menu, except that it wasn’t styled according to your nav.css since like I said, "menu" and "hide" classes are missing. Maybe am missing something....hmmm

Thanks for the help. Seems I linked to the wrong stylesheet above. The stylesheet I am using is http://www.culinaryvegetableinstitute.com/new/css/ultimate_drop.css . I added a ".menu .hide" in the stylesheet, with a simple color change at the bottom of the sheet. Didn’t do anything, but I expected that since I didn’t really know what to add.

Each document is published, and they are ticked to show in the menu. I didn’t copy from Word, it actually came from the examples in the Wayfinder installation.

And finally, I changed the&parentClass to &parentClass=’top_link’ because in my stylesheet, that’s what I have set as the top level links.

If I view the source code of the modx page, it shows the menu is there. Here’s a snippet of what I mean.

<!-- start page -->
<div id="page">
<div class="menu">
    <ul>
        <li class="active"><a href="http://localhost/modx/" title="Home">Home</a></li>

<li><a  class="top_link" href="/modx/index.php?id=2" title="About">About</a>
    <!--[if lte IE 6]>
    <a class="sub" href="/modx/index.php?id=2" title="About">About
    <table><tr><td>
    <![endif]-->

    <ul>
    <li><a href="/modx/index.php?id=47" title="History">History</a></li>

<li><a href="/modx/index.php?id=48" title="Facilities">Facilities</a></li>

<li><a href="/modx/index.php?id=49" title="Our Chef">Our Chef</a></li>

<li><a href="/modx/index.php?id=50" title="Location & Directions">Location & Directions</a></li>

<li class="last"><a href="/modx/index.php?id=51" title="Links">Links</a></li>


</ul>

    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>

<li><a href="/modx/index.php?id=6" title="Events">Events</a></li>

<li><a  class="top_link" href="/modx/index.php?id=15" title="Team Building">Team Building</a>
    <!--[if lte IE 6]>
    <a class="sub" href="/modx/index.php?id=15" title="Team Building">Team Building
    <table><tr><td>
    <![endif]-->
    <ul>

    <li><a href="/modx/index.php?id=14" title="Content Management">Manage Content</a></li>

<li><a href="/modx/index.php?id=16" title="Ajax">Ajax</a></li>

<li><a href="/modx/index.php?id=22" title="Menus and Lists">Menus and Lists</a></li>

<li class="last"><a href="/modx/index.php?id=24" title="Extendable by design">Extendability</a></li>


</ul>

    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->

</li>

<li><a href="/modx/index.php?id=32" title="Earth-to-Table">Earth-to-Table</a></li>

<li><a href="/modx/index.php?id=33" title="Private Dining">Private Dining</a></li>

<li><a  class="last top_link" href="/modx/index.php?id=39" title="Contact">Contact</a>
    <!--[if lte IE 6]>
    <a class="sub" href="/modx/index.php?id=39" title="Contact">Contact
    <table><tr><td>
    <![endif]-->
    <ul>
    <li><a href="/modx/index.php?id=42" title="MODxCSS Wide">MODxCSS Wide</a></li>

<li><a href="/modx/index.php?id=43" title="MODxCSS">MODxCSS</a></li>

<li class="last"><a href="index.php?id=39" title="MODxHost">MODxHost</a></li>


</ul>

    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>


    </ul>

</div>

Any ideas?? huh

1,390 Posts

kongondo Reply #5, 18 years ago

Aha...since your source code shows that the menu is actually generated, I can say with about 90% certainty that the problem is with your CSS. I have gone ahead and tested your code with your CSS and I get the same results. A horizontal beige "empty" nav bar. If you are using FF and have the extension webdeveloper or firebug installed, turn off the CSS and you’ll see that your menu "shows".

So, the text is in your menu is maybe being pushed out or something...lemme have a look at the CSS....

/k

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

1,390 Posts

kongondo Reply #6, 18 years ago


/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} ....SNIP

The above chunk of code and what’s below it is keeping your menu off the screen (as aptly commented by the writer of the code wink

). The CSS looks like it really needs some editing and there seems to be some conflict. Will try my best to look further into it

/k

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

132 Posts

motoxer4533 Reply #7, 18 years ago

Quote from: kongondo at Sep 10, 2008, 09:27 AM

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} ....SNIP 
The above chunk of code and what’s below it is keeping your menu off the screen (as aptly commented by the writer of the code ). The CSS looks like it really needs some editing and there seems to be some conflict. Will try my best to look further into it

/k

Lol. I just modified a template from CSS Play, and that part of the CSS didn’t change anything no matter what I did, so I left it alone. I went ahead and completely removed from the comment (/* keep the ’next’ level invisible by placing it off screen. */) on down, but the menu didn’t change.

1,390 Posts

kongondo Reply #8, 18 years ago

Sometimes what I do in such cases is just to start on a fresh CSS.

In your case, you could probably do that. Do a very basic CSS file. Then, selectively pick the elements you want from the original CSS file (in your case the cssplay one). For instance, I did the following and got a nice horizontal menu using your chunks and snippet call but with modified CSS. It all depends on you though.

.menu {
width: 100%;
display: inline;
}

.menu ul li {
list-style: none;
margin: 0;
padding: 0;
}

At times the long non-wrapped CSS lines like what you have make be blurry-eyed rolleyes

lol. Anyway, am now certain that it’s your CSS. That’s what you need to work on to get the design you want.

It would also probably help matters if one can look at your test site,....link?

cheers

/k

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

132 Posts

motoxer4533 Reply #9, 18 years ago

Quote from: kongondo at Sep 10, 2008, 10:13 AM

Sometimes what I do in such cases is just to start on a fresh CSS.

In your case, you could probably do that. Do a very basic CSS file. Then, selectively pick the elements you want from the original CSS file (in your case the cssplay one). For instance, I did the following and got a nice horizontal menu using your chunks and snippet call but with modified CSS. It all depends on you though.
.menu {
width: 100%;
display: inline;
}

.menu ul li {
list-style: none;
margin: 0;
padding: 0;
}
At times the long non-wrapped CSS lines like what you have make be blurry-eyed lol. Anyway, am now certain that it’s your CSS. That’s what you need to work on to get the design you want.

cheers

/k

That sounds fair. I was hoping not to do that, since I have it already developed on static html pages. I guess that’s what I’ll go for then.

It would also probably help matters if one can look at your test site,....link?

I only have this on a local machine, so its not on the web anywhere... or else I would.

Thanks a ton for all of your help. I’ll be sure to come back if I run into more problems, and possibly add my $.02 to some threads, too laugh

moto

1,390 Posts

kongondo Reply #10, 18 years ago

Uh...no problem....am a bit tied up at the mo’ so couldn’t dig into it further (i.e. what exactly was wrong with the CSS, etc)...keep us posted though...

cheers

/k

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