Responsive replacement for Semantic UI's navigation menu
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 -->
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>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>