gilbitron/dropit

Dropit is a jQuery plugin for single level dropdown menu's

This repo is no longer maintained. If you would like to take over ownership please get in touch.

Stupidly Simple jQuery Dropdowns

dropit's Issues

Trigger element dissappears

When I click the menu trigger a second time (once it's expanded, in order to close it) it gets hidden.

I can't see why this is happening, could you perhaps see where I've gone wrong?

The markup is:

<ul id="l10n-menu">
    <li>
        <a href="#" class="current-locale en_GB">
            v
        </a>
        <ul>
            <li>
                <a href="?locale=en_US" class="en">English (US)</a>
            </li>
            <li>
                <a href="?locale=ur" class="ur" dir="rtl">Urdu</a>
            </li>
        </ul>
    </li>
</ul>

And my init code is:

$(document).ready(function () {
    $('#l10n-menu').dropit();
});

Jquery update make Dropit stops work...

Hi, I update jquery of 1.8 to 1.9 and Dropit stops to work.
Well, only post this to help.
Cheers.

submenu not closing when user taps outside

On iOS, when the sub menu is opened on tap, and then you tap outside to close, the sub menu isn't closing. Any ideas on how to fix this? There's no issue on click, just on tap.

Please include index.htm file fully integrated

I can't make it work :( Index.htm with all files and source integrated would be really helpful. Sorry and please :)

Trigger programatically

Is there a way to open the dropdown programmatically?

I tried doing $(".menu").click() but that didnt work.

Any clue?

TLS/SSL certificate for dev7studios.com is expired

The TLS (SSL) certificate for the domain dev7studios.com expired over a month ago. As such, no one can view the website without overriding a warning in their browser.

While not specifically an issue with this jquery plugin, it is an issue with the site the github page links to, and presumably the primary public-facing webpage for the plugin.

Settings afterShow, afterHide doesn't work

Options afterShow, afterHide doesn't work at all.

This is my init code. Nothing has been changed in src code.

  $('.dropdown').dropit({
    beforeShow: function(){
      $('.dropdown-submenu').addClass('animated animDrop')
    },
    afterShow: function(){
      $('.dropdown-submenu').removeClass('animated animDrop')
    },
    beforeHide: function(){
      $('.dropdown-submenu').addClass('animated zoomOut')
    },
    afterHide: function(){
      $('.dropdown-submenu').removeClass('animated zoomOut')
    },
  });

If i comment out / delete afterHide & afterShow - it won't give me expected effect cause it only takes first applied class (animated animDrop)

Can't init dropit

jq 2.2.0
<script src='js/dropit.js' type='text/javascript'></script>

<link href="css/dropit.css" rel="stylesheet" type="text/css">

$( document ).ready(function() 
{
    // Copy+Paste sample .menu
    $( '.menu' ).dropit({
        afterLoad: function(){ console.log("dropit initialized.") } // Triggers when plugin has loaded
    });
}

Nothing was showing up on click, so I added the callback option afterLoad and I'm not getting this console msg.

Hide dropdowns on mouseout?

Dropdown menus don't disappear when mousing out. Was this intentional? Is there an easy way to change this?

Trigger Top Level Menu Items Only?

I noticed that if the nav menu has 3 levels of list items, the 2nd level is not clickable. Is there a way to only activate DropIt for the first level of list items? The 3rd level of nav is not supposed to display at all and is only in place for use in the mobile menu. Thank for the great plugin and for any help!

$('.navigation .main > ul ').dropit();

`

• Top Level 1(clickable)
  • Second Level Item 1 (clickable)
  • Second Level Item 2 (currently NOT clickable due to 3rd level)
    • Third Level Item 1 (needs to stay hidden)
• Top Level 2 (clickable)
  • Second Level Item 1 (clickable)
  • Second Level Item 2 (clickable)

`

menu still open while hover on child elements

Dropit version: v1.1.0

Problem:

The sub-menu still remains open while hover on the siblings.

I have tested this on Chrome and FF.

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

Problem with click on submenu link

Hi.
I have a problem with dopit plugin. I create a submenu and put this in custom.js file:
$(document).ready(function() {
$('.nav-drop').dropit();
});

This is result:

I type a links to user can change language, but when I click nothings happened. Can you help me?
P.S. Link what I like to click is below. In ul class "list nav-drop-menu", li childrens a tag. sorry for bad marker.

Delete issue, wrong repo.

Delete issue, wrong repo.

Documentation link is broken

http://dev7studios.com/dropit in README no longer works.

Bower error

Hello!
I get error after i enter «bower i» command.

bower Dropit=dropit#^1.1.1 ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/gilbitron/Dropit=dropit.git", exit code of #128 fatal: remote error: gilbitron/Dropit=dropit is not a valid repository name Email [email protected] for help

fatal: remote error:
gilbitron/Dropit=dropit is not a valid repository name

Are there any way to solve it?

action: 'hover' & jQuery v1.11.1

When using jQuery v1.11.1 action: 'click' works fine, but using 'hover' does not work, (doesn't through any errors in the console).

Not actually in bower

dropit.js is another project

Is there a way to hide the submenu ONLY if the trigger is clicked or if a click occurs outside the submenu?

Hi There,

This menu is working great but two drop downs in our main nav contain a shopping cart and a search form.

The issue is that if a person clicks within the submenu, the menu disappears - i.e. if they click the search form or items in the cart, everything gets hidden.

Is there a way to hide the submenu ONLY if a trigger is clicked or if a click occurs outside the submenu?

I've tried targeting a class for the trigger element but like most jQuery plugins, there are no examples that show the correct syntax for adding the settings (I find javascript very confusing sorry).

I've tried:

  <script>
    $(document).ready(function() {
      $('.dropit').dropit(
          triggerEl: 'a.dropit-trigger-element', // The trigger element
      );
    });
  </script>

and...

  <script>
    $(document).ready(function() {
      $('.dropit').dropit(
        {
          triggerEl: 'a.dropit-trigger-element', // The trigger element
        }
      );
    });
  </script>

BTW, I'm using this pull request from 5months ago because this more recent pull request leaves a previous submenu open if a new one is triggered.

Sorry if this is easy - any pointers in the right direction would be much appreciated.

Cheers

Ben

Which menu option selected

How can I use Jquery to show which value in the submenu was clicked?

Thanks.

[enhancement] Add missing bower.json.

Hey, maintainer(s) of gilbitron/Dropit!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library gilbitron/Dropit is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "gilbitron/Dropit",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!