2 level dropdown not working with Revo?

1,161 Posts

Photowebmax Reply #1, 15 years, 7 months ago

Hi,

I am testing a basic Wayfinder dropdown menu with Revo...

So far I have this (horizontal menu): HOME | ABOUT | GALLERY | ARTICLES | FRUIT

The ABOUT page has two child menus that will display as a vertical drop down when you mouse over the ABOUT link. Got that working nicely.
The FRUIT page has two child pages: APPLES and a container page ORANGES with two child pages BLOOD ORANGES and NAVAL ORANGES.

The issue I am having is that when you mouse over the top FRUIT link the drop down displays all four links vertically (APPLES, ORANGES, BLOOD ORANGES, NAVAL ORANGES). What I want is: you mouse over FRUIT and APPLES and ORANGES will drop down and then BLOOD ORANGES and NAVAL ORANGES will fly out from the side of ORANGES, indicating that these two are child documents to ORANGES.

I know I have more CSS work to do. But I want to make sure I am not missing stuff from my Wayfinder call. Do I just need to target the extra UL and Li’s with CSS or do I need more Wayfinder parameters? Any help will be great.

Thanks!

The markup looks like this:

  <div id="mainNavBox">
	<ul class="mainNav">
		<li  class="current_page_item"><a href="http://localhost:8888/RevoAlpha/" title="Home" ><span>Home</span></a></li>
	    <li ><a href="index.php?id=2" title="About" ><span>About</span></a>
		   <ul>
			<li ><a href="index.php?id=13" title="Staff" ><span>Staff</span></a></li>
	        <li ><a href="index.php?id=14" title="Job Openings" ><span>Job Openings</span></a></li>
	          </ul></li>
	<li ><a href="index.php?id=3" title="Gallery" ><span>Gallery</span></a></li>
	<li ><a href="index.php?id=9" title="Articles" ><span>Articles</span></a></li>
	<li ><a href="index.php?id=15" title="Fruit" ><span>Fruit</span></a>
		<ul>
			<li ><a href="index.php?id=16" title="Apples" ><span>Apples</span></a></li>
	        <li ><a href="index.php?id=17" title="Oranges" ><span>Oranges</span></a>
		       <ul>
			      <li ><a href="index.php?id=18" title="Blood Oranges" ><span>Blood Oranges</span></a></li>
	              <li ><a href="index.php?id=19" title="Naval Oranges" ><span>Naval Oranges</span></a></li>
	                 </ul></li>
	     </ul></li>
	</ul>
	</div>

My CSS looks like this:

#mainNavBox{
	border: 1px solid red;
	height:100px;
	margin:0 0 50px 0;}
	
.mainNav {
	margin: 0;
	padding: 0;
	height: 1em; }
	
.mainNav li {
	list-style: none;
	float: left; }
	
.mainNav li a {
	display: block;
	padding: 3px 8px;
	background-color: #blue;
	color: #fff;
	text-decoration: none; }
	
.mainNav li ul {
	 display: none; 
	 width: 10em; /* Width to help Opera out */
	 background-color: #69f;}
	
.mainNav li:hover ul, .mainNav li.hover ul {
	 display: block;
	 position: absolute;
	 margin: 0;
	 padding: 0; }
	
.mainNav li:hover li, .mainNav li.hover li {
	 float: none; }
	
.mainNav li:hover li a, .mainNavli.hover li a {
	 background-color: #69f;
	 border-bottom: 1px solid #fff;
	 color: #000; }
	
.mainNav li li a:hover {
	 background-color: #8db3ff; }
	
.current_page_item {
	 font-weight:bold;}

And my call looks like this:

[[!Wayfinder? &startId=`0` &outerTpl=`mainNavOuter` &rowTpl=`mainNavRow` &innerTpl=`mainNavInner` &innerRowTpl=`mainNavInnerRow` &hereClass=`current_page_item` &firstClass=`` &lastClass =`` ]]

1,161 Posts

Photowebmax Reply #2, 15 years, 7 months ago

OK, I think I have made some progress here.

I am only concentrating on the CSS right now.

I changed the width of the .mainNav li ul to 100% instead of a em value.

I then added the following CSS (still a work in progress) to hide and then reveal the second level of links with absolute positioning:

/* New CSS */	
	
.mainNav li:hover ul li ul,
	.mainNav li a:hover ul li a ul {
	visibility:hidden; 
	position:absolute; 
	height:0; 
	width:0;
	}
	
	.mainNav li:hover ul li a,
	.mainNav li a:hover ul li a {
	display:block; 
	background-color: #69f;
	 border-bottom: 1px solid #fff;
	 color: #000;
	}
	
	.mainNav  li:hover ul li:hover ul,
	.mainNav li a:hover ul li a:hover ul {
	visibility:visible; 
	position:absolute; 
	left:100%; 
	top:30px;
	width:100%;
	}

This seems to work. I did do some reading on Kongondo’s excellent Wayfinder guide and he details adding &level and &hideSubMenus to the snippet call. I tried this but got into trouble. My first level of menus would not show. I love Kongondo’s Wayfinder guide but I wish I could see the CSS that he was using. I am more comfortable with CSS than scripting etc. But CSS has to knit well with Wayfinder to get the results you want.

The other thing I have found in the forums describes using the ultimateParent parameter as well? This makes me a little unsure of the best approach here. Do I use a minimal Wayfinder call and rely on a lot of careful CSS to get the job done or is better to utilize more Wayfinder paremeters and chunks while keeping the CSS as brief as possible.

Overall I am not a big fan of complicated fly-out and drop-down menus. They can be difficult for some users to navigate with and then there is the whole specter of browser consistency?

But this is proving to be an interesting exercise so far...

EDIT: one issue is that the second level of links is creating an extra line for the two words.

I want :

NAVAL ORANGES

I get:

NAVAL
ORANGES

???

1,161 Posts

Photowebmax Reply #3, 15 years, 7 months ago

I changed the last bit of the CSS from

.mainNav  li:hover ul li:hover ul,
	.mainNav li a:hover ul li a:hover ul {
	visibility:visible; 
	position:absolute; 
	left:100%; 
	top:30px;
	width:100%;
	}

to:

.mainNav  li:hover ul li:hover ul,
	.mainNav li a:hover ul li a:hover ul {
	visibility:visible; 
	position:absolute; 
	left:100%; 
	top:30px;
	width:170%;
	}

I fiddled with that width: setting percentage to 170% seemed to do the trick. Setting it to 150% still made the text take two lines and 200% added unwanted space on the right hand side of the link block.

Curious no?