Fixed Side Pop Out Menu Plugin With jQuery - Dice Menu

Dice Menu is a very small jQuery plugin used to create a sticky side pop out menu which is great for site navigation or social share buttons.

How to use it:

1. Create the side popout menu from an html unordered list as follows:

<ul class="dice-menu">
  <li>Toggle</li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  ...
</ul>

2. Place jQuery library and the jQuery Dice Menu plugin at the bottom of your html page.

<script src="//code.jquery.com/jquery.js"></script>
<script src="dice-menu.min.js"></script>

3. Apply your custom CSS styles to the side popout menu.

.dice-menu {
  padding: 0;
  display: block;
  position: fixed;
  top: 25%;
  right: 0
}

.dice-menu li {
  display: block;
  border-width: 0;
  border-radius: 5px;
  padding: 15px;
  overflow: hidden;
  background-color: #444;
  color: #eee;
  opacity: 0;
  cursor: pointer
}

.dice-menu li:first-child { opacity: .8 }

Change log:

2018-06-07

• Revised.

---

This awesome jQuery plugin is developed by ssmak. For more Advanced Usages, please check the demo page or visit the official website.