Semantic-ui: How to implement the responsive menu?

[FingersKey]

[ghost]

There is a basic example on responsive page.

<div class="ui stackable container menu">
  <div class="item">
    <img src="assets/images/logo.png">
  </div>
  <a class="item">Features</a>
  <a class="item">Testimonials</a>
  <a class="item">Sign-in</a>
</div>

Source: http://semantic-ui.com/examples/responsive.html

Also see: http://semantic-ui.com/collections/menu.html

[jlukic]

Thanks @tuxy

[rtd62]

Unfortunately, there is not currently a built-in mobile responsive menu like in Bootstrap.

However, I did a pretty good workaround using this Fiddle.

All you have to do to get a good mobile sidebar menu is write some custom CSS and JS on top of the existing framework. However, the sidebar does not have the ability to do dropdowns and is the only caveat.

[lroellin]

@rtd62 this fiddle is not there anymore

[haoxi911]

@rtd62 do you still have access to the workaround code? if so, would you mind to share it via a gist.

[witek1902]

Tip:
I implemented menu for desktop (hide by css for mobile) and sidebar for mobile (hide by css for desktop).

Useful links:
https://semantic-ui.com/modules/sidebar.html
https://semantic-ui.com/collections/menu.html
https://semantic-ui.com/examples/responsive.html

I can share my code, but my use case is specific, because I use Semantic for Angular (https://edcarroll.github.io/ng2-semantic-ui) so I think it is not useful in this topic.

[natzar]

Another solution without a sidebar.

https://github.com/natzar/semantic-ui-hamburger/blob/master/README.md

[Firegarden]

I feel not having a single responsive menu example is enough of a stumbling block that a significant portion of first time users give up on Semantic UI. I have personally not solved this menu issue but I have made some beautify blazing fast UI's with simple vue.js and semantic ui

[zholmes1]

I feel not having a single responsive menu example is enough of a stumbling block that a significant portion of first time users give up on Semantic UI. I have personally not solved this menu issue but I have made some beautify blazing fast UI's with simple vue.js and semantic ui

I 100% agree. This is such a common feature. It baffles me that Semantic doesn't have it.

[psy0rz]

I was looking for a good framework to make an UI. If I will have to fiddle around to create a responsive menu or hamburger menu myself, i'll just look for something else instead.

[rtd62]

Updated fiddle here

[mrdotballard]

I know this is a little on the hack side, and smacks in the face of DRY code, but is kind of clean and simple for using only the semantic components for the responsive menu with drop down:
repeat the html altered for both the full size menu and responsive dropdown menu and add a class for each one and the following JS:

sorry fiddle here

[psy0rz]

Or just use Onsen UI. It has all these things correctly built in.

[mrdotballard]

Thanks, will have a look at that.
Yeah, I'm in full agreement it's odd/frustrating semantic doesn't have this responsive functionality built it, but when you're already well into the project with it...