Is it possible to append an external html file to my wordpress navigation?

Question

I'm trying to add a hardcoded 'megamenu' style dropdown div to my wordpress site.

The content of the div itself doesn't need to be administered via wordpress, it will all be hardcoded.

I don't want to use a plugin, and my attempts of creating a 'walker' class has failed, so I'm wondering whether jQuery is now the way forward.

With the following function, I can add the word, 'Hello' to my navigation item HOWEVER if i change it to the contents of my div, it doesn't display at all. Admittedly I'm clutching at straws a little now...

WORKS

  $("#mainMenu ul li.page-item-13").append("<strong>Hello</strong>");`

DOESN'T WORK

    $(document).ready(function(){

                $("#mainMenu ul li.page-item-13 a").append("
<div id=\"megaMenu\">
            <div id=\"megaMenuCopy\">
              <h3>The Range</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet sapien ut quam tristique sed volutpat lectus blandit. Nullam ornare massa faucibus tellus blandit et fringilla urna interdum. Integer accumsan, libero eu vestibulum eleifend, odio enim semper urna, nec vestibulum eros magna id diam. Morbi a nibh quam, id pharetra turpis. Aenean arcu justo, semper at elementum in, hendrerit quis urna.</p>
              <p>Donec id lectus enim, eget suscipit lorem. Sed cursus consectetur lectus sed interdum. In et congue elit. Cras quam diam, pellentesque quis sollicitudin aliquam, tempus nec orci.</p>
            </div>
            <ul>
              <li id=\"t43\"><a href=\"#\">T43</a></li>
              <li id=\"t47\"><a href=\"#\">T47</a></li>
              <li id=\"t495\"><a href=\"#\">T495</a></li>
              <li id=\"t535\"><a href=\"#\">T535</a></li>
              <li id=\"t535\"><a href=\"#\">T535</a></li>
              <li id=\"t575\"><a href=\"#\">T575</a></li>
              <li id=\"t575\"><a href=\"#\">T575</a></li>
            </ul>
            <div class=\"clearBoth\"></div>
          </div>");

           });

DOESN'T WORK

           $(document).ready(function(){

                $("#mainMenu ul li.page-item-13").append("
<div id="megaMenu">
            <div id="megaMenuCopy">
              <h3>The Range</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet sapien ut quam tristique sed volutpat lectus blandit. Nullam ornare massa faucibus tellus blandit et fringilla urna interdum. Integer accumsan, libero eu vestibulum eleifend, odio enim semper urna, nec vestibulum eros magna id diam. Morbi a nibh quam, id pharetra turpis. Aenean arcu justo, semper at elementum in, hendrerit quis urna.</p>
              <p>Donec id lectus enim, eget suscipit lorem. Sed cursus consectetur lectus sed interdum. In et congue elit. Cras quam diam, pellentesque quis sollicitudin aliquam, tempus nec orci.</p>
            </div>
            <ul>
              <li id="t43"><a href="#">T43</a></li>
              <li id="t47><a href="#">T47</a></li>
              <li id="t495"><a href="#">T495</a></li>
              <li id="t535"><a href="#">T535</a></li>
              <li id="t535"><a href="#">T535</a></li>
              <li id="t575"><a href="#">T575</a></li>
              <li id="t575"><a href="#">T575</a></li>
            </ul>
            <div class="clearBoth"></div>
          </div>");

           });

Any help would be greatly appreciated.

Thanks

*UPDATE**

This seems to inject the HTML HOWEVER hides the li.page-item-13 from the navigation...

<script>
jQuery(document).ready(function($) {
        $("li.page-item-13 a").load("/wp-content/themes/mytheme/includes/mega-menu.html");
});
</script>

*UPDATE**

With no other ideas, I've now added the text of the li to the megaMenu file as well. It now seems to work - although I'm not sure I'm 100% happy with this hack...

Answer 1

I got this to work on a static html page. The problem seems to be the white space in the append. I also removed all the '\' and changed append to use single quotes. Maybe a jQuery expert can enlighten us.

(function() {
      $('#mainMenu ul li.page-item-13 a').append('<div id="megaMenuCopy"><h3>The Range</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet sapien ut quam tristique sed volutpat lectus blandit. Nullam ornare massa faucibus tellus blandit et fringilla urna interdum. Integer accumsan, libero eu vestibulum eleifend, odio enim semper urna, nec vestibulum eros magna id diam. Morbi a nibh quam, id pharetra turpis. Aenean arcu justo, semper at elementum in, hendrerit quis urna.</p><p>Donec id lectus enim, eget suscipit lorem. Sed cursus consectetur lectus sed interdum. In et congue elit. Cras quam diam, pellentesque quis sollicitudin aliquam, tempus nec orci.</p></div><ul><li id="t43"><a href="#">T43</a></li><li id="t47"><a href="#">T47</a></li><li id="t495"><a href="#">T495</a></li><li id="t535"><a href="#">T535</a></li><li id="t535"><a href="#">T535</a></li><li id="t575"><a href="#">T575</a></li><li id="t575"><a href="#">T575</a></li></ul><div class="clearBoth"></div>');
      })();