CODEWITHSUNDEEP
jquerycss
forrest
forrest

Reputation: 10972

How do I adjust a dropdown menu to appear over the content?

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.

Upvotes: 0

Views: 134

Answers (3)

jackcogdill
jackcogdill

Reputation: 5122

You need to use z-index to make the element above everything, by using a very high number.

Here is a screenshot:

Screenshot

As you can see I simply changed the style with z-index: 9005

Upvotes: 0

Daniel Figueroa
Daniel Figueroa

Reputation: 10666

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 ;)

Upvotes: 0

Stefan
Stefan

Reputation: 5672

Try extending the .dropdown class with position: relative; and z-index: 100; as;

.dropmenu {
  float: left;
  margin: 50px 0 0 60px;
  padding: 0px;
  border-right: none;
  position: relative;
  z-index: 100;
}

Also noticed the error; "Uncaught TypeError: Object [object Object] has no method 'dropmenu'".

Upvotes: 1

Related Questions