Menu icon Foundation
Can I get 2columns in dropdown-menu?

How I get 2columns in dropdown-menu?
please,help me.

dropdowncolumns

How I get 2columns in dropdown-menu?
please,help me.


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan almost 6 years ago

Hey Puriphat!

Check out this thread: http://foundation.zurb.com/forum/posts/232-megamenu

It might be helpful. A lot of people have been working on a MegaMenu. I think it was part of a competition set by Rafi, but my memory betrays me.

Anyway, I had a go because you posted this and I've built something for you that you might want to look at: http://codepen.io/winghouchan/pen/esuGI

Robin Cox almost 6 years ago

If you use the top-bar described on this page: http://foundation.zurb.com/docs/components/topbar.html

Then you can try this (I haven't tested it though):

<li class="has-dropdown">
    <a href="#">Right Button with Dropdown</a>
    <ul class="dropdown">
        <li>
            <div class="row">
                <div class="large-6 columns">
                    <!-- some content here -->
                </div>
                <div class="large-6 columns">
                    <!-- some content here -->
                </div>
            </div>
        </li>
    </ul>
</li>

puriphat almost 6 years ago

Thank you for your answer,Robin

Your code not work , it's won't be 2 columns, it's show only 1 column but distorted .
I want get 2 columns because I have 18 submenu that too long for monitors ,so if you have any idea please shared for me .

Thank you so much

Wing-Hou Chan almost 6 years ago

Hey Puriphat!

Check out this thread: http://foundation.zurb.com/forum/posts/232-megamenu

It might be helpful. A lot of people have been working on a MegaMenu. I think it was part of a competition set by Rafi, but my memory betrays me.

Anyway, I had a go because you posted this and I've built something for you that you might want to look at: http://codepen.io/winghouchan/pen/esuGI

puriphat almost 6 years ago

Thak you so mach ,Wing-Hou Chan

It's work.

Christian Matthias over 5 years ago

Wing Hou Chan

This is probably the best solution. The thing is we need to create a grid system like that of jetmenu. The grid system should be very vast, again like that of jet menu...

Moreover, tidbits such as animations and things should be documented as well. giving easy access to making changes and alterations. I am going to try and implement the above solution and add to the fray.

lastly, Is Foundation plan on implementing this into a future release so we aren't hacking the nonsense out of this.

The other thing i can think of is I wish there was a better solution to the off canvass menu system. it seems like Foundation is fighting with a preferred mobile method.

In theory the off canvass solution is better and provides better usability. However it is a lot more difficult to implement. The other method of hamburger drop down isn't mobile friendly at all because the links are never live.

perhaps if a hybrid of the two uses would make for a better solution. And hopefully it will work well with megamenu integration.

Wing-Hou Chan over 5 years ago

Hey Christian!

Thanks for the feedback.

I took a look at the Jet Responsive MegaMenu.

What you want is certainly possible. I will look into this and see what can be done to implement it a responsive menu without hacking the top bar.

A Pull Request will most likely be submitted on GitHub to implement this. It could be released in 5.3 if I work quickly but I think the most likely release on this is 5.3.1, 5.4 or even Foundation 6 depending on how ZURB wants Foundation to flow.

You also talk about an integration of off-canvas and the top bar. I think there are some creations by the Foundation community which could satisfy your needs.

Here are some links:

http://foundation.zurb.com/forum/posts/3168-using-off-canvas-with-a-top-bar
http://codepen.io/winghouchan/pen/gmvno

The first link demonstrates solutions that are slightly hacky.

The Pen I made uses Foundation visibility classes to hide and show the different menus on different screen sizes. Of course you can use different visibility classes to achieve different effects.

Less hacky and more efficient implementations don't exist yet, but see what you can create and share it with the community.

Christian Matthias over 5 years ago

Thanks for replying.

Here are my thoughts on something I don't like that Foundation topbar menu does and where jetmenu does it differently. Thinking mobile first... Jet menu turns their small menu icon into a drop down click situation that on first click drops down the underlying menu and upon a second click to the parent item it sends the click directly to the parent item link... if there is one.

Don't get me wrong in theory I understand exactly what your menu topbar system is doing it is stating that if you are a parent you shouldn't be a link as well... (kinda makes sense but not entirely IMHO)... If there was a link there than the entire menu situation becomes unusable hence the need for off canvass.

I installed the offcanvas and like it a lot actually. The above examples which show the off-canvass always visible I really like that option too. almost like the menu system when you need it type of things. which is mobile and desktop friendly.

***One note. oddly I notice that the off-canvass menu for Foundation Forums seems to be much better optimized than that of other parts of the site. I like the foundation forum optimization better as it seems a little bit more snappy.