Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
    
Function have changed to use jQuery(document).ready(function($) {... however still doesn't work. –  V Neal Aug 28 '12 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? –  Chip Bennett Aug 28 '12 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 Aug 28 '12 at 17:12
    
So, on the whole, this appears to be more of a jQuery issue than a WordPress issue. –  Chip Bennett Aug 28 '12 at 18:48
show 1 more comment

1 Answer

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>');
      })();
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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