PDA

View Full Version : Need some help with AnyLink JS Drop Down Menu v2.2



martinfamily2005
08-06-2010, 05:02 AM
1) Script Title: AnyLink JS Drop Down Menu v2.2

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

3) Describe problem: I am trying to do 2 things, but I need help.

a) I need the links in the drop down menu to open in a new tab, rather than the current tab. How can I do this?

b) I would like the menu to open to the LEFT of the image it is on ( on the facebook icon www.billboardfamily.com ). I have attached an image of how it should look.

http://www.billboardfamily.com/menu.png

Other than that this work perfectly!

ddadmin
08-06-2010, 06:49 AM
By new tab, do you mean just in a new window? Since the markup for the menu is just plain HTML, you can just add the desired target attributes inside the links, ie:


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/" target="_new">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com" target="_new">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>

For 2), inside the .js file, try changing:


if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
}

to just:


posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)

martinfamily2005
08-06-2010, 06:54 AM
I have this menu dropping down from an image, so I do not want ANY link on the actual image, which is what using the html way does. By new tab, I meant target="_blank", actually.

I just changed the lines in the .js file you suggested, and the menu moved left, but it still drops down, not like the image I attached... check it out: www.billboardfamily.com (the twitter icon under the search bar).

----- ALSO ------

I am having a MAJOR issue with the code in my <head>. The code:


<script type="text/javascript">

//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")

</script>

is making my footer on the page move up, leaving a white gap at the bottom of the web pages. When I remove this line, the drop down menu no longer works, obviously, but the page looks correct once again. Any idea what is going on with that?

martinfamily2005
08-07-2010, 04:33 AM
Can Anyone Help?

ddadmin
08-07-2010, 11:40 PM
Instead of "_blank", what if you specify target="_new" inside the menu links?


I just changed the lines in the .js file you suggested, and the menu moved left, but it still drops down, not like the image I attached... check it out: www.billboardfamily.com (the twitter icon under the search bar).

To get the drop down menu to actually appear to the left *and* aligned with the top of the anchor link, try making use of the rev="lr" attribute inside the anchor link:


<a title="Follow Us on Facebook" class="menuanchorclass" rel="anylinkmenu1" target="_blank" rev="lr"><img alt="Follow Us on Facebook" src="http://billboardfamily.com/wp-content/themes/mensa/assets/images/facebook_icon.png"/></a>

This should get the menu to drop in the correct location, though in order to get the menu links themselves to orient horizontally, you'll need to edit the CSS (ie:anylinkcssmenu.css) so the links are either floated to the left, or another method of your choice to get them to appear the way you want.


I am having a MAJOR issue with the code in my <head>. The code:

Inside anylinkcssmenu.css, make sure the default CSS for the shadow is present at the very end:


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}

martinfamily2005
08-08-2010, 04:59 AM
ok, here is the status.....

adding the shadow css fixed the related issue.

using the rev="lr" code made the menu move to the left, but not far enough for the css to make it display horizontally...no matter what I did to it.

Additionally, now, instead of being able to hover over the links and have them work, you have to go to the extreme left of the dropdown box ... try it out...hard to explain.

Also, changing the target, as specified, changed nothing....still opening in the same window.