Wayfinder Configuration / Formatting

☆ A M B ☆
1,780 Posts

Frogabog Reply #11, 13 years, 2 months ago

"Sublist" is just an example of a classname for the sub menu.

There are a number of dropdown menus available, Google is your friend. "css dropdown menu" should give you plenty to wade through. Wayfinder will take care of all the standard classes and id's, but your CSS should power their visibility.

In the file attached is a decent on hover dropdown menu from Foundation 3 using HTML5 and CSS3 transitions, you can adjust as needed or run with it for your own menu. I tried to replace all the default styles back, but don't be surprised if it looks weird because I grabbed it from a working site. It's kinda chunky, so you'll want to adjust the widths and line heights, floats, etc. Also, some of the default styles are commented.

Noteworthy for this discussion is this part, the sublist:

nav#main_nav ul li ul.sublist

and the sub-sublist (third level):

nav#main_nav ul li ul.sublist li ul.sublist

There are actually 3 examples in the attached file. All Foundation versions.

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

52 Posts

ember1205 Reply #12, 13 years, 2 months ago

Thank you.

I went through my site in some more detail and realized that I actually have some of the pieces you were mentioning. My Wayfinder call is in my "Menu" chunk. But, my main template page calls the Menu chunk inside of a navigation wrapper called "menu". I'm starting to tear that apart a little bit to better understand the coding that is in place for the different pieces.

I will definitely go through the examples that you attached to see what I can make heads and tails of and potentially be able to learn from.

52 Posts

ember1205 Reply #13, 13 years, 2 months ago

I modded up the code on my site a little, and it seems that the "main" menu is not being tagged with a class correctly. The first entry contains only "<ul>" and not "<ul class="menu">". In fact, the "menu" class is being set within a "<div class="menu">" parameter.

My Wayfinder call (inside of a chunk):

[[!Wayfinder? &startId=`0` &rowTpl=`rowTpl` &innerTpl=`innerTpl` &hideSubMenu=`0` &level=2]]

The call to the Wayfinder menu chunk:

    <div id="menu">
        [[$SiteMenu2]]
    </div>

I've tried changing the "div" to "nav", but it doesn't seem to have an impact. What am I missing here?

793 Posts

ottogal Reply #14, 13 years, 2 months ago

The first entry contains only "<ul>" and not "<ul class="menu">".

You need the property &outerClass=`menu` in your Wayfinder call.

52 Posts

ember1205 Reply #15, 13 years, 2 months ago

Quote from: ottogal at Jul 09, 2013, 11:39 PM

The first entry contains only "<ul>" and not "<ul class="menu">".
You need the property &outerClass=`menu` in your Wayfinder call.</ul></ul>

I had manually changed the calls to force that and it didn't make any difference. Even with adding it as part of the call to set the class (which is does properly now, Thank You), it still doesn't impact how the menus show up.

When you are not logged in, you get five menu choices, right-justified on the page (which is what I want). Once you log in, the first menu choice moves all the way to the left and the pages that are children of that first page show in a row -under- them main row and before the second menu choice from the main menu. It is not treating that second set of menu items as a sub-menu that should be popped up.

52 Posts

ember1205 Reply #16, 13 years, 2 months ago

Ok. Some progress. I have managed to create a menu that will pop up, but I have two problems now.

1) The menu does not pop up on hover unless the parent item is active.

2) The first item of the pop up obscures the main menu item.

52 Posts

ember1205 Reply #17, 13 years, 2 months ago

Ok. MORE progress.

I realized that I was missing a formatting section in my CSS to hide the secondary menus from view and have corrected that. Now, I have two things to fix:

- The secondary menu pops up incorrectly. I need it to appear directly UNDER the main menu option that it is associated to WITHOUT disrupting the content already on the page. I find that I can make EITHER pop up to the right of the main menu option (so that it does not obscure the main menu option) or OVER the main menu option (obscuring the main menu option). Also, regardless of WHERE it appears, it causes the content already on the page to shift and move as it appears and disappears.

- One of my submenus is for a "Members" area. When not logged in, I would like to have the submenu display "Log in" and have that item NOT be in the submenu when the users are logged in. I presume that I could simply detect the user's state and put the option in if they are not authenticated through static XHTML.

52 Posts

ember1205 Reply #18, 13 years, 2 months ago

Minor "setback".

I have been doing all of my development and testing in Firefox and Chrome. When I tested the site out today with IE, I realized that the pop up menu pops up a "row" of menu choices and not a "column" like the other browsers.

☆ A M B ☆
1,780 Posts

Frogabog Reply #19, 13 years, 2 months ago

The issues with IE are likely due to the css. Wayfinder doesn't care what browser you use, it will use the css that you define. What version of IE did you test with? The examples I posted are from Foundation 2 which never was 100% IE friendly, although the site I used it on functions ok even in IE 7 (had to bend, as the client's work browser is IE 7) and the css really should work.

If you post your css, the Wayfinder call, your chunks (outerTpl, rowTpl, etc.), maybe someone will see what's wrong.

Insofar as your members login menu item, you'll want to dig into MODX Security/Permissions and plan to be confused before you become not confused. That, is another post topic all together although you may reference this recent thread https://forums.modx.com/thread/85469/howto-media-source-for-client-after-finishing-site#dis-post-471303

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

52 Posts

ember1205 Reply #20, 13 years, 2 months ago

I've been using "current" versions of everything. So, IE10 on Windows 7 would be the platform. I expect, like you said, that the CSS isn't "quite right" to satisfy the idiocies, er idiosyncrasies, of IE.

My menu chunk is called from within a template. That code looks like this:

<div id="page">
    <div id="menu">
        [[$SiteMenu2]]
    </div>
    <div id="content">
        [[$SiteMain]]
    </div>
        [[$SiteSidebar]]
    <div style="clear: both;"> </div>
    </div>
</div>

The Wayfinder call is:

[[!Wayfinder? &startId=`0` &rowTpl=`rowTpl` &innerTpl=`innerTpl` &outerClass=`menu` &innerClass=`submenu` &hereTpl=`menuHereTpl` &level=2]]

rowTPL:

<!-- rowTpl -->
<li[[+wf.id]] class="[[+wf.classnames]]">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

innerTpl:

<!-- innerTpl -->
<ul class="[[+wf.classnames]]">
[[+wf.wrapper]]
</ul>

menuHereTpl(to color the menu item and remove the hyperlink for the active choice):

<li[[+wf.classes]]><span class="menuhere">[[+wf.linktext]]</span>[[+wf.wrapper]]</li>

My CSS is:

/* Menu */

#menu {
	float: left;
	width: 980px;
}

#menu ul {
	float: left;
	margin: 0;
	padding: 20px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	display: block;
	float: left;
	border-right: 1px solid #AFD147;
}

#menu li ul {
   position: absolute;
   left:-999em; 
/*   width: 20em; /* Width to help Opera out */
   background-color: #AFD147;
   margin: -1em 0 0 10em;
}

#menu li:hover ul, #menu li.hover ul {
	display: block;
	position: relative;
	margin: 0;
	padding: 0; }
#menu li:hover li, #menu li.hover li {
	float: none; }
#menu li:hover li a, #menu li.hover li a {
	background-color: #AFD147;
	border-bottom: 1px solid #AFD147;
	color: #000; }
#menu li li a:hover {
	background-color: #AFD147; }

#menu a {
	display: block;
	float: left;
	padding: 0px 20px 0px 20px;
	text-decoration: none;
	text-align: center;
	text-transform: capitalize;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #8CB70E;
}

#menu a:hover { 
	text-decoration: none; 
}

#menu li:hover ul, #menu li.sfhover ul {
	left: auto;
}

#menu .current_page_item a {
}

#menu .last {
	border-right: none;
}

#menu .menuhere {
	display: block;
	float: left;
	padding: 0px 20px 0px 20px;
	text-decoration: none;
	text-align: center;
	text-transform: capitalize;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000;
        background-color: #AFD147;
}