15

Semantic UI has some problems when it comes to it's menu collection. In short, it's not responsive at all, and the closest thing to it is their "stackable" implementation to simply show the menu as a stack.

Can anyone here recommend a good navigation menu that integrates well with semantic ui?

Thanks for any input.

5
  • Can you share how do you want your responsive menu should look like? Commented Aug 4, 2016 at 1:53
  • Why is Stackable not a good solution ?
    – Weedoze
    Commented Aug 5, 2016 at 8:35
  • 1
    @Weedoze Because a stackable main navigation menu is always "open" covering up most of the first page on a mobile screen. The lead develop of Semantic says there are no plans to make a truly responsive menu, so I'm looking for something else.
    – pbarney
    Commented Aug 5, 2016 at 19:14
  • @Albert Israel, I'm looking for a top horizontal multi-level nav bar that compresses into the standard "hamburger" menu when on mobile.
    – pbarney
    Commented Aug 5, 2016 at 19:15
  • I believe there's an approach in Semantic UI to achieve that. You can use a standard menu on desktop and a sidebar on smaller devices. Commented Aug 6, 2016 at 1:36

3 Answers 3

9
+50

I have changed my previous code and tried making the semantic UI navigation responsive. This HTML code is based on the semantic UI which I have tried to keep as minimal as possible and added css and JS code for the transition features. I hope this helps.

I have created a fiddle with the new code. below is the link https://jsfiddle.net/1712/g6agpoy9/

<!-- language: lang-css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/reset.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/site.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/container.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/grid.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/header.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/menu.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/dropdown.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/transition.min.css" rel="stylesheet" />



    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/sidebar.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/icon.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/segment.min.css" rel="stylesheet" />


    .hidden.menu {
      display: none;
    }
    .masthead.segment {
      min-height: 700px;
      padding: 1em 0em;
    }
    .masthead .logo.item img {
      margin-right: 1em;
    }
    .masthead .ui.menu .ui.button {
      margin-left: 0.5em;
    }
    .masthead h1.ui.header {
      margin-top: 3em;
      margin-bottom: 0em;
      font-size: 4em;
      font-weight: normal;
    }
    .masthead h2 {
      font-size: 1.7em;
      font-weight: normal;
    }
    .ui.vertical.stripe {
      padding: 8em 0em;
    }
    .ui.vertical.stripe h3 {
      font-size: 2em;
    }
    .ui.vertical.stripe .button + h3,
    .ui.vertical.stripe p + h3 {
      margin-top: 3em;
    }
    .ui.vertical.stripe .floated.image {
      clear: both;
    }
    .ui.vertical.stripe p {
      font-size: 1.33em;
    }
    .ui.vertical.stripe .horizontal.divider {
      margin: 3em 0em;
    }
    .quote.stripe.segment {
      padding: 0em;
    }
    .quote.stripe.segment .grid .column {
      padding-top: 5em;
      padding-bottom: 5em;
    }
    .footer.segment {
      padding: 5em 0em;
    }
    .secondary.pointing.menu .toc.item {
      display: none;
    }
    @media only screen and (max-width: 700px) {
      .ui.fixed.menu {
        display: none !important;
      }
      .secondary.pointing.menu .item,
      .secondary.pointing.menu .menu {
        display: none;
      }
      .secondary.pointing.menu .toc.item {
        display: block;
      }
      .masthead.segment {
        min-height: 350px;
      }
      .masthead h1.ui.header {
        font-size: 2em;
        margin-top: 1.5em;
      }
      .masthead h2 {
        margin-top: 0.5em;
        font-size: 1.5em;
      }
    }

<!-- language: lang-html -->



    <!-- Following Menu -->
    <div class="pusher">
      <div class="ui inverted vertical masthead center aligned segment">
        <div class="ui container">
          <div class="ui large secondary inverted pointing menu">
            <a class="toc item">
              <i class="sidebar icon"></i>
            </a>
            <a class="active item">Home</a>
            <a class="item">Work</a>
            <a class="item">Company</a>
            <a class="item">Careers</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Sidebar Menu -->
    <div class="ui vertical inverted sidebar menu">
      <a class="active item">Home</a>
      <a class="item">Work</a>
      <a class="item">Company</a>
      <a class="item">Careers</a>
      <a class="item">Login</a>
      <a class="item">Signup</a>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/sidebar.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/visibility.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/components/transition.js"></script>
<!-- language: lang-js -->

    $(document)
      .ready(function() {

        // create sidebar and attach to menu open
        $('.ui.sidebar')
          .sidebar('attach events', '.toc.item');

      });
<!-- end snippet -->
0
4

using minimal HTML and css code we can achieve a responsive menu navigation which can be customized and no javascript needed. using off-canvas property we can hide the basic menu and in mobile view the menu links come to left and the screen gets divided into menu 80% and content 20%. I have used label for the hamburger menu for mobile the label is hidden for desktop. Coming to browser compatibility the use case for Off Canvas Menus are generally in smart phones and tablets which come with modern browsers. All browsers with IE8 and higher versions support this feature.

Below is the sample code of the navigation

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}
body {
  margin: .55em;
  color: black;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: .95em;
}

::-webkit-scrollbar-track {
  background-color: rgba(217, 217, 217, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(184, 184, 184, 0.5);
  box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
}

/* Advanced Checkbox Hack */
body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  position: absolute;
  left: 0;
  display: none;
  width: 2em;
  height: 2.25em;
  padding: .35em;
  font-size: 1.1em;
  color: #fff;
  transition: color .3s ease-in-out;
  cursor: pointer;
  user-select: none;
  margin: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* big screens */
nav[role="off-canvas"] {
  position: relative;
  width: 50em;
  margin: 0 auto;
  transition-duration: .3s, .5s;
  transition-timing-function: ease-in-out;
  transition-property: left, opacity, box-shadow;
}

nav[role="off-canvas"] a {
  color: #fff;
  text-decoration: none;
  font: 1.4em 'Open Sans', sans-serif;
  transition: color .3s ease-in-out;
  display: table-cell;
  vertical-align: middle;
}

nav[role="off-canvas"] ul {
  padding: 0;
  margin: 0 auto;
  width: 100%;
}

nav[role="off-canvas"] ul > li {
  float: left;
  padding: .5em 0;
  width: 8em;
  margin: .5em 0;
  opacity: .8;
  text-transform: uppercase;
  display: table;
  background: rgba(247, 52, 8, 0.65);
  cursor: pointer;
  text-align: center;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
  transition-property: box-shadow, color, opacity, padding-left;
  cursor: pointer;
}

nav[role="off-canvas"] ul > li:hover {
  color: #fff;
  opacity: 1;
  box-shadow: 0.5em 0 0 0 rgba(255, 255, 255, 0.95);
}

nav[role="off-canvas"] ul > li:hover > a {
  color: #fff;
}

nav[role="off-canvas"] ul > li:nth-child(2) {
  background: rgba(247, 183, 8, 0.65);
}

nav[role="off-canvas"] ul > li:nth-child(3) {
  background: rgba(32, 247, 8, 0.65);
}

nav[role="off-canvas"] ul > li:nth-child(4) {
  background: rgba(8, 231, 247, 0.65);
}

nav[role="off-canvas"] ul > li:nth-child(5) {
  background: rgba(8, 72, 247, 0.65);
}

/* small screens */
@media screen and (max-width: 44em) {
  html,
  body {
    margin: 0;
    overflow-x: hidden;
  }

  .content {
    margin: 2.5em .5em 0 .5em;
  }

  nav[role="off-canvas"] {
    position: absolute;
    top: 3em;
    left: -20em;
    width: 20em;
    opacity: 0;
  }

  nav[role="off-canvas"] ul > li {
    height: 100%;
    width: 100%;
    text-align: left;
    margin: 0;
  }

  nav[role="off-canvas"] ul > li:hover {
    box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45);
  }

  label {
    display: block;
  }

  label:after {
    position: absolute;
    right: .25em;
    top: 0;
    content: "\2261";
    font-size: 1.8em;
  }

  label:hover,
  input:checked ~ label {
    color: #000;
  }

  input:checked ~ nav[role="off-canvas"] {
    opacity: 1;
    left: 0;
    box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3);
  }

  input:checked ~ nav[role="off-canvas"] ul > li {
    padding: .55em .55em .55em 1.5em;
  }

  input:checked ~ nav[role="off-canvas"] ul > li:hover {
    padding-left: 3.5em;
  }

  input:checked ~ nav[role="off-canvas"] ul > li:after {
    position: absolute;
    right: .25em;
    content: "\203A";
    font: bold 1.4em sans-serif;
    color: inherit;
  }

  input:checked ~ .content {
    margin-left: 20.5em;
    margin-right: -20.5em;
  }
}
<input type="checkbox" id="menu">
<label for="menu" onclick></label>
<nav role="off-canvas">
    <ul>
        <li><a href="#">Stream</a></li>
        <li><a href="#">Lab</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</div>

4
  • thank you! looks like a working example. I will try to implement it on my website and then reward you! Commented Feb 7, 2017 at 10:12
  • I have just realized that your solution is not exactly what is required. If to use it I need to remove Semantic menu. And I need Semantic menu which should collapse to stackable menu on mobile phones. Commented Feb 7, 2017 at 15:08
  • 1
    Please see the latest answer I have updated the code with semantic UI HTML. Commented Feb 8, 2017 at 10:25
  • thank you one more time! I have a related question. Please contact me via chat or email. Commented Feb 8, 2017 at 12:16
3

I've made a sample code below on how to achieve responsive 'hamburger' menu using Semantic UI. Click the Full page link in JSFiddle to see the menu in full width then resize your browser to see the responsiveness.

$('.ui.sidebar').sidebar({
    context: $('.pushable.segment'),
    transition: 'overlay'
}).sidebar('attach events', 'a#hamburger-link');
.my-content .ui.segment{
  min-height:500px;
  height:100%;
}
.ui.grid{
  padding:0 !important;
}
.pushable.segment{
  margin:0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<div class="ui grid">
  <div class="computer only row">
    <div class="column">
      <div class="ui inverted blue menu">
        <a class="item">Menu Item A</a>
        <a class="item">Menu Item B</a>
        <a class="item">Menu Item C</a>
        <a class="item">Menu Item D</a>
      </div><!-- blue menu-->
    </div><!--column-->
  </div><!--computer only row-->
   <div class="tablet mobile only row">
    <div class="column">
      <div class="ui inverted blue menu">
        <a id="hamburger-link" class="item"><i class="bars icon"></i></a>
      </div>
    </div><!--column-->
  </div><!--computer only row-->
</div><!-- grid-->
<div class="ui pushable segment">
    <div class="ui sidebar inverted blue vertical menu">
      <a class="item">Menu Item A</a>
      <a class="item">Menu Item B</a>
      <a class="item">Menu Item C</a>
      <a class="item">Menu Item D</a>
    </div><!-- blue menu-->
    <div class="my-content pusher">
        <div class="ui segment">
        YOUR CONTENT HERE... ISN'T IT NICE? <i class="pointing up icon"></i>
        </div>
     </div>
</div>

1
  • 1
    I see what you mean, but it's not very DRY. Having to duplicate the menu structure twice leads me to believe that there is something lacking in SUI's nav menu system.
    – pbarney
    Commented Aug 9, 2016 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.