0

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...

6
  • Please fix your jQuery to conform to the no-conflict configuration that WordPress uses, and report back. Commented Aug 28, 2012 at 16:18
  • Function have changed to use jQuery(document).ready(function($) {... however still doesn't work.
    – V Neal
    Commented Aug 28, 2012 at 16:36
  • "This seems to inject the HTML HOWEVER hides the li.page-item-13 from the navigation" - is this the same problem you had originally, or a different problem? Commented Aug 28, 2012 at 16:49
  • This is now a different issue. The dropdown is showing but the parent li is not. Maybe .load isn't the right way in going about this - it may be easier to just hardcode the entire navigation...
    – V Neal
    Commented Aug 28, 2012 at 17:12
  • So, on the whole, this appears to be more of a jQuery issue than a WordPress issue. Commented Aug 28, 2012 at 18:48

1 Answer 1

0

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>');
      })();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.