Question

我想要一个导航栏，读取xml文件中的值并显示菜单和子菜单。

这里是html代码：

<!DOCTYPE html>
     <html>
     <head>
     <title>Try Menu</title>
     <link href="Stylesheet/StyleSheetNav.css" rel="stylesheet" type="text/css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/jscript"></script>
     <script src="Script/jquery-2.1.4.js" type="text/jscript"></script>
     <script src="Script/JScriptMenu.js" type="text/jscript"></script>
     </head>
     <body>
     <div id="messages">
     <script src="Script/JScriptMenuHover.js" type="text/javascript"></script>
     </div>
     </body>
     </html>

这是我的xml文件XMLNav.xml：

<?xml version="1.0" encoding="utf-8" ?>
     <Menu>
     <nav>
     <mainmenu>
         <name>Home</name>
         <link>#</link>
         <submenu>
             <text>Pro</text>
         </submenu>
         <submenu>
             <text>Educ</text>
         </submenu>
    </mainmenu>
    <mainmenu>
         <name>Products</name>
         <link>#</link>
         <submenu>
             <text>EduCube</text>
         </submenu>
         <submenu>
              <text>web Solu</text>
         </submenu>
    </mainmenu>
    <mainmenu>
        <name>Services</name>
        <link>#</link>
        <submenu>
            <text>Web</text>
        </submenu>
        <submenu>
             <text>cloud</text>
        </submenu>
        <submenu>
              <text>Mobile</text>
        </submenu>
    </mainmenu>
    <mainmenu>
        <name>About Us</name>
        <link>#</link>
        <submenu/>
    </mainmenu>
</nav>
</Menu>

这是我的js文件JScriptMenu.js：

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET", "XMLNav.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
        var x = xmlDoc.getElementsByTagName("mainmenu");
        var len = x.length;
        var y = xmlDoc.getElementsByTagName("submenu");

        document.write("<div><nav id='mainNav'><ul id='main-menu-ul'>");

        for (i = 0; i < len; i++) {
            document.write("<li class='main-menu'><a href='#'>");
            document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
            document.write("</a>");
            var z = y[i].childNodes;
            if (xmlDoc.getElementsByTagName("submenu").length != 0) {
                document.write("<div><ul class='sub-menu' ");
                for (j = 0; j < z.length; j++) {
                    document.write("<li><a href='#'>");
                    document.write(y[j].getElementsByTagName("text")[0].childNodes[0].nodeValue);
                    document.write("</a></li>");
                }
                document.write("</ul></div>");
            }
            else {
                continue;
            }
            document.write("</li>");
        }
        document.write("</ul></nav></div>");

这是菜单悬停文件JScriptMenuHover.js：

$(document).ready(function () {

    $('.main-menu').hover(function () {
        $(this).find('.sub-menu').fadeIn('fast');
        $(this).css('background-color', '#99CA46');
    }, function () {
        $(this).find('.sub-menu').fadeOut('fast');
        $(this).css('background-color', '#434343');
    });
});

这样主菜单打印得很好，但每个菜单中只有前3个子菜单。

每当我将鼠标悬停在主菜单的第一个项目上时，它仅显示前三个子菜单。它只读取所有菜单项的前三个子菜单。是他们在js文件中的问题还是xml文件不合适？

我希望我的菜单是这样的，

*Home
    ->Pro
    ->Educ
*Products
    ->cloud
    ->Web

等。

请帮忙。

创建动态导航栏

0 个答案: