Simple Flyout list menu problems

54 Posts

One_PHANTOM Reply #11, 17 years ago

Quote from: sharkbait at Sep 30, 2009, 11:20 AM

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

Ok I have put some static pages onto my server. Here is the address

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

Only Gallery goes somewhere. But this shows you how I achieved this in Dreamweaver. Like I say, probably wasn’t the best way to do it, and I never worked out how to make it appear on a hover.

701 Posts

bennyb Reply #12, 17 years ago

What are you trying to display on hover?

I don’t see any sub nav in the html?

54 Posts

One_PHANTOM Reply #13, 17 years ago

If you click on Gallery:
Portraits, Sport & Events appear.

These are now the child documents in my Gallery document on Modx. These are what I want to appear on hover.

On the test site the sub nav only appears in the HTML once you have clicked on Gallery. Was a bit of a bodge job.

2,314 Posts

anonymized-26931 Reply #14, 17 years ago

right now your structure is (which isn’t semantically correct, because the submenu is a separate UL instead of nested inside the menu-item "Gallery"):

  <div id="nav">

    <ul>
      <li><a href="Home.html">| home</a></li>
      <li><a href="Portfolio.html">| portfolio</a></li>
      <li><a href="Gallery.html" class="here">| gallery</a></li>
      <li><a href="Commissions.html">| commissions</a></li>
      <li><a href="Rates.html">| rates</a></li>

      <li><a href="Contact.html">| contact</a></li>
    
    </ul>
        <ul class="sub1">
         <li><a href="Gallery_Portraits.html">| portraits</a></li>
         <li><a href="#">| sport</a></li>
         <li><a href="#">| events</a></li>
    </ul>

  </div>

if you want it to be correct, it should be:

  <div id="nav">

    <ul>
      <li><a href="Home.html">| home</a></li>
      <li><a href="Portfolio.html">| portfolio</a></li>
      <li><a href="Gallery.html" class="here">| gallery</a>
            <ul class="sub1">
                <li><a href="Gallery_Portraits.html">| portraits</a></li>
                <li><a href="#">| sport</a></li>
                 <li><a href="#">| events</a></li>
            </ul>
      </li>
      <li><a href="Commissions.html">| commissions</a></li>
      <li><a href="Rates.html">| rates</a></li>
      <li><a href="Contact.html">| contact</a></li>
      </ul>

  </div>

54 Posts

One_PHANTOM Reply #15, 17 years ago

Wouldn’t that then push commissions down revealing the sub menu? I want the main menu to be unaltered and sub menu to appear next to the main menu aligned with whichever main menu item it belongs to. I wouldnt have a problem putting that code you listed myself, put the Wayfinder replaces this code does it not? As this is what I had on my template (all be it the incorrect symantics embarrassed

) but I had to replace this with the Wayfinder call.

Or have I done this completely wrong?

54 Posts

One_PHANTOM Reply #16, 17 years ago

Ok I edited my static page html to the correct version and that all works fine. I thought because it was nested it would physically push the rest of the menu down but obviously because I have my class (.sub1) it has staye din the correct place.

So how do I translate this over to Wayfinder?

I’m gradually getting there. wink

701 Posts

bennyb Reply #17, 17 years ago

Quote from: One_PHANTOM at Sep 30, 2009, 12:15 PM

Ok I edited my static page html to the correct version and that all works fine. I thought because it was nested it would physically push the rest of the menu down but obviously because I have my class (.sub1) it has staye din the correct place.

So how do I translate this over to Wayfinder?

I’m gradually getting there.

Ok now in place of the menu put this wayfinder call:

[[Wayfinder? &startId=`0` &innerClass=`sub1` &rowTpl=`wfRow.Tpl`]]

And create a chunk call wfRow.Tpl (of course you can call this what you like but it must match whatever is in the wwayfinder call).

Within this paste:

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

This maybe different if you still have the CSS working as if the active class is on the <a>. Basically all this does is tell way finder how to render each li and the only difference to the default template is i’ve added is the | which you’ve added before each title.

2,314 Posts

anonymized-26931 Reply #18, 17 years ago

Hi One_PHANTOM,

i’m a bit short of time right now, but i’ll look into it later

you can hide your Submenu by adding this to your css-file:

#nav ul ul {display:none;}

adding

#nav ul li:hover ul {display:block;}

will show it, when you hover "Gallery"

#nav ul li.youarehere ul {display:block;}

will let it stay open while you are on one of the gallery pages

...then you need to position your submenu UL with css where you want it to be displayed

54 Posts

One_PHANTOM Reply #19, 17 years ago

Brilliant guys. Thanks for that. I haven’t had the chance to implement any of that yet but it all looks sound so hopefully should be fine. I’ll let you know how it goes.

Thanks again.

54 Posts

One_PHANTOM Reply #20, 17 years ago

Ok, This seems to have worked so far. I have set the css to show the sub menu on active rather than hover, just because this was causing some issues and seemed tidier. My problem now is that I need 2 subnav classes as the subnav 1 refers to the position of the first submenu for gallery but as it is now the commissions submenu appears in the same place as the gallery submenu. Whereas I want that to align with commissions. I have the class for the subnav 2 and in Dreamweaver I simply applied this class to the commissions page. But wayfinder is making this a bit more difficult than that.

This is my wayfinder:

[[Wayfinder? &startId=`0` &innerClass=`sub1` &rowTpl=`wfRow.Tpl`  &hereClass=`here`]]

This is my chunk:

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

This is my relevant CSS including the subnav2 class:

}
#nav {
	float: left;
        display:block;
}
#nav ul {
	line-height: 24px;
        margin: 0px;
        padding: 0px;
}
#nav li a, #nav li a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;

}
#nav li a:hover, #nav li a:active {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	color: #0099FF;
	text-decoration: none;
}
#nav li.here a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	color: #0099FF;
	text-decoration: none;
}
#nav .sub1 {
	top: 125px;
	left: 124px;
	position: absolute;
}
#nav .sub2 {
	top: 148px;
	left: 124px;
	position: absolute
}
#nav ul ul {
        display:none;
}
#nav ul li.here ul {
        display:block;
}
#nav ul li:here ul {
        display:block;
}

I still need to sort out the youarehere state (which I have now named to just "here") which is still applying to all the submenu li’s. Here is the url again.
We are getting SO close. I don’t know if there is a simpler way using the flyout revisit menu on muddydogpaws but I still can’t get my head around applying it to my site. As that works the way I want this to work minus the coloured blocks.

See here:

http://www.muddydogpaws.com/development/wayfinder/examples/example-6.html

Thanks again for all your help so far.