cferdinandi / drop Goto Github PK

• Drop
• PAWS
• Harbor
• Keel

I'm trying to implement Drop into my Tailwind CSS app.
I would like to use the Tailwind CSS classes for styling and Drop for opening and closing the dropdown. I am looking for an example like Tabby where there is an option without UI. So only using the Javascript file from Tabby. Would this be possible?

Using the code below I manage to make Drop open and close the dropdown menu.

<div class="relative">
  <details class="dropdown">
    <summary>
      <button
        class="block h-8 w-8 rounded-full overflow-hidden border-2 border-gray-600 focus:outline-none focus:border-white">
        <img class="h-full w-full object-cover"
          src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&q=80"
          alt="Your avatar">
      </button>
    </summary>
    <div class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-lg shadow-xl">
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Account settings</a>
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Support</a>
      <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">Sign out</a>
    </div>
  </details>
</div>

Now I would like to remove the arrow from the details. Anny suggestion is welcome.

• http://staff.washington.edu/tft/tests/menus/simplyaccessible/index.html
• http://codepen.io/grayghostvisuals/pen/ltjDa

ex:

.drop {
    ...
}

.drop-jumbo {
    ...
}

• Switch to a constructor pattern
• a11y considerations
• Better overall UX

package.json

"gulp": "^3.9.0",
"node-fs": "^0.1.7",
"del": "^1.2.0",
"lazypipe": "^0.2.4",
"gulp-plumber": "^1.0.1",
"gulp-flatten": "^0.0.4",
"gulp-tap": "^0.1.3",
"gulp-rename": "^1.2.2",
"gulp-header": "^1.2.2",
"gulp-footer": "^1.0.5",
"gulp-watch": "^4.2.4",
"gulp-livereload": "^3.8.0",
"gulp-jshint": "^1.11.1",
"jshint-stylish": "^2.0.1",
"gulp-concat": "^2.6.0",
"gulp-uglify": "^1.2.0",
"karma": "^0.12.37",
"gulp-karma": "^0.0.4",
"karma-coverage": "^0.4.2",
"jasmine": "^2.3.1",
"karma-jasmine": "^0.3.6",
"karma-phantomjs-launcher": "^0.2.0",
"karma-spec-reporter": "^0.0.19",
"karma-htmlfile-reporter": "^0.2.1",
"gulp-sass": "^2.0.3",
"gulp-minify-css": "^1.2.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-svgmin": "^1.1.2",
"gulp-svgstore": "^5.0.2",
"gulp-markdown": "^1.0.0",
"gulp-file-include": "^0.11.1"

gulpfile.js

.pipe(sass({
    outputStyle: 'expanded',
    sourceComments: true
}))

} else if ( toggle !== document.documentElement && toggle.parentNode.hasAttribute( 'data-dropdown' ) ) {

becomes…

} else if ( toggle !== document.documentElement && getClosest(toggle, '[data-dropdown]') ) {

https://gist.github.com/cferdinandi/6337524

Any way you could add the ability to close the dropdowns when the document is clicked?

This is how the dropdowns behave with Twitter's Bootstrap framework.

Thanks for sharing your code.

package.json

"gulp-optimize-js": "^1.0.2",

gulpfile.js

var optimizejs = require('gulp-optimize-js');

    var jsTasks = lazypipe()
        .pipe(header, banner.full, { package : package })
        .pipe(optimizejs)
        .pipe(gulp.dest, paths.scripts.output)
        .pipe(rename, { suffix: '.min' })
        .pipe(uglify)
        .pipe(optimizejs)
        .pipe(header, banner.min, { package : package })
        .pipe(gulp.dest, paths.scripts.output);

Move to before/after callbacks

I'm trying to use Drop Jumbo (with Astro Navbar) with ProcessWire for a project.

The static basis is:

    <ul class="nav-navbar">

        <li class="dropdown-jumbo" data-dropdown>
            <a href="FALLBACK-URL.com">
                Link
                <span class="dropdown-show">+</span>
                <span class="dropdown-hide">-</span>
            </a>
            <div class="dropdown-menu-jumbo" data-dropdown-menu>
                <div class="container">
                    <div class="grid-three-fourths float-center">                                    
                        <ul>
                            <li><a href="#">Sub-link</a></li>                                    
                        </ul>  
                    </div>                                  
                </div>
            </div>
        </li>

    </ul>

</div>

So, I've replaced divs and texts (only) with an ul, lists and anchors (if compared to the demo).

Perhaps because of this (an active class being applied to a second-level anchor(?)) or something else, when I click on a sub-link in the drop-down menu, it doesn't load the page targeted by the anchor/link (but the URL is fine).
There is the following message in Firebug's Console(?):
"TypeError: i is null

...e.classList.toggle(o.toggleActiveClass),i.classList.toggle(o.contentActiveClass)..."

The fallback URL is the first sub-link URL.

Hey Chris,

I just installed the version 5.0.0 of drop for a new project and I noticed that grandchild menu items are not receiving the same treatment as parent menu items. In the following markup I have a grandchild item:

...
    <li class="dropdown">
        <a href="FALLBACK-URL.com">Dropdown 1</a>
        <div class="dropdown-menu dropdown-right">
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a>
                    <ul>
                        <li><a href="#">Grandchild Item 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 4</a></li>
            </ul>
        </div>
    </li>
...

When I am clicking on the list-item (Item 3) the child element UL is not receiving and active state <ul class="active"> . I tested the difference on the same project by installing an older version of drop (4.3.1) and was able to achieve an active state on nested items.

Thanks again for the good work!

https://github.com/cferdinandi/buoy

• Update Harbor
• Update Keel

Hey,

When links are clicked inside the dropdown, I get an error in the console and it won't follow my links. I noticed the 'Drop' demo page is doing the same thing when the inner links are clicked.

Everything seems to be toggling okay aside from not following links.

Here's the testing site in question: http://macdonald.limberlogic.com/

Any ideas?