Forums (Obsolete)

Member

jonathanchauncey@fdle.state.fl.us - 12/19/2007 7:08:41 PM

Standard Compliant Horizontal Flyout menu (works in all versions of IE and Firefox)

Not sure how many of you will be familiar with Stu Nicholls site CSS Play (http://www.cssplay.co.uk/) but he has some really good menus built that are standards compliant. One in particular is a flyout menu that uses no javascript only a portion of CSS.

The problem wtih this menu system is it relies on IE Conditional statements so getting it to work in kentico was a bit of a pain. Here is how I did it...

******You will have to modify the source code of kentico *********

In the CMS Controls subproject you will need to modify the CMSListMenu.cs file.

1) Find the getItems method
2) Scroll all the way to the bottom of the method until you see where it appends </a> to the result string.

You want to append the IE 7 conditional statement to the </a>

The code should look like this -

if ((isHighlightedItem & !(DisplayHighlightedItemAsLink)) || (inactiveitem))
{
	result.Append("</span>");
}
else
{
	if (this.mProperties.DataSource.Tables[0].Select("NodeParentID = " + System.Convert.ToInt32(dr["NodeID"])).Length != 0)
	{
		result.Append("<!--[if IE 7]><!--></a><!--<![endif]-->");
	}
	else
	{
		result.Append("</a>");
	}
}

Now you need to catch the recursion and append the other conditional statements IF AND ONLY IF there is a sub menu.

// if there is any child, create a UL (submenu)
if (this.mProperties.DataSource.Tables[0].Select("NodeParentID = " + System.Convert.ToInt32(dr["NodeID"])).Length != 0)
{
	result.Append("<!--[if lte IE 6]><table><tr><td><![endif]-->");
	result.Append(GetItems(System.Convert.ToInt32(dr["NodeID"]), indentLevel + 1));
	if ((isHighlightedItem & !(DisplayHighlightedItemAsLink)) || (inactiveitem))
	{
		result.Append("<!--[if lte IE 6]></td></tr></table><![endif]-->");
	}
	else
	{
		result.Append("<!--[if lte IE 6]></td></tr></table></a><![endif]-->");
	}
	// Indent the </LI> by indentLevel + 1
	for (i = 0; i <= indentLevel + 1; i++)
	{
		result.Append("\t");
	}
}

Now for the CSS (You may have to modify this to look correctly such as changing the margins a bit and colors)

.menu {
	margin:-66px 0px 0px 0px;
	position:absolute;
	z-index:2000;
}

.menu img {
	margin:0px 0px -2px 0px;
}


.menu ul {
	width:161px;
	list-style-type:none;
	list-style:none;
	background:#131313;	
}

/* hack for IE5.5 */
* html .menu ul { margin-left:-16px; margin-left:0; }

.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

.menu ul li {
	width:161px;
	position:relative;
}

.menu ul li a {
	color:#fff;
	font-size:12px;
	font-style: normal;
	font-weight: bold !important;
	text-decoration:none;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	display:block;
}

.menu ul li a:hover {
	color:#fff;
	background:#32312d;
	font-size:12px;
	font-style: normal;
	font-weight: bold !important;
	text-decoration:none;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	display:block;
}

/* hack for IE5.5 */
* html .menu a, * html .menu a:visited { 
	color:#fff;
	font-size:12px;
	font-style: normal;
	font-weight: bold !important;
	text-decoration:none;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	display:block;
}
/* style the link hover */
* html .menu a:hover {
	color:#fff;
	background:#32312d;
	font-size:12px;
	font-style: normal;
	font-weight: bold !important;
	text-decoration:none;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	display:block;
}

/* ****** THIS IS FOR LINKS THAT ARE INACTIVE ****** */
.menu ul li span {
	color:#fff;
	font-size:12px;
	font-style: normal;
	font-weight: bold !important;
	text-decoration:none;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	display:block;
}

.menu ul li span:hover {
	color:#fff;
	background:#32312d;
	font-size:12px;
	font-style: normal;
	font-weight: bold !important;
	text-decoration:none;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	display:block;
}

/* hack for IE5.5 */
* html .menu span, * html .menu span:visited { 
	color:#fff;
	font-size:12px;
	font-style: normal;
	font-weight: bold !important;
	text-decoration:none;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	display:block;
}
/* style the link hover */
* html .menu span:hover {
	color:#fff;
	background:#32312d;
	font-size:12px;
	font-style: normal;
	font-weight: bold !important;
	text-decoration:none;
	padding-left: 9px;
	padding-right: 9px;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	display:block;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
	visibility:hidden;
	position:absolute;
	top:0;
	left:161px;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul {
	visibility:visible;
}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {
	visibility:hidden;
}

/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
	visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
	visibility:visible;
}

/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
	visibility:visible;
}

Add the CSSListMenu webpart to your page and wrap it in a div with a class menu and you should be good to go...

Member

sahuspilwal1981-hotmail - 3/11/2009 7:18:10 AM

RE:Standard Compliant Horizontal Flyout menu (works in all versions of IE and Firefox)

Hi Jonathan,

I'm familiar with Stu Nicholls menu designs. I'm in the process of incorporating the below menu into my site using the CMSListMenu web part.

http://www.cssplay.co.uk/menus/pro_left_right_line.html

I took his example code and used my images and styling to create my navigation in HTML first then went through the process of importing the styles into CSS and the webpart on my master page template. Everything works in IE 7, FireFox, Safari & Opera however IE6 is still an issue. This menu uses the same conditional statements you explain in your previous post. I'm now using version 4.0 and for the life of me cannot find the GetItems method you mentioned. Are you aware of the HTML envelops section in the properties page for web parts? Do you think this is something I could use to insert the conditional statements?

Any feedback would be greatly appreciated.

Kind regards,
Sahus Pilwal


Kentico Developer	kentico_helenag - 3/12/2009 8:24:37 AM RE:Standard Compliant Horizontal Flyout menu (works in all versions of IE and Firefox) Hi Sahus, if you would like to change the GetItems method you would need to have full source code (Server License with Source Code). If you have it it is in: ~ \CMSControls\Navigation\CMSListMenu.cs Best regards, Helena Grulichova

Member

sasdaman - 3/13/2009 8:10:39 AM

RE:Standard Compliant Horizontal Flyout menu (works in all versions of IE and Firefox)

Hi Helena,

Thanks for the reply.

Having created a new post regarding these condition statements I require, Martin Dobsicek has stated I can do the following:

http://devnet.kentico.com/Forums/f36/t7311/CMSListMenu-IE6-fix.aspx

Is this correct? From what Martin is saying I can do this in any version.

Kind regards,
Sahus Pilwal


Kentico Developer	kentico_helenag - 3/17/2009 8:53:51 AM RE:Standard Compliant Horizontal Flyout menu (works in all versions of IE and Firefox) Hi Sahus, these are two approaches and Martin’s one does not need the source code. You may use it without worries. Best regards, Helena Grulichova