Sliiide2 – The Easiest Way to Create a Sliding Nav Menu

Sliiide2 - The Easiest Way to Create a Sliding Nav Menu

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.

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

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">&#215</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,

DEMO Download

Related post:  Tabulous.js - A jQuery tabs module for todays web!
Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close