Add or remove items in Anylink CSS Menu

[martinS]

1) Script Title: Anylink CSS Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

3) Describe problem: I am hoping someone can help with this.

I am attempting to add or remove items from a menu, actually as a result of an ajax request. The following code is just to demonstrate how I attempt this. Each <li> tag is given an id, and whilst this code works the removal of an item has no effect on the size of the shadow, and adding an item fails to apply the correct style:


<!--1st anchor link and menu -->
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Default Example</a></p>
<div id="submenu1" class="anylinkcss">
<ul>
<li id="list11"><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li id="list12"><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li id="list13"><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li id="list14"><a href="http://www.codingforums.com">Coding Forums</a></li>
<li id="list15"><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>

<!--2nd anchor link and menu -->
<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu2">Default Example</a></p>
<div id="submenu2" class="anylinkcss">
<ul>
<li id="list21"><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li id="list22"><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li id="list23"><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li id="list24"><a href="http://www.codingforums.com">Coding Forums</a></li>
<li id="list25"><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>

<script type="text/javascript">

anylinkcssmenu.init("anchorclass")

//to delete an element (but the shadow size remains the same)
var el = document.getElementById('list12');
el.parentNode.removeChild(el);

//to add an element (but the style is lost)
var parent = document.getElementById('submenu2');
var newDiv = document.createElement('li');
newDiv.setAttribute('id', 'list26');
newDiv.innerHTML = "<a href='http://www.javascriptkit.com/jsref/'>Another JavaScript Reference</a>";
parent.appendChild(newDiv);

</script>

Any help would be appreciated.

[ddadmin]

Well, at the minimum, after having added or removed elements from the Drop Down Menu code, you need to call anylinkcssmenu.init("anchorclass") again so certain measurements are updated. Now whether this is all you have to do depends on the details of when/how you're adding/removing elements.

[martinS]

Thanks for the reply, but calling anylinkcssmenu.init("anchorclass") again has the effect that the drop down menu disappears as soon as you mouse over it ...

[martinS]

Just to follow up on my earlier post, I thought I would try using AnyLink JS Drop Down Menu v2.0 instead. This makes it easier to manipulate the list, for example to add an item to the js list:

anylinkmenu1.items.push(["Another Reference", "http://www.javascriptkit.com/jsref/"]);

This has the advantage that the styles are retained, but suffers from the same problem - if you re-initialise with anylinkmenu.init("menuanchorclass") the list disappears as soon as you mouse over it.

Any ideas what might cause this?

[ddadmin]

Ah I see the problem now. When you call anylinkmenu.init("menuanchorclass") again, it assigns duplicate event handlers to the anchor link and drop down menu, resulting in the "immediately disappear" issue you described.

Instead of calling anylinkmenu.init("menuanchorclass") again after you've updated the menu contents (Anylink JS Menu version), what you can do is modify anylinkmenu.js slightly so certain measurements are not cached. Use the below modified .js file, then, check out the below full HTML to see an example of adding a new menu item to the drop down menu:


<link rel="stylesheet" type="text/css" href="anylinkmenu.css" />

<script type="text/javascript" src="menucontents.js"></script>

<script type="text/javascript" src="anylinkmenu.js">

/***********************************************
* AnyLink JS Drop Down Menu v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code
***********************************************/

</script>

<body>

<!--1st anchor link-->

<p><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu1">Default Example</a></p>

<a href="javascript:additem('anylinkmenu1', anylinkmenu1.items, ['Slashdot', 'http://www.slashdot.org'])">Add new item</a>



<script type="text/javascript">

//anylinkmenu.init("menu_anchors_class") //call this function at the very *end* of the document!
anylinkmenu.init("menuanchorclass")

function additem(dropmenuid, arr, el){
arr.push(el) //add new menu item content to menu array
var menuid=document.getElementById(dropmenuid)._internalID
var anchorobj=anylinkmenu.menusmap[menuid].anchorobj //references anchor link
var dropmenu=anylinkmenu.menusmap[menuid].dropmenu //references drop down menu
dropmenu.innerHTML=anylinkmenu.getmenuHTML(window[dropmenuid]) //repopulate drop down menu with updated contents
}

</script>

[martinS]

Excellent stuff - it works a treat. Many thanks for your help.

[philippesignoret]

I came upon this thread because I had the disappearing menu problem. In my case, I was loading a new menu into a div using Ajax, and then running anylinkcssmenu.init("anchorclass");. As was mentioned above, this was re-defining event handlers for the menus that already existed. These would stop working, and only the newly loaded ones would work. My solution was to check if the item existed in the menumap before adding the events:




setupmenu:function(targetclass, anchorobj, pos){
/* Only adds to menumap if it hasn't been added before. */
if( this.menusmap[targetclass+pos] == undefined )
{
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
var relattr=anchorobj.getAttribute("rel")
var dropmenuid=relattr.replace(/\[(\w+)\]/, '')
.
.
.


Hope this helps anyone with the same problem.

[genxstylez]

hi... can you explain more a bit on this matter please?

coz I m loading my contents from my nav bar into a div by ajax

and the contents contain anylinkmenu...

but when the contents are loaded into the div,

the css files are not loaded too, nor the js files...

I reckon it is the initialisation of anylinkmenu.

Please help~