Simple Flyout list menu problems

701 Posts

bennyb Reply #21, 17 years ago

Have you got the static page working fine, it’s much easy to get this working first then implement into modx.

If so do you have a link to this and also a link to the page that has the menu generated by wayfinder.

54 Posts

One_PHANTOM Reply #22, 17 years ago

Here is the link to the static site:

www.squaredgepictures.co.uk/test

Here is the link to the Modx site:

www.squaredgepictures.co.uk/cmstemp

701 Posts

bennyb Reply #23, 17 years ago

Quote from: One_PHANTOM at Oct 02, 2009, 04:40 AM

Here is the link to the static site:

www.squaredgepictures.co.uk/test

Here is the link to the Modx site:

www.squaredgepictures.co.uk/cmstemp

Not had a good look and wont get much time today.

But at a quick glance. For your sub1 css change the top to top:0 and also add this #nav ul li {position:relative;}

2,314 Posts

anonymized-26931 Reply #24, 17 years ago

Hey One_PHANTOM,

i see you got it working - right?

54 Posts

One_PHANTOM Reply #25, 17 years ago

Bennyb:

Ok but what is this changing?

Sharbait:

very nearly there. Just need to work out how to position the second sub nav as it needs to be aligned with commissions.

54 Posts

One_PHANTOM Reply #26, 17 years ago

Quote from: bennyb at Oct 02, 2009, 06:06 AM

Not had a good look and wont get much time today.

But at a quick glance. For your sub1 css change the top to top:0 and also add this #nav ul li {position:relative;}

Ok I have done that and I see what that has done. Its making the sub nav position relative to the main nav yes? I do want to go back through everything in m head at some point & try and understand it fully. But that works perfectly. There is just a strange thing happening with the line lengths of the links now, they seem to be breaking?

http://www.squaredgepictures.co.uk/cmstemp/index.php?id=8

And I need to work out the active states still.
Thanks for everything so far.

701 Posts

bennyb Reply #27, 17 years ago

Try and give a width to
#nav ul

Say 150px

What do you want to do with the active items.

A good site to check out for menus is cssplay.co.uk

54 Posts

One_PHANTOM Reply #28, 17 years ago

Perfic!

I just need to make it so that it doesnt apply the active or "here" state to the whole submenu. I have tried &selfClass and &hereClass but they both seemed to do the same?

54 Posts

One_PHANTOM Reply #29, 16 years, 11 months ago

Hi Guys,

I know its been a while but Ive been working on the gallery section which has proved difficult but I have got there in the end. Now I just need to work out how to stop applying the here class to my sub nav until I have clicked on one of them of course.

My wayfinder call is as follows:

    [[Wayfinder? &startId=`0` &innerClass=`sub` &rowTpl=`wfRowTpl` &hereClass=`here`]]

This is my CSS:

body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#main {
	float: right;
	height: 370px;
	width: 709px;
	margin-top: 4px;
	background-image: url(../images/main.png);
}
#maininner {
	float: left;
	height: 370px;
	width: 709px;
	padding: 10px 5px 24px 10px;
}
#wrapper {
	width: 970px;
	height: 450px;
	margin-top: 147px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	position: relative;
	padding: 0px;
}
#header {
	height: 75px;
	width: 970px;
	background-image: url(../images/header.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#footer {
      height: 25px;
      width: 970px;
      float: left;
}
#nav {
	float: left;
        display:block;
}
#nav ul {
	line-height: 24px;
        margin: 0px;
        padding: 0px;
        width: 100px;
}
#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 {
	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 .sub {
	top: 0px;
	left: 120px;
	position: absolute;
}
#nav ul ul {
display:none;
}
#nav ul li.here ul {
display:block;
}
#nav ul li {
    position: relative
}
p.footer {
	line-height: 24px;
        font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: regular;
	color: #0099FF;
	text-decoration: none;
        text-align: right;
}
.footer a {
        line-height: 24px;
        font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: regular;
	color: #FFFFFF;
	text-decoration: none;
}
.footer a:hover {
        line-height: 24px;
        font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: regular;
	color: #0099FF;
	text-decoration: none;
        text-align: right;
}
p {
	line-height: 24px;
        font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: regular;
	color: #FFFFFF;
	text-decoration: none;
        text-align: left;
}

This is the site as it is working now:
http://www.squaredgepictures.co.uk/cmstemp/

As you can see the here class is being applied to the sub nav before I have clicked on it. I understand this is probably because it is running down the list from the main nav active state but how do I stop this?

Thanks again for all of your time.

Edit 1:

Here is the wfRowTpl chunk that simply adds | to my menus. I thought I should post it incase it helps? huh

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