Confuse about dropdown menus

18 Posts

yami56 Reply #1, 17 years, 7 months ago

Hi to everyone and sorry for this silly question.

basically i have the following CSS Style

#topPan ul{width:510px; height:32px; position:absolute; top:126px; right:0px;}
#topPan ul li{float:left; width:81px; height:32px; padding:0 0 0 2px;}
#topPan ul li a{display:block; width:79px; height:32px; background:url(../images/menubg-normal.gif) 0 0 no-repeat #6c6900; color:#656565; font-size:11px; font-weight:bold; line-height:32px; text-transform:uppercase; text-align:center; text-decoration:none;margin-right:1px;}
#topPan ul li a:hover{background:url(../images/menubg-hover.gif) 0 0 no-repeat #7E7B00; color:#7C7900; text-decoration:none;}

#topPan ul li.active{display:block; width:79px; height:32px; background:url(../images/menubg-hover.gif) 0 0 no-repeat ; font-size:11px; font-weight:bold; line-height:32px; color:#7C7900; text-decoration:none; text-transform:uppercase; text-align:center;}

#topPan ul.dropdown{width:510px; height:19px; position:absolute; top:162px; right:0px;}
#topPan ul.dropdown li{float:left; width:79px; height:19px; }
#topPan ul.dropdown li a{display:block; width:79px;background:url(../images/vertical-dot.gif) 100% 0 no-repeat ; color:#3E3E3E; font-size:11px; text-decoration:none; text-align:center; line-height:25px;} 
#topPan ul.dropdown li a:hover{text-decoration:none; background:url(../images/vertical-dot.gif) 100% 0 no-repeat ; color:#7C7900;}

#topPan ul.dropdown li.verticallinenone a{display:block; width:79px;background:#fff; color:#3E3E3E; font-size:11px; text-decoration:none; text-align:center; line-height:22px;} 
#topPan ul.dropdown li.verticallinenone a:hover{text-decoration:none; background:#fff; color:#7C7900;}

and using the following to call my menu

         
[[Wayfinder? &startId=`0` &level=`3` &hereClass=`active` &innerClass=`dropdown` &rowTpl=`topmenus`]]

and my chunk tpl is

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

my problem is when i test my site and for example i click on a link with 4 sub-links the whole thing goes haywire

as you can see services is not showing correctly and also services has 4 more sub-pages.

the correct version is as follow

also my active class does not seems to be working fine either. i was wondering if any one can be kind enough and help me out with this problem.

many thanks

18 Posts

yami56 Reply #2, 17 years, 7 months ago

any one??

1,161 Posts

Photowebmax Reply #3, 17 years, 7 months ago

Did you get this menu working on a static site without the Wayfinder snippet?

There is a lot of CSS here. I find testing stuff like this on a very simple static page helps isolate any issues before I add the MODx components. This way you know your main code validates correctly and that the CSS is working...

18 Posts

yami56 Reply #4, 17 years, 7 months ago

HI and thanks for your reply

yes it does work on a static site. i usually design the static site first and then i will port it into modx.

☆ A M B ☆
2,213 Posts

AMDbuilder Reply #5, 17 years, 7 months ago

Could you compare the modx output to the static version. I suspect there is something missing from the output that is breaking the menu.

It would also be nice to see the working html.

AMDbuilder

Patrick | Server Wrangler
About Me: Website | Tweets | MODX Hosting

18 Posts

yami56 Reply #6, 17 years, 7 months ago

I have compared them both. on the static this is what i have

	<ul>
		<li class="active">Home</li>
		<li><a href="#">About us</a></li>
		<li><a href="#">Support</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">ideas</a></li>
		<li><a href="#">Contact</a></li>
	</ul>

	
	<ul class="dropdown">
		<li><a href="#">internal</a></li>
		<li><a href="#">more info</a></li>
		<li><a href="#">tips</a></li>
		<li class="verticallinenone"><a href="#">purchase</a></li>
	</ul>

and on Modx

	<ul>
		<li class="home">Home</li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Register</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Contact</a></li>
	</ul>

as you can see there is no sign of first of all DROPDOWN class. Also if you look at the image for the my modx site Services image is corrupted.
Also i will try to upload the static site.

18 Posts

yami56 Reply #7, 17 years, 7 months ago

I think main issue here is i am not calling wayfinder correctly.

do i need to have 2 sets of tpls. what i mean is 1 for parent like this

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

and one for sub nav (i am not sure how to call it)

241 Posts

bob1000 Reply #8, 17 years, 7 months ago

I think there are a few issues going on here.

For one, the wrapper placeholder is missing from your &rowTpl chunk. If you look at the example in the documentation:

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

The [+wf.wrapper+] placeholder is used to hold the submenu:

[+wf.wrapper+] - where to insert a submenu

If you put that into your chunk you should see the submenu output.

In your Wayfinder call you have &hereClass=`active`. "active" is the default value so you don’t need that. If you use the &innerClass parameter, I believe you need to include an &innerTpl chunk.

I don’t think your "Services" image is corrupted, it looks as thought the image is being included twice for some reason. The upper image of the two is offset 2 pixels to the right, which is the same amount of left padding you have on the <li> element. I’d have to look at a live example to see why.

18 Posts

yami56 Reply #9, 17 years, 7 months ago

many thanks for your reply.

ok now the problem is my dropdown service should be after the mainmenu

this is the correct format
<ul>

	<ul>
		<li class="active">Home</li>
		<li><a href="#">About us</a></li>
		<li><a href="#">Support</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">ideas</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	
	<ul class="dropdown">
		<li><a href="#">internal</a></li>
		<li><a href="#">more info</a></li>
		<li><a href="#">tips</a></li>
		
	</ul>

as you can see the dropdown format class is after the first ul, however with the settings i have it sits inside the menus class

 <ul><li>
   <a href="http://localhost/apc/" title="Welcome" >Home</a>
   
</li>
[b]<li class="active">
   <a href="/apc/index.php?id=4" title="Services" >Services</a>

   <ul class="dropdown"><li>
   <a href="/apc/index.php?id=7" title="United Kingdom" >United Kingdom</a>
   
</li>
<li>
   <a href="/apc/index.php?id=8" title="Australia" >Australia</a>
   
</li>
<li>
   <a href="/apc/index.php?id=9" title="Canada" >Canada</a>

   
</li>[/b]
<li class="last">
   <a href="/apc/index.php?id=10" title="United States" >United States</a>
   
</li>
</ul>
</li>
<li>
   <a href="/apc/index.php?id=6" title="Register" >Register</a>
   
</li>
<li>

   <a href="/apc/index.php?id=2" title="News" >News</a>
   
</li>
<li class="last">
   <a href="/apc/index.php?id=3" title="Contact" >Contact</a>
   
</li>
</ul>

i just highlighted the code i was telling.

18 Posts

yami56 Reply #10, 17 years, 7 months ago

here is the original static site