I have a JavaScript navigation system that I am using, and you can see it in action by visiting
DJR.com.au. As you can see, if you hover your mouse over the links on the right-side of the navigation system (such as "Shop"), the sub-links are displayed with a left-alignment that therefore makes it difficult for the user to click.
I'm not sure on how it would be done, but I'm sure it would be possible, to have something set up within the JavaScript code where links on the right-hand side of the screen would have sub-links with a right-alignment, rather than a left-alignment, while still keeping the links on the left-hand side with left-aligned sub-links.
Here is the code for the navigation system:
Code:
function NavigationConstruct()
{
NavigationItem = new NavigationObject('1');
NavigationItem.NavigationDisplay('1','News','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=News','0','0');
NavigationItem.NavigationDisplay('1','Dick Johnson','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=DickJohnson','0','0');
NavigationItem.NavigationDisplay('1','Steve Johnson','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=SteveJohnson','0','0');
NavigationItem.NavigationDisplay('1','Will Davison','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=WillDavison','0','0');
NavigationItem.NavigationDisplay('1','History','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=History','0','0');
NavigationItem.NavigationDisplay('1','Community Support','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=CommunitySupport','0','0');
NavigationItem.NavigationDisplay('2','Calendar 2006','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Calendar2006','0','0');
NavigationItem.NavigationDisplay('2','Results 2006','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Results2006','0','0');
NavigationItem.NavigationDisplay('2','Archived Results','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=ArchivedResults','0','0');
NavigationItem.NavigationDisplay('3','Gallery 2002','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Gallery2002','0','0');
NavigationItem.NavigationDisplay('3','Gallery 2003','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Gallery2003','0','0');
NavigationItem.NavigationDisplay('3','Gallery 2004','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Gallery2004','0','0');
NavigationItem.NavigationDisplay('3','Gallery 2005','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Gallery2005','0','0');
NavigationItem.NavigationDisplay('3','Gallery 2006','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Gallery2006','0','0');
NavigationItem.NavigationDisplay('4','Wallpapers','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Wallpapers','0','0');
NavigationItem.NavigationDisplay('4','Screensavers','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Screensavers','0','0');
NavigationItem.NavigationDisplay('5','Merchandise','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Merchandise','0','0');
NavigationItem.NavigationDisplay('5','Auction','/Website/Global/Global(Scripts)/Global(Navigation).php?Navigation=Auction','0','0');
NavigationItem.NavigationActivate();
}
var NavigationTop = 0;
var NavigationBottom = 0;
var NavigationClear = false;
var NavigationSelection = false;
if (document.all)
{n = 0;ie = 1;ns6 = 0;fNavigationVisible = 'visible';fHide = 'hidden';}
if (document.getElementById&&!document.all)
{n = 0;ie = 0;ns6 = 1;fNavigationVisible = 'visible';fHide = 'hidden';}
if (document.layers)
{n = 1;ie = 0;ns6 = 0;fNavigationVisible = 'visible';fHide = 'hidden';}
window.onerror = new Function("return true")
if (n || ns6)
{
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=NavigationPointerMovement;
}
function NavigationRefresh()
{
if (ie || ns6)
{
location.reload();
}
}
function NavigationPointerMovement(e)
{
if (ns6)
{
NavigationTop = e.clientX;
NavigationBottom = e.clientY;
}
if (n)
{
NavigationTop = e.pageX;
NavigationBottom = e.pageY;
}
if (NavigationSelection)
{
NavigationLinkDisable(isOverDivClick);
}
}
function NavigationPointerUpdate(object)
{
dm_width = parseInt(NavigationAppearanceWidth.substring(0,NavigationAppearanceWidth.length - 2));
if (n) dm_left = parseInt(NavigationAppearanceMarginLeft.substring(0,NavigationAppearanceMarginLeft.length - 2));
if (n) dm_top = parseInt(NavigationAppearanceMarginTop.substring(0,NavigationAppearanceMarginTop.length - 2));
if (n) dm_height = parseInt(document.layers[object].clip.height);
if (ns6) dm_left = parseInt(NavigationAppearanceMarginLeft.substring(0,NavigationAppearanceMarginLeft.length - 2));
if (ns6) dm_top = parseInt(NavigationAppearanceMarginTop.substring(0,NavigationAppearanceMarginTop.length - 2));
if (ns6) dm_height = parseInt(document.getElementById(object).offsetHeight);
dm_width += dm_left;
dm_height+= dm_top;
if (NavigationTop > parseInt(dm_width) || NavigationTop < dm_left)
{
return 0;
}
else if (NavigationBottom > dm_height || NavigationBottom < dm_top)
{
return 0;
}
return 1;
}
function NavigationReplacement(string,text,by)
{
var strLength = string.length, txtLength = text.length;
if ((strLength == 0) || (txtLength == 0)) return string;
var i = string.indexOf(text);
if ((!i) && (text != string.substring(0,txtLength))) return string;
if (i == -1) return string;
var newstr = string.substring(0,i) + by;
if (i+txtLength < strLength)
newstr += NavigationReplacement(string.substring(i+txtLength,strLength),text,by);
return newstr;
}
function NavigationVisible(object)
{
if (ns6)
{
NavigationInvisible();
document.getElementById(object).style.visibility = fNavigationVisible;
}
else if (n)
{
NavigationInvisible();
document.layers[object].visibility = fNavigationVisible;
}
else if (ie)
{
NavigationInvisible();
document.all[object].style.visibility = fNavigationVisible;
}
}
function NavigationDisplayDefault()
{
if (s_PageDefault!='')
{
NavigationVisible(s_PageDefault);
}
else
{
NavigationInvisible();
}
}
function NavigationInvisible()
{
if (ns6) c_documentLength = document.getElementsByTagName('span').length;
if (n) c_documentLength = document.layers.length;
if (ie) c_documentLength = document.all.length;
for (i=0 ; i < c_documentLength ; i++)
{
if (ie)
{
if (document.all[i].id.indexOf('NavigationLevel')!=-1) document.all[i].style.visibility = fHide;
}
else if (n)
{
if (document.layers[i].id.indexOf('NavigationLevel')!=-1) document.layers[i].visibility = fHide;
}
else if (ns6)
{
if (i>=1)
{
if (document.getElementById('NavigationLevel' + i).id.indexOf('NavigationLevel')!=-1) document.getElementById('NavigationLevel' + i).style.visibility = fHide;
}
}
}
}
function NavigationTrigger(object)
{
if (n || ns6)
{
isOverDiv = object;
}
else
{
isOverDiv = object.id;
}
isOverDivClick = isOverDiv;
}
function NavigationLinkDisable(object)
{
if (NavigationClear) {clearTimeout(NavigationClear)}
isOverDiv = false;
s_objectName = object;
if (s_PageDefault != s_objectName) NavigationClear = setTimeout("NavigationDelay(s_objectName)",450);
}
function NavigationDelay(object)
{
var s_objectName = '';
var s_objectNamePar = '';
s_objectName = object;
s_objectNamePar = isOverDiv;
if (s_objectNamePar==isOverDivClick)
{
NavigationSelection = true;
isOverDiv = isOverDivClick;
return
}
if (s_objectName==s_objectNamePar)
{
NavigationSelection = true;
isOverDiv = isOverDivClick;
return
}
else
{
if (n || ns6)
{
b_mouseOnDiv = NavigationPointerUpdate(s_objectName);
if (b_mouseOnDiv)
{
NavigationSelection = true;
isOverDiv = isOverDivClick;
return
}
else
{
NavigationSelection = false;
NavigationDisplayDefault();
return;
}
}
else
{
NavigationSelection = false;
NavigationDisplayDefault();
return;
}
}
}
function NavigationObject(e_topPixels)
{
NavigationAppearanceWidth = '760PX';
if (ie)
{
c_windowWidth = top.document.body.clientWidth;
}
else
{
c_windowWidth = top.window.innerWidth;
}
NavigationAppearanceMarginLeft = parseInt(c_windowWidth/2 - NavigationAppearanceWidth.substring(0,NavigationAppearanceWidth.length - 2)/2) - 0;
if (n) NavigationAppearanceMarginLeft = NavigationAppearanceMarginLeft - 8;
if (NavigationAppearanceMarginLeft<1) NavigationAppearanceMarginLeft = 1;
if (ie)
{
if (navigator.appVersion.indexOf('MSIE 5.0')!=-1)
{
NavigationAppearanceMarginLeft = NavigationAppearanceMarginLeft - 9;
}
}
NavigationAppearanceMarginLeft = NavigationAppearanceMarginLeft + 'PX';
NavigationAppearanceMarginTop = '333';
if (e_topPixels!='') NavigationAppearanceMarginTop = parseInt(NavigationAppearanceMarginTop) + parseInt(e_topPixels)
NavigationAppearanceMarginTop += 'PX';
NavigationAppearanceBackground = '#F78E1E';
NavigationAppearanceSettings = 'width: ' + NavigationAppearanceWidth + '; top: ' + NavigationAppearanceMarginTop + '; background-color: ' + NavigationAppearanceBackground;
if (n) NavigationAppearanceSettings += '; left: ' + NavigationAppearanceMarginLeft;
this.NavigationDisplay = NavigationDisplay;
this.NavigationActivate = NavigationActivate;
HTMLstr = '';
s_PageDefault = '';
}
function NavigationDisplay(idItem, text, location, i_selectItem, i_subItemSelected)
{
object = 'NavigationLevel' + idItem;
d_linkClass = 'GlobalNavigationSubLink';
if (i_subItemSelected!=0) d_linkClass = 'NavSubSel';
content = '<font class="GlobalNavigationSubLink">»</font> <a href="' + location + '" class="' + d_linkClass + '">' + text + '</a> ';
c_divlayer = true;
selectItem = true;
c_style = fHide;
d_contentSpacer = '15';
if (i_selectItem==0) selectItem = false;
if (selectItem) c_style = fNavigationVisible;
h_htmlDivStart = '<span id="' + object + '" style="height:24PX;line-height:20PX;position:absolute;text-align:left;visibility: ' + c_style + ';z-index:1; ' + NavigationAppearanceSettings + '" onMouseOver="NavigationTrigger(' + object + ')" onMouseOut="NavigationLinkDisable(' + object + ')">';
h_htmlDivEnd = '</span>';
h_htmlSpacerTR = '<tr><td></td></tr>';
h_htmlTableStart = '<table border="0PX" cellpadding="0PX" cellspacing="0PX"><tr><td bgcolor="' + NavigationAppearanceBackground + '" width="' + d_contentSpacer + '"></td>';
h_htmlTableStart+= '<td bgcolor="' + NavigationAppearanceBackground + '" width="' + parseInt(NavigationAppearanceWidth.substring(0,NavigationAppearanceWidth.length - 2) - d_contentSpacer) + '">';
h_htmlTableEnd = '</td></tr></table>';
if (HTMLstr.indexOf(object)!=-1) c_divlayer = false;
if (c_divlayer)
{
if (HTMLstr=='')
{
HTMLstr = h_htmlDivStart + h_htmlTableStart;
}
else
{
HTMLstr += h_htmlTableEnd + h_htmlDivEnd + h_htmlDivStart + h_htmlTableStart;
}
if (selectItem) s_PageDefault = object;
}
else
{
if (selectItem)
{
text = '<span id="' + object + '" style="position:absolute; z-index:1; visibility: ' + fHide + '; ' + NavigationAppearanceSettings + '"';
by = '<span id="' + object + '" style="position:absolute; z-index:1; visibility: ' + fNavigationVisible + '; ' + NavigationAppearanceSettings + '"';
HTMLstr = NavigationReplacement(HTMLstr, text, by);
s_PageDefault = object;
}
}
HTMLstr += content;
}
function NavigationActivate()
{
if (HTMLstr!="")
{
o_HTMLOutput = '<span style="position:absolute;top:0;z-index:0;width: ' + NavigationAppearanceWidth + '; left: ' + NavigationAppearanceMarginLeft + '">';
o_HTMLOutput += HTMLstr;
o_HTMLOutput += h_htmlTableEnd;
o_HTMLOutput += h_htmlDivEnd;
o_HTMLOutput += '</span>';
document.write(o_HTMLOutput);
}
}
function NavigationLinkEnable(objectID)
{
NavigationTrigger(objectID);
NavigationVisible(objectID);
} Here is how the navigation system is referenced within the page:
Code:
<a class="GlobalNavigationLink" href="#" onmouseover="NavigationLinkEnable('NavigationLevel2');" onmouseout="NavigationLinkDisable('NavigationLevel2');"> Any help would be greatly appreciated!
Login 
Web Design & Development 
Solved: Right-Alignment For JavaScript Navigation System 
