AnyLink JS Drop Down menu

[tbellamy08]

Hi,

We are creating a new Sharepoint Platform which requires drop down menus on the functional areas. We found the above Script which we like, however we need some tweaking.

Link to script: http://www.dynamicdrive.com/dynamici...pmenuindex.htm

The problems which we are trying to resolve, is that when the link is hovered over the menu appears further down the page if the vertical scroller is not set to the top. And if the zoom is set higher than 100% in the IE explorer it does not show at all. This is outlined in the notes of the script - •Menu repositions itself if too close to any of the window's four edges to avoid being obscured.


Ideally we want the menu to stay static under the text we have given the drop down to, and not appear elsewhere on the page. Can someone please help me on this matter

I have looked in the anylinkmenu.js file but there is quite alot of code and I do not have that level of knowledge to understand what needs adjusting.

Thanks
Thomas

[ddadmin]

Hmm I'm not sure I understand what the issue is. Are you saying the drop down menus do not appear anchored to the anchor link if the page is scrolled first? As far as:

Menu repositions itself if too close to any of the window's four edges to avoid being obscured.

That shouldn't have anything to do with the drop down menus not appearing where they should; quite the contrary actually.

Does the same issue occur on the DD demo page for you? If not, please post a link to the page on your site that contains the problematic script so we can check it out.

[bernie1227]

Hi,


The problems which we are trying to resolve, is that when the link is hovered over the menu appears further down the page if the vertical scroller is not set to the top. And if the zoom is set higher than 100% in the IE explorer it does not show at all. This is outlined in the notes of the script - •Menu repositions itself if too close to any of the window's four edges to avoid being obscured.

sounds a bit like a problem that can be fixed just with CSS, but the menu shouldn't be moving away unless you've somehow tweaked the script already and this has been the effect. Was the script working when you first implemented it? Please give us a link to the page so that we can check it out.

[tbellamy08]

Hi,

Unfortunately I cannot supply a link to the site, as its within an internal sharepoint estate for our business.

I can however supply screenshot's, do you have an email account I can send them too?

The code in the anylinkmenu.js file has not been modified at all, however the menucontents.js has which holds the links to the internal sites. below is an example;

var anylinkmenu1={divclass:'anylinkmenu', inlinestyle:'', linktarget:''} //First menu variable. Make sure "anylinkmenu1" is a unique name!
anylinkmenu1.items=[
	["Frontline Step 1 - 4", "https://portal.royalmailgroup.com/sites/A564/Recruitment/Frontline_1_4/default.aspx"],
	["Fronline Step 5 - 10", "https://portal.royalmailgroup.com/sites/A564/Recruitment/Frontline_5_10/default.aspx"],
	["Security Vetting", "https://portal.royalmailgroup.com/sites/A564/Recruitment/Security_Vetting/default.aspx"] //no comma following last entry!



The anylinkmenu.css file has the following;

.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: light grey;
}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Arial;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: lightgrey;
width: 200px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

.anylinkmenu a:hover{ /*hover background color*/
background: black;
color: white;
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}



/* ######### class for shadow DIV ######### */


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

[tbellamy08]

The menu appears when hovering over the link perfectly fine, however if you scroll down the page a little and then hover over it again it shows further down the page and not under the actual link.

[ddadmin]

Are your anchor links contained inside a DIV that's absolutely or relatively positioned? That could be the cause (however unlikely), which is why it's important to see the source code for the rest of the page. Can you zip up a full working page and post the file here?

[tbellamy08]

I have attached a zip file containing the source code from one of the pages i'm having an issue with.
Thanks

[tbellamy08]

Can anyone please help with my query?
Thanks

[ddadmin]

I checked the attached page previously actually, but unfortunately couldn't isolate the issue, as there's just too much going on on the page, plus broken local references to .js/ .css files that may be part of the issue. If you still need help please post a temporary working page that shows the problem online, even if on a free web host just so we can check it out.