Universal CSS Navigation Menu Support Product Page

Dynamic menu feed

Asked 09 Jan 2011 17:49:13
2
have this question
09 Jan 2011 17:49:13 Berthold Hamburger posted:
Hi,

I'm having a page with a lot of H3 elements that have IDs attached to them and I want to feed those IDs dynamically to a context menu, so that if I add another H3 element, it will be automatically included in the context menu.
Is it possible to do this with the universal CSS navigation menu?

I'm fairly new to JavaScript and would like to know what you would consider the best method of achieving this?

Regards

Berthold Hamburger

Replies

Replied 10 Jan 2011 11:15:31
10 Jan 2011 11:15:31 Miroslav Zografski replied:
Hello Berthold,

If you are dynamically population the page with content there may be a way for you to populate a context menu build with universal CSS navigation menu. But the menu itself cannot gather page elements to display them.

Regards,
Replied 10 Jan 2011 12:19:45
10 Jan 2011 12:19:45 Berthold Hamburger replied:
Hi,

What would you consider the best way to pull the ID values from the document and save them either in an array or XML file that could be used by universal CSS navigation menu to populate the context menu?
Is Universal CSS Navigation Menu able to pull the menu data from an array?

Regards

Berthold Hamburger
Replied 11 Jan 2011 10:28:53
11 Jan 2011 10:28:53 Miroslav Zografski replied:
Hello Berthold,

The only way to create your menu dynamically is by using database table. Currently there is no support for Spry Data Set that can utilize an XML or HTML file as data supply.

Regards,
Replied 11 Jan 2011 19:34:39
11 Jan 2011 19:34:39 Berthold Hamburger replied:
Hi,

So I guess short of delving into PHP and making this a database application, the best would be to use the Jquery each () function, to pull the IDs from the H3 tag and append them as menu items to the Div of the context menu?

Regards

Berthold Hamburger
Replied 11 Jan 2011 22:17:40
11 Jan 2011 22:17:40 Berthold Hamburger replied:
Hi,

I solved with a small script:


//PopulateContextMenu: Script to pull Ids from tags and populate DMX context menu with them
function PopulateContextMenu(ContextSource, ContextTarget){
$(ContextSource).each(function(){
var IdName = $(this).attr('id');
var LinkName = $(this).html();
$(ContextTarget).append('<li title="' + LinkName + '">' + '<a href="#' + IdName + '">'+ LinkName + '</a></li>');
	})
}


Now, I would like the width of the context menu adjust to the widest menu entry and it should be centered in the menu frame. How can I do that?

Thanks

Berthold
Replied 12 Jan 2011 10:31:15
12 Jan 2011 10:31:15 Miroslav Zografski replied:
Hello Berthold,

Nice solution. Did not want to bring it to this point because I did not know how much you are familiar with JS.
OK, about the width of the menu and centering the text in elements you can use following css definition set in your page head section:
.dmxNavigationMenu .menu{
	width:auto;
	text-align:center;	
}


Regards,
Replied 12 Jan 2011 15:19:38
12 Jan 2011 15:19:38 Berthold Hamburger replied:
Hi Miroslav,

I added a little bit of intelligence to the script in order to select and format only H3 tags that have IDs assigned to them. Now I basically include the context menu on all my pages and populate and format it automatically whenever H3 tags contain IDs.

//PopulateContextMenu: Script to pull Ids from tags and populate DMX context menu with them
function PopulateContextMenu(ContextSource, ContextTarget){
$(ContextSource).each(function(){
	var IdName = $(this).attr('id');
	var LinkName = $(this).html();
		if (IdName != 0) // checks for existing ID. If var is empty, it won't apply the following commands. 
		{
			$(this).addClass('ContextMenuAnchor');
			$(ContextTarget).append('<li title="' + LinkName + '">' + '<a href="#' + IdName + '">'+ LinkName + '</a></li>');
		}
	})
}


Regards

Berthold

Reply to this topic