Question

I am using a jQuery dropmenu for the navigation this site: http://184.173.208.195/~secoast/ which is obviously in development. The drop menu works correctly despite a jQuery error that says .dropmenu is not a function.

The current main issue is that menu is hiding behind the other content on the page. I suspect this may be due in part to the jQuery error. The dropmenu module originally had a noconflict part included so that it would not conflict with other library modules.

To cover all bases, here is the beginning of the jQuery file (jquery.dropmenu.js):

$.fn.dropmenu = function(custom) {

    // Default plugin settings
    var defaults = {
      openAnimation: "size",
        closeAnimation: "slide",
        openClick: false,
        openSpeed: 300,
        closeSpeed: 200,
        closeDelay: 200,
        onHide: function(){},
        onHidden: function(){},
        onShow: function(){},
        onShown: function(){},
        zindex: 100,
        openMenuClass: 'open',
        autoAddArrowElements: true
    };

Then on the main file I have the following code:

<script>
$(document).ready(function(){
    $("#nav-one").dropmenu({
            openAnimation: "size",
            closeAnimation: "slide",
            openSpeed: 300,
            closeSpeed: 200,
            closeDelay: 500,
            zindex: 1000
    });
});
</script>

Lastly here is the navigation menu:

<ul id="nav-one" class="dropmenu css-only">
  <li><a href="#">About Us</a>
    <ul>
          <li><a href="#">Support</a></li>
          <li><a href="#">Help</a></li>
          <li><a href="#">Examples</a></li>
          <li><a href="#">Your work</a></li>
        </ul>
  </li>
  <li> 
    <a href="#">Why the Southeast</a>
    <ul>
      <li><a href="#">Support</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Examples</a></li>
      <li><a href="#">Your work</a></li>
    </ul>
  </li>
  <li> 
    <a href="#">What We Do</a>
    <ul>
      <li><a href="#">Tools</a></li>
      <li><a href="#">Office</a></li>
      <li><a href="#">Custom projects</a></li>
    </ul>
  </li>
  <li> 
    <a href="#">Resources</a></li>
</ul>

Any help in getting this sorted out will be greatly appreciated.

Thanks.

Answer 1

Before trying anything else i sugest you change:

<script type="text/javascript" src="../js/jquery.dropmenu.js"></script>

To:

<script type="text/javascript" src="js/jquery.dropmenu.js"></script>

notice the ../ that was removed, no doubt a minor miss, but quite important 😉