I would be grateful if someone help me. I have been struggling with this problem for hours
Here's my html
<div id="mainHeader">
<div id="mainMenu">
<div id="mainMenuButton1" class="mainMenuButton" onMouseOver="javascript:displaySubMenu('mainMenuButton1')" style="left: 10px"><a class="link1" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/index.php"]index.php[/URL]">Home</a></div>
<div id="mainMenuButton2" class="mainMenuButton" onMouseOver="javascript:displaySubMenu('mainMenuButton2')" style="left: 20px"><a class="link1" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadTrainingProgramsList.php"]loadTrainingProgramsList.php[/URL]">Training programs</a></div>
<div id="mainMenuButton3" class="mainMenuButton" onMouseOver="javascript:displaySubMenu('mainMenuButton3')" style="left: 30px; background-image: url(http://localhost/TPV/jpeg/mainMenuButtonOnFocus.jpg);"><a class="link1" style="color: #AF5F17" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php"]loadVideosList.php[/URL]">Videos 'How to'</a></div>
<div id="mainMenuButton4" class="mainMenuButton" onMouseOver="javascript:displaySubMenu('mainMenuButton4')" style="left: 40px"><a class="link1" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadStrechingList.php"]loadStrechingList.php[/URL]">Stretching</a></div>
<div id="mainMenuButton5" class="mainMenuButton" onMouseOver="javascript:displaySubMenu('mainMenuButton5')" style="left: 50px"><a class="link1" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadMotivationList.php"]loadMotivationList.php[/URL]">Motivation</a></div> </div>
</div>
<div id="subMenu">
<div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=chest"]loadVideosList.php?category=chest[/URL]">Chest</a></div>
<div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=triceps"]loadVideosList.php?category=triceps[/URL]">Triceps</a></div>
<div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=biceps"]loadVideosList.php?category=biceps[/URL]">Biceps</a></div>
<div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=back"]loadVideosList.php?category=back[/URL]">Back</a></div>
<div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=shoulder"]loadVideosList.php?category=shoulder[/URL]">Shoulders</a></div>
<div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=trapezius"]loadVideosList.php?category=trapezius[/URL]">Trapezius</a></div>
<div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=upper%20legs"]loadVideosList.php?category=upper legs[/URL]">Upper legs</a></div>
<div class="subMenuButton"><a class="subMenuLink" href="[URL="http://forum.codecall.net/view-source:http://localhost/TPV/loadVideosList.php?category=calves"]loadVideosList.php?category=calves[/URL]">Calves</a></div>
</div>
Here's js function:
function displaySubMenu(id){
var subMenu = document.getElementById("subMenu");
while (subMenu.childNodes.length > 0)
subMenu.removeChild(subMenu.firstChild);
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var buttons = xmlhttp.responseXML.documentElement.getElementsByTagName("button");
var foundButton = null;
var category = "";
var title = "";
for (var i = 0;i < buttons.length; i++){
var button = buttons[i];
var buttonId = button.getAttribute("id");
var buttonTitle = button.getAttribute("name");
var link = button.getAttribute("link");
buttonId = "mainMenuButton" + buttonId;
var buttonDivElement = document.getElementById(buttonId);
buttonDivElement.style.backgroundImage = 'url(http://localhost/TPV/jpeg/mainMenuButton.jpg)';
buttonDivElement.style.color = "white";
removeChildren(buttonDivElement);
buttonDivElement.innerHTML += '<a class="link1" href="' + link + '">' + buttonTitle + '</a>';
if (buttonId == id){
buttonDivElement.style.color = "#AF5F17";
buttonDivElement.style.backgroundImage = "url(http://localhost/TPV/jpeg/mainMenuButtonOnFocus.jpg)";
foundButton = button;
}
}
var subMenuButtons = foundButton.getElementsByTagName("subButton");
for (var i = 0; i < subMenuButtons.length; i++){
var subButton = subMenuButtons[i];
var name = subButton.getAttribute("name");
var link = subButton.getAttribute("link");
subMenu.innerHTML += '<div class="subMenuButton"><a class="subMenuLink" href="' + link + '">' + name + '</a></div>';
}
}
}
xmlhttp.open("GET", "http://localhost/TPV/xml/mainMenu.xml", true);
xmlhttp.send();
}


Sign In
Create Account


Back to top









