Need Help With Example Dropdown Menu from CSSPlay

139 Posts

nootkan Reply #1, 15 years, 6 months ago

I am trying to make the example dropdown menu work with my site. I was under the impression that all I had to do was create the proper templates (from the muddypaws site) and place the wayfinder call inside my header chunk and shouldn’t have to change the css at all as it works fine on the demo site at muddy paws so why not on my site? I have added the debug parameter to the call (http://www.bottlecaplure.com/newsite/) but don’t understand any of the info provided so that doesn’t help me either. I am presently trying to read the almost complete guide to wayfinder but that also is a tough read and I’m not understanding any of it yet. Can anyone help as I tend to figure things out better if I can see the solution and work back from there to determine how it was acheived.

I don’t have any problems making the sliding doors example work but it isn’t a multi level menu.

1,161 Posts

Photowebmax Reply #2, 15 years, 6 months ago

Are you using Evo or Revo? Its important as the Revo snippet calls are different in the syntax...

139 Posts

nootkan Reply #3, 15 years, 6 months ago

Sorry I’m using evo 1.05. Still reading different posts and trying different solutions but still missing something. Probably something easy I assume that I’m overlooking. Another set of eyes maybe?

1,161 Posts

Photowebmax Reply #4, 15 years, 6 months ago

It looks like your menu does not have any CSS connecting with it? The menu templates need class names etc...

561 Posts

samba Reply #5, 15 years, 6 months ago

Photowebmax is right, check that. If you’re trying to replicate any Muddy/CSSPlay menu, you’ll need to have the exact call they’re using, or know enough about how to alter it.

Following on Photo’s point, one other quick thing to check comes to mind. Back when I tried one of those menus, I finally realized the Kyle was including additional CSS which had become part of the Evo installation in the Wayfinder snippet folder. Take a look at the demo of the menu, view source, and look at the HEAD section. See if additional CSS libraries are being included. He doesn’t tell you that anywhere in the demos (oops!), which are otherwise extremely handy.

There’s loads of material in here
assets/snippets/wayfinder/examples/cssplay
... that may be needed for some or all of those demos.

The other thing that makes using those examples tricky is that if you’re a MODx and/or CSS newbie, and you want to make significant changes to the menus, you’re in for a lot of painstaking work. If you’re not fluent with understanding the CSS cascade, it’s maddeningly difficult to handle some of Stu’s menus. I remember doing a drop-up(!) menu based on Stu’s stuff before I was as good at CSS as I am now, and that was seriously confusing, but I got it after lots of work and swearing.

In fact, for any CSS newbie, I’d advise staying away from dropdowns altogether until you have some serious CSS chops. But I suppose clients may be demanding them.

Nowadays I prefer to just get stuff right from Stu’s site. There are many newer examples there. Of course, that requires some facility with templating Wayfinder calls.

Good luck, D

MODx and Wordpress development
Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4

1,161 Posts

Photowebmax Reply #6, 15 years, 6 months ago

I am playing with several test sites using Revo. In one of them I have a minimal styled 2-level CSS dropdown menu working nicely with Wayfinder. The snippet call is a little different in Evo but its mainly the same. I can post the code for the templates, Wayfinder call, and CSS if you really get stuck.

I did this from the other end: getting the minimal Wayfinder call set up correctly to match the Wayfinder templates (out row, inner row, etc) and then looked at the html that was produced in the output. I then built my CSS from that, while paying attention to the generated divs, classes and child hover states etc. In the long run its easier for me to build this in this manner. Some of Stu’s CSS menus are quite complicated and getting them to function with Wayfinder is a task that is not that easy. Having some decent CSS skills really comes in handy with these menus.

That being said I am one of those who is cautious with using dropdown menus. I have witnessed too many users struggling with the mouse motions on some of the complicated drop-down-move-right menus i see out there. I prefer to use separate menus for major and minor links really. Stuffing every site link into one massive menu can be more trouble than its worth. More importantly these kinds of menus can cause some user frustration, a fact that can come as a surprise to many site designers...

561 Posts

samba Reply #7, 15 years, 6 months ago

That being said I am one of those who is cautious with using dropdown menus. I have witnessed too many users struggling with the mouse motions on some of the complicated drod-down-move-right menus i see out there. I prefer to use separate menus for major and minor links really. Stuffing every site link into one massive menu can be more trouble than its worth. More importantly these kinds of menus can cause some user frustration, a fact that can come as a surprise to many site designers...

Great Points! I like your reverse approach to developing those.

Yes, dropdowns can be great, but they can be tough! If a CSS newbie perseveres enough to get a Stu dropdown working, chances are very good that the client will say something like, "the text is too small", or "can you make the last level wider?", or "can you make the second level green instead of blue?", and the newbie is probably going to be dead meat. [Wordpress newbies who use dropdown menu plugins are totally dead meat when asked to change those; with MODx you have a fighting chance].

Stu is an incredible coder, doggedly determined to make any sort of menu work, no matter how wild. And this makes for some very complex code sometimes. And he goes beyond even some of the best CSS coders in striving to make his stuff work in every browser, even the lamest ones, and this can also add even more complexity. So approach with caution. But he’s great, and I’ve donated to him.

For one usability issue, moving from item to item and having the menu disappear, I’ve found that the hoverIntent JQuery plugin works great. It gives the user time to move while keeping the link "suspended" for a moment. And you can control how much delay and such. But it takes some at least minimal coding ability to set it up.

MODx and Wordpress development
Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4

139 Posts

nootkan Reply #8, 15 years, 6 months ago

Thanks guys for all the input. I haven’t made any changes to the css as I was under the impression that MODx wouldn’t put something in the package that wouldn’t work out of the box so to speak. I’m starting to realize that this isn’t the case (as is with the weblogin snippet and captcha).

I’m still struggling with this so I thought I’d post my code to date in case someone can see something wrong with it. I apologise for such a long post. Here it goes:
headerChunk

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="[(site_url)]" />
<meta name="generator" content="Dreamweaver 8" />
<meta http-equiv=”Content-Type” content=”text/html; charset=[(modx_charset)]” />
<title>[*pagetitle*] - [(site_name)]</title>
<link href="assets/templates/bcl/bcl.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://www.bottlecaplure.com/favicon.ico" />
</head>
<body>
<div id="frame">
<div id="contentheader"><img src="http://www.bottlecaplure.com/images/bclheader3.gif" alt="The Original Bottle Cap Lure Company"></div>
<div>[[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_basicdd`]]</div>

Css

/* common styling */
/* set up the overall width of the menu div, the font and the margins */

.menu {
font-family: arial, sans-serif; 
width:750px; 
margin:0; 
margin:20px 0 60px 0;
position:relative;
z-index:100;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left; 
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block; 
text-align:center; 
text-decoration:none; 
width:106px; 
height:30px; 
color:#000; 
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7; 
line-height:30px; 
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff; 
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block; 
position:absolute; 
top:31px; 
left:0; 
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block; 
background:#faeec7; 
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#dfc184; 
color:#000;
}

&cssTpl=`cssplay_basicdd`

<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/basic_dd.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/basic_dd_ie.css" />
<![endif]-->

&innerTpl=`cssplay_inner`

<ul>
    [+wf.wrapper+]
</ul>

&outerTpl=`cssplay_outer`

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

&parentRowTpl=`cssplay_parentRow`

<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
    <!--[if lte IE 6]>
    <a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
    <table><tr><td>
    <![endif]-->
    [+wf.wrapper+]
    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>

&rowTpl=`cssplay_row`

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

1,161 Posts

Photowebmax Reply #9, 15 years, 6 months ago

That CSS that targets the menu UL is not present here in the linked CSS in your <head>: <link href="assets/templates/bcl/bcl.css" rel="stylesheet" type="text/css" />

You either need to add it to that CSS file or provide an extra link to a separate CSS file if you want to keep the CSS menu separate from the main CSS.

139 Posts

nootkan Reply #10, 15 years, 6 months ago

Thanks for that. I’m confused though as to why you need the

<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/basic_dd.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/basic_dd_ie.css" />
<![endif]-->

in the &cssTpl=`cssplay_basicdd` parameter if you need to link to the stylesheets in the header also.

Now to figure out how to get it to look normal. Thanks again.