My menu items open on Click, I want them to open on hover!

JavaScript
1

Any idea how? Im using Dropit: http://dev7studios.com/dropit/

thanks in advance…see the menu here:
http://mauroscatozza.com/pci/

2

Hi there,

I’m getting a 404 for the link you posted, but you might want to try:

$('.menu').dropit({
  action: 'hover'
});
3

oh, 404? well it should work now.

I tried your idea but it breaks it, does this look right?

<script>
$(document).ready(function() {
$(‘.menu’).dropit({
action: ‘hover’
});
</script>

4

You’re missing the closing });

5

Hmmm, I’ve tried that but still not working:
http://mauroscatozza.com/pci/software/geomatica2013

6

Hi,

Sorry for the late reply.

The problem is that dropit doesn’t seem to work with the latest version of jQuery (which you are using).

Here is an example using an earlier version of jQuery which will work as expected:

<!DOCTYPE html>
  <html xml:lang="en-gb" lang="en-gb" >
  <head>
    <base href="http://mauroscatozza.com/pci/" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>front</title>
    <link rel="stylesheet" href="http://mauroscatozza.com/pci//modules/mod_contentslider/assets/style.css" type="text/css" />
    <link rel="stylesheet" href="/pci/templates/generic25/css/template.css" type="text/css" />
    <link rel="stylesheet" href="/pci/templates/generic25/css/default.css" type="text/css" />
  </head>
  
  <body>
    <div id="main_menu">
      <ul class="menu" id="nav">
        <li class="item-3 deeper parent">
          <a href="/pci/our-company" >OUR COMPANY</a>
          <ul>
            <li class="item-62"><a href="/pci/our-company/about-pci" >About PCI</a></li>
            <li class="item-63"><a href="/pci/our-company/corporate-statements" >Corporate Statements</a></li>
            <li class="item-64"><a href="/pci/our-company/in-memorium" >In Memorium</a></li>
            <li class="item-65"><a href="/pci/our-company/executive-team" >Executive Team</a></li>
            <li class="item-66"><a href="/pci/our-company/careers" >Careers</a></li>
            <li class="item-67"><a href="/pci/our-company/partners-a-associations" >Partners &amp; Associations</a></li>
          </ul>
        </li>
        <li class="item-4 deeper parent">
          <a href="/pci/software" >SOFTWARE</a>
          <ul>
            <li class="item-68"><a href="/pci/software/geomatica2013" >Geomatica</a></li>
            <li class="item-69"><a href="/pci/software/geoimaging-accelerator-gxl" >GeoImaging Accelerator (GXL)</a></li>
            <li class="item-70"><a href="/pci/software/geomatica-discover" >Geomatica Discover</a></li>
            <li class="item-71"><a href="/pci/software/geoimaging-tools" >GeoImaging Tools</a></li>
            <li class="item-72"><a href="/pci/software/production-workflows" >Production Workflows</a></li>
            <li class="item-73"><a href="/pci/software/partner-products" >Partner Products</a></li>
          </ul>
        </li>
        <li class="item-14 deeper parent">
          <a href="/pci/blog" >NEWS &amp; EVENTS</a>
          <ul>
            <li class="item-74"><a href="/pci/blog/our-blog" >Our Blog</a></li>
            <li class="item-75"><a href="/pci/blog/events-calendar" >Events Calendar</a></li>
            <li class="item-76"><a href="/pci/blog/press-releases" >Press Releases</a></li>
          </ul>
         </li>
        <li class="item-12 deeper parent">
          <a href="/pci/resources-sp-1976668641" >RESOURCES</a>
          <ul>
            <li class="item-77"><a href="/pci/resources-sp-1976668641/webinars" >Webinars</a></li>
            <li class="item-78"><a href="/pci/resources-sp-1976668641/case-studies-a-articles" >Case Studies &amp; Articles</a></li>
            <li class="item-79"><a href="/pci/resources-sp-1976668641/white-papers" >White Papers</a></li>
            <li class="item-80"><a href="/pci/resources-sp-1976668641/newsletter-archive" >Newsletter Archive</a></li>
            <li class="item-81"><a href="/pci/resources-sp-1976668641/training" >Training</a></li>
            <li class="item-82"><a href="/pci/resources-sp-1976668641/downloads" >Downloads</a></li>
            <li class="item-83"><a href="/pci/resources-sp-1976668641/images-galleries" >Images Galleries</a></li>
            <li class="item-84"><a href="/pci/resources-sp-1976668641/pci-tv" >PCI TV</a></li>
          </ul>
        </li>
        <li class="item-13 deeper parent">
          <a href="/pci/contact-us" >CONTACT US</a>
          <ul>
            <li class="item-85"><a href="/pci/contact-us/contact-pci" >Contact PCI</a></li>
            <li class="item-86"><a href="/pci/contact-us/sales-representatives" >Sales Representatives</a></li>
            <li class="item-87"><a href="/pci/contact-us/pci-reseller-partners" >PCI Reseller Partners</a></li>
            <li class="item-88"><a href="/pci/contact-us/pci-reseller-network" >PCI Reseller Network</a></li>
          </ul>
        </li>
      </ul>
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="/pci/templates/generic25/js/dropit.js"></script>
    <script>
      $(document).ready(function() {
        $('.menu').dropit({action: 'hover'});
      });
    </script>
  </body>
</html>

Actually, it doesn’t seem to work with 1.9, either: https://github.com/gilbitron/Dropit/issues/2

7

ok cool thanks.
The hover works now, but the menu items wont disappear when i hover out ? ?
http://mauroscatozza.com/pci/

8

This should work:

$(".dropit-trigger").live("mouseout", function(){
  $(document).trigger('click');
});

Just drop it in before your closing </body> tag.

9

Later jquery version use “mouseover” rather than “hover”. Just switch your action from “action:hover” to “action:mouseover”

10

oh Thank you but this is an old thread, I will delete :slight_smile: