[Menu] Make Fixed Menu Collapsable

[JakePrasad]

Hi,

Having a collapsable fixed menu is something of a must have with the rise of phones. Something similar to Bootstrap's collapsable navbar or Foundation's top-bar would be great.
http://getbootstrap.com/components/#navbar
http://foundation.zurb.com/docs/components/top-bar.html#

[jlukic]

I agree that all menus should reformat to vertical menus when at mobile widths. With fixed menus converting to collapsible, click-to-open menus. The issue with click-to-open menus though is they require javascript.

Which means there would need to be a behavioral extension to menu to handle this.

[isimmons]

Trying out semantic for the first time and looking for this too. Spoiled by bootstrap :-).

[feidens]

Any updates on this?
I read in another issue "Menus will have responsive variations". Any definite release date?

[jlukic]

Seeing the amount of activity on this, I'll prioritize this for this or next week.

[rcarter]

+1

[dpanov]

+1. This will be super useful.

[whothisbeme]

+1 This is a must.

[mzbyszynski]

Hey @jlukic, If you need any help implementing this, I would be happy to take a shot at it. Just let me know if you had any plans/ideas for how you wanted it to be implemented...

[rkkautsar]

+1 :)

[raniglas]

Seems like with 1.0, "right menu" does not work with mobile. Instead of collapsing (a-la bootstrap) it wraps around.

Was this resolved and I'm missing something? if so, is there an example?

Anyone figured a workaround to do this "manually"?

[mvdkleijn]

Has this been done??

[jlukic]

It has not been done yet.

[trevorhreed]

+1

[jmasejo]

+1 must have

[whothisbeme]

Is there a time frame when this might possibly be implemented?

[jlukic]

I would say after #1571 which is my main focus right now.

[tirdadc]

+1

I'm using the sidebar component in the meantime, but this is definitely a staple now.

[piernik]

+1

[pcriv]

+1

[olurin]

👍

[bhanuc]

+1 Would also love to help in the implementation if needed.

[kareem2]

+1

[avaz]

+1

[pagenoare]

+1

[Erbenos]

+1

[lsunsi]

+1

[serkan-koyuncu]

+1

[AtomiCAST]

It's seriously sad that such a basic thing has been forgotten, really enjoyed working with Semantic while it lasted but i refuse to spend more time on making 2 menus (A sidebar and a menu) to have a working Responsive Navigation. Double the effort for something that should ease the process.

+1 (Will revisit S.UI if added in future RCs)

[b-corentin]

+1

[DanielSwain]

Here is a solution that behaves like Bootstrap and does not require a second set of menu items. It requires just a tiny bit of JS and CSS.
The JS:

$(function() {
// Set up to handle wrapping of tab menu (tab actuator) items
    $(window).resize(function() {
      checkIfWrapped();
    });

    checkIfWrapped(); // Make sure the function is fired upon document ready
});

// Detect whether a Semantic UI tabular menu is wrapped
function checkIfWrapped() {
    var pos_top_1st = $('.tabular.menu .item').first().position().top;
    $('.tabular.menu .item:not(first-child)').each(function() {
        var pos_top = $(this).position().top;
        if (pos_top > pos_top_1st) {
            $(this).parent().addClass('wrapped');
            return;
        } else if (pos_top == pos_top_1st) {
            $(this).parent().removeClass('wrapped');
        }
    });

The HTML structure. (Note that placing the .tabular.menu .item-s inside a div within the overall .tabular.menu allows the use of a separate .right.menu within the .tabular.menu if desired) :

          <div id="tabs-menu" class="ui top attached tabular menu">
              <div id="qj-tabs">
                  <div class="tab item"></div>
                  <div class="tab item"></div>
                  <div class="tab item"></div>
              </div>
              <div class="right menu">
                  <a class="tab item"><i class="add icon"></i> Add Job</a>
                  <a class="tab item"><i class="copy icon"></i> Copy Item</a>
              </div>
          </div>
              <div class="botttom attached tab segment"></div>
              <div class="botttom attached tab segment"></div>
        </div>

The CSS:

#qj-tabs {
  display: flex !important;   /* Will not work unless defined as display: flex */
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

#tabs-menu .wrapped .item {
  border-radius: 5px !important;
  border: 1px lightgray solid !important; /*  Just styling for the default theme here */
  margin: 0 2px 2px 0 !important;
}

#tabs-menu .wrapped .active.item {
    background-color: lightgray;
}

Thanks to Mr. Boris the answer here that got me started on this solution.

[icodebuster]

@jlukic
Would love to see a solution for this issue.

Thank you

[ghost]

Any working solution on this issue yet?

[AtomiCAST]

@andrewoko-odion Doesn't seem like there's much being done about this, it has been opened since 2013 and yet no solution right out of the box. Only shared code to try and imitate the behavior which i still refuse to make use of if i don't need to when something so simple and required this days should be already be implemented on the framework itself.

[nick-dolan]

Absolutely agree with @dualpixel
+1

[CanadianEngineer]

As much as I like Semantic, I gotta say that this is a deal breaker for me. As soon as this gets fixed, I'm all in.

+1

[pierre-H]

+1

[DanielSwain]

@CanadianEngineer, @pierre-H You might want to look at the solution I posted on March 28th just above here. It's really easy to implement. I do agree that this needs to be implemented into the main library though.

[yildiz]

Any working solution on this issue yet?

[MoezGholami]

+1

[Pythonian]

Wow! I really don't understand why the core team of semantic ui don't want to consider a responsive menu. This should have been a great framework to compete well enough with Bootstrap but the lack of support for responsive menu is just so painful. @jlukic should see that this feature is one which everyone wants and then make it a priority, please!

[jimmyn]

@Pythonian totally agree! +1

[dayze]

Same for me, I really enjoy semantic ui but this function should be native since a long long time...

[HerrNiklasRaab]

Waiting, please implement + 100000000

[gino]

+1

[Ash-oi]

+1

[ebrooks42]

+1
I'm not as vehemently opposed as some to having two separate layouts for a menu (using React makes creating that not too much of a chore and maintains just a single source location). However, I'd agree that this should really be consider a necessity for a modern, full-featured suite of styling tools such as Semantic.

[dawidsappich]

+1

[n4uti]

After 4 years getting "+1" mails from this thread I'll mute this now. Anyway, bye!

[maksnester]

SUI newbie here:
Really, guys, if you don't want to complicate something in your code because of adding responsive menu, so just write and add some right example of responsive menu with semantic-ui to your docs. Why did you chose to confuse your community with such answers like "just add another menu". You could just explain your point of view in your docs. Tell to everybody why it's a goodness to have a two separate menus for mobile and wide-screens. Then add working good example and close this issue. What's a problem? Why did you prefer to have opened 4 year old issue?

[finferflu]

+1

[siphomateke]

@finferflu @dawidsappich @ashleymcveigh @gino @guihatano Please use GitHub reactions instead of just posting +1

[finferflu]

@nextgensparx I did use the reaction, but then I saw that a lot of people were doing it, so I assumed that was how it worked. Sorry about that.

[gpbaculio]

any working sample repo? It's easy to make grids device visibility responsive but it's hard when you display icon and try to show/hide menus. tsk

[tanmaybhatt]

+1

[devdudeio]

+1

[EirikFA]

+1