asked on

Help with Hidden Menu using CSS

I'm trying to create a CSS driven menu that has a sub menu that only appears when either it or one of pages in the sub-menu are selected. The site is in liferay and is set up to where when a page is selected the "li" ,which contains the link, class is set as "selected" and when that page is not selected the class is set as "". I've tied setting this up several times with little success. Please see my code below and see what I'm missing. Thanks

//The HTML

<div id="communityMenu">

<div class="sort-pages modify-pages">
	<ul>
		#foreach ($nav_item in $nav_items)
			#if ($nav_item.isSelected())
				#set ($nav_item_class = "selected")
			#else
				#set ($nav_item_class = "")
			#end

			<li class="$nav_item_class">
				<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>

				#if ($nav_item.hasChildren())
					<ul class="$nav_item_class">
						#foreach ($nav_child in $nav_item.getChildren())
							<li>
								<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
							</li>
						#end
					</ul>
				#end
			</li>
		#end
	</ul>
</div>

</div>

//The CSS

/*--------Community Menu---------*/

#communityMenu{
	position:relative;
	width:160px;
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	float:left;
}

#communityMenu ul{
	margin:0;
	padding:0px;
	width:100%;
}

#communityMenu li{
	display:block;
	list-style-type:none;
	position:relative;
	font-size: 15px;
	font-family: "Arial", Helvetica, sans-serif;
	text-align:center;
	height:22px;
	background-color:#999;
	border-bottom:#FFF solid 1px;
	padding-top:3px;
}

#communityMenu li a:link, #communityMenu li a:visited{
	color:#FFF;
	font-weight:590;
	text-decoration:none;
	display:block;
	width:100%;
	margin:auto;
}

#communityMenu li a:hover{
	text-decoration:underline;
	color:#333;
}

/*#communityMenu ul li ul li{
	visibility:hidden;
}*/

#communityMenu ul li ul li .selected{
}

#communityMenu h2{
	display:block;
	position:relative;
	width:100%;
	background-color:#666;
	color:#FFF;
	height:20px;
	margin:0px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:17px;
	font-weight:normal;
	text-align:center;
	border-bottom:#FFF solid 2px;
} 

#communityMenu ul .selected li ul li{
	visibility:visible !important;
	background-color:#CCC;
	border:none;
	list-style-type:disc;
	height:auto;
	margin:0px;
	padding:0px;
}

#communityMenu ul li ul .selected li a{ 
	display:inline;
	color:#333;
	margin-bottom:0px;
	padding:0px;
	text-decoration:none;
}

#communityMenu ul li ul .selected li a:hover{
	color:#00F;
}

Open in new window

the_bill

I think the best thing for you to do is to create a variable, then loop through the parent items, if it has a child, loop through the child items, and set your variable to true if the child item is selected.
display the parent if your variable is true
Not sure if this will format correctly, but, in the else, check if it has child elements, loop through each one of those BEFORE printing out the li element

#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
#set ($nav_item_class = "selected")
#else
#if ($nav_item.hasChildren())
#foreach ($nav_child in $nav_item.getChildren())
#if ($nav_item.isSelected())
#set ($nav_item_class = "selected")
#end
#end
#else
#set ($nav_item_class = "")
#end
#end
<li class="$nav_item_class">
<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>

#if ($nav_item.hasChildren())
<ul class="$nav_item_class">
#foreach ($nav_child in $nav_item.getChildren())
<li>
<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
</li>
#end
</ul>
#end
</li>
#end

ASKER CERTIFIED SOLUTION

Robert Thomas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial