search

adobe-accessibility / Accessible-Mega-Menu

A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin.
Apache License 2.0
605 stars 199 forks source link

bootstrap #28

Open ezekel opened 9 years ago

ezekel commented 9 years ago

HI, first of all I like this megamenu when I saw your example...but I can ask if this will work in bootstrap menu ? can I still Reuse Bootstrap navbar markup ?

Thank you in advance.

panoply commented 8 years ago

You're best to use something like Yamm3 with bootstrap for a megamenu. If you want to integrate this into bootstrap you're going to want to fiddle with the CSS heavily, the JS is pretty much setup, and clean af. I recommend you drop the panel-group class by eliminating the "cols" class. This will give you a responsive div dropdown box and from here you just use the grid classes in the megamenu.

By simply wrapping the panel in a max-width class and using fixed position. This way it's responsive.

.accessible-megamenu-panel {
        position: fixed;
        left: 0;
        right: 0;
        color: #222;
        margin: 0 38px; //here for left/right margin
        padding: 20px;
        line-height: normal;
        visibility: hidden;
        overflow: hidden;
        display: none !important;

        &.open {
            top: 86px; // here for top spacing
            display: block !important;
            visibility: visible;
            max-height: 500px;
            max-width: 1200px; //here for width.
            background-color:rgb(255, 255, 255);
            z-index: 1001;
            border: 1px solid #000;

        }

I'm currently integrating this menu into shopify using the timber framework. Once I complete the project I will branch this repo and make a bootstrap integration for all you bootstrap fags.