Today, I want to show you a simple and easy way to create a sliding navigation menu that can appear anywhere on your web page.
Sliiide is a great and very small jQuery plugin that will help you out to create an App-style navigation menu that will slide when a hamburger icon is clicked.
This plugin is particularly great as it disables the page scroll when the menu is opened and it can push the whole body to the other side if you want to. What’s more, it is dead easy to implement it on any website.
Take a look below how you can quickly put Sliiide into action.
Step #1 – Before adding any markup, you need to link the nav-icon.css in the head section of you document.
<link href="nav-icon.css" rel="stylesheet">
Step #2 – The second step is to add the necessary “flex-center-wrapper” and “flex-column” classes to the body tag.
<body class="flex-center-wrapper flex-column">
Step #3 – When these two important steps are done, it is time to add the menu toggle.
<div id="nav-icon2"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
Step #4 – The next thing you need to do is to create a left menu that will slide out from the left side of your screen when it is toggled.
<div class="sliding-menu flex-center-wrapper flex-column left-menu"> <ul> <li> <a href="#">Home</a> </li> <li><hr></li> <li><a href="#">Contact</a></li> <li> <hr></li> <li><a href="#">About</a>/li> </ul><span class="sliiider-exit exit left-exit">×</span></div>
Step #5 – Style it out with some CSS.
.flex-center-wrapper {
display: flex;
display: -webkit-flex;
align-content: center;
align-items: center;
-webkit-align-content: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
text-align: center;
}
.flex-row {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-column {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.slider-toggle {
display: block;
margin: 10px 15px 10px 15px;
color: white;
font-size: 18px;
border: none;
letter-spacing: 1px;
font-family: Lato;
width: 50px;
height: 20px;
border-radius: 100px;
text-align: center;
background-color: rgb(43, 57, 69);
transition: background-color 0.5s;
}
.buttons-container span {
color: white;
font-family: Lato;
font-size: 18px;
letter-spacing: 1.2px;
}
.selected { background-color: rgb(18, 209, 234); }
.sliding-menu {
background-color: rgb(40, 38, 38);
visibility: hidden;
position: fixed;
overflow: hidden;
}
.sliding-menu a, .sliding-menu p {
font-family: Lato;
font-weight: 100;
letter-spacing: 2px;
font-size: 18px;
color: rgb(200, 200, 200);
text-decoration: none;
margin: 0 20px;
}
.sliding-menu ul {
list-style: none;
text-align: center;
padding: 0;
}
.sliding-menu li { margin: 40px auto 40px auto; }
.sliding-menu hr {
width: 50%;
min-width: 100px;
border-color: rgb(18, 209, 234);
}
.exit {
position: absolute;
font-size: 40px;
color: white;
cursor: pointer;
}
Step #6 – After doing these steps, you need to add the jQuery library and the Sliiide plugin at the bottom of your document.
<script src="jquery.js"></script> <script src="sliiide.js"></script>
Step #7 Next, initialize the plugin.
$('.left-menu').sliiide({/*Check out the options below*/});
Here are the options you can use to override the defaults and customize Sliide.
// menu toggle toggle: "#sliiider-toggle", // exit element exit_selector: ".slider-exit", // animation options animation_duration: "0.5s", animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", // right, top, bottom, left place: "right", // slide the body body_slide: true, // disable page scroll no_scroll: true,