SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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

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

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,051
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

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

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

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,051
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    You're missing the closing });

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I've tried that but still not working:
    http://mauroscatozza.com/pci/software/geomatica2013

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,051
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    <!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. #7
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok cool thanks.
    The hover works now, but the menu items wont disappear when i hover out ? ?
    http://mauroscatozza.com/pci/

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,051
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    This should work:

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

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

  9. #9
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Later jquery version use "mouseover" rather than "hover". Just switch your action from "action:hover" to "action:mouseover"

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh Thank you but this is an old thread, I will delete


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •