Simple Flyout list menu problems

Hi Guys,

I have been searching for days but have not found an answer to what I need. I have very basic knowledge of html & css & this is my first time building a site in a CMS.

Basically I started building a site in Dreamweaver and managed to get the navigation how I liked. I have posted a screenshot of this navigation, produced in Dreamweaver. I produced this by creating a class for the sub nav in which the css told it where to position etc. Probably not the ideal way but it was the only thing that worked with my lack of knowledge (I’m a designer by trade so all this coding was rather daunting ).

Now I am using Wayfinder & am trying to achieve the same thing. I just want the sub menus to appear once clicked (or preferably hovered over) to the right of the main navigation at a distance I can specify. Is wayfinder the way to go for this or is their a simpler way of doing this?

This is the link to the test site so you can see what is happening at the moment.

http://www.squaredgepictures.co.uk/cmstemp/

There are only sub menus on Gallery and Commissions.

I’m also struggling to get the active, or "you are here" state to work. But maybe I can come back to this once I have resolved my prior issue.

Any feedback on this will be gratefully appreciated as this has been going on for a while now.

Thanks again for your time. I look forward to your replies.

HGi One_PHANTOM,

Is wayfinder the way to go for this or is their a simpler way of doing this?

no, Wayfinder is the way to go

seems like Wayfinder isn’t outputting the nested UL, can you post your Wayfinder-call

btw. here are some useful wayfinder links:

the great wayfinder e-book:
http://modxcms.com/forums/index.php/topic,34176.0.html

http://wiki.modxcms.com/index.php/Wayfinder

http://www.muddydogpaws.com/development/wayfinder/features.html

and the wayfinder forum:
http://modxcms.com/forums/index.php/board,182.0.html

Hi Sharkbait,

Thanks for the speedy reply. Here is my Wayfinder call.


[[Wayfinder? &startId=`0` &level=`2` &hideSubMenus=`TRUE`]]

I reset it to the basic function as I was playing around with different calls, as well as chunks, from the muddypaws site but wasn’t getting anywhere.So if I could have some guidance on what to add that would be brilliant.

Thanks for the links. I initially worked through 3 of the chapters on the Wayfinder guide but found myself not taking any of it in. i will have to have a good sit down with it one day though.

if you set "&hideSubMenus" to False (or don’t set that parameter at all), it will output your nested list, which you then can style with css to flyout on hover:

right now, it will only be displayed when that menu-item is active

Ok thanks.

I have removed that parameter. So how do I go about styling to fly out on hover, as well as once clicked on (in that case it should stay on the page, as on my screenshot)? Do I style using my existing style sheet or on a Chunk?

Sorry if these are stupid questions.

Also if you could help on the issue of active links that would be brilliant. I have set a class in my css for the active state.

#nav ul a.active

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-weight: bold;

text-transform: uppercase;

color: #0099FF;

This is basically the same as the hover states. But this doesn’t seem to do anything?

Thanks again for your time.

Quote from: One_PHANTOM at Sep 30, 2009, 10:58 AM

#nav ul a.active

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-weight: bold;

text-transform: uppercase;

color: #0099FF;

Wayfinder applys active to the li not the a, so change your CSS to:
EDIT
#nav li.active a {

}

is your menu working on a static page? have you got a link to a working example of the menu?

...right now the active list element got a class "active" applied which is a default setting of Wayfinder (unless you give it another class-name by adding the parameter e.g &hereClass=`newactivename`)

&hereClass: description: The hereClass will be applied to the current item and to each parent up the document tree.

so in your case, if you click on "Portraits" in "Gallery", the list item "Gallery" & "Portrait" will get the class "active", you could now add the parameter

&selfClass=`yourhereclassname`

to your call to add the class "yourhereclassname" just for the selected element

&selfClass: The selfClass will be applied to the current item only.

since the classes are applied right now to the list elements and not the ankers of your list, you need to add a custom template for your list-row...add

&rowTpl=`myrowtpl`

to your wayfinder-call and create a new Chunk "myrowtpl" with the content:

this should add the classes to the ankers...i hope ...or adapt your styles to style the list elements like benny posted

Hi bennyb

Thanks for your reply. I tried that but it still didnt work , so I had a look at the css through the web developer tool on firefox and just copied the order on there. Pretty much what you said but with the class after the li.

So:

#nav ul li.active a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #0099FF;
text-decoration: none;

That seemed to do the trick. Now I just need to stop it from highlighting the sub nav too. I am reading up on flyout menus, I still cannot get my head around the css for these.

Ah ok thanks Sharkbait. You kind of answered my question from the previous reply to bennyb. I will try this now.

Quote from: One_PHANTOM at Sep 30, 2009, 11:21 AM

Hi bennyb

Thanks for your reply. I tried that but it still didnt work , so I had a look at the css through the web developer tool on firefox and just copied the order on there. Pretty much what you said but with the class after the li.

So:

#nav ul li.active a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #0099FF;
text-decoration: none;

That seemed to do the trick. Now I just need to stop it from highlighting the sub nav too. I am reading up on flyout menus, I still cannot get my head around the css for these.

Yeah i put ul.active instead of li.active by mistake. Above post is now amended.

Ben